Skip to main content

Add Urgency Messaging & Countdown Timers

Display stock urgency messages like "Only 3 left!" and countdown timers for sales or launches using metafields.

Advanced Tutorial

This tutorial requires knowledge of HTML, CSS, JavaScript, and Shopify Liquid. May require adjustments depending on your theme.

Part 1: Stock Urgency Messaging​

Unlike using raw inventory counts, metafield-based urgency messages give you full control over the messaging and which products display it.

Step 1: Create the Metafield​

In Metafield Studio, create a metafield on your product:

  • Namespace: custom
  • Key: urgency_message
  • Type: Single line text
  • Value: e.g., "Only 3 left in stock!", "Selling fast", "Limited edition, while supplies last"

Step 2: Create a Liquid Snippet​

Create urgency-message.liquid in Snippets:

{% if product.metafields.custom.urgency_message %}
  <div class="urgency-message">
    <span class="urgency-message__icon">&#9888;</span>
    {{ product.metafields.custom.urgency_message }}
  </div>
{% endif %}

Step 3: Include in Product Template​

Add near the "Add to Cart" button in your product template:

{% render "urgency-message" %}

Step 4: Add CSS​

.urgency-message {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 10px 0;
  padding: 8px 14px;
  background-color: #fff3f3;
  border: 1px solid #e74c3c;
  border-radius: 4px;
  color: #c0392b;
  font-size: 14px;
  font-weight: 600;
}

.urgency-message__icon {
  font-size: 16px;
}

Part 2: Countdown Timers​

Display a live countdown to a sale end date or product launch date.

Step 1: Create the Metafield​

In Metafield Studio, create a metafield on your product:

  • Namespace: custom
  • Key: countdown_date
  • Type: Date (or Date and time)
  • Value: The target date (e.g., 2026-04-01)

Optionally, create a label metafield:

  • Namespace: custom
  • Key: countdown_label
  • Type: Single line text
  • Value: e.g., "Sale ends in:", "Launches in:", "Pre-order closes in:"

Step 2: Create a Liquid Snippet​

Create countdown-timer.liquid in Snippets:

{% assign countdown_date = product.metafields.custom.countdown_date %}
{% if countdown_date %}
  <div class="countdown-timer" data-target-date="{{ countdown_date }}">
    {% assign label = product.metafields.custom.countdown_label | default: "Offer ends in:" %}
    <span class="countdown-timer__label">{{ label }}</span>
    <div class="countdown-timer__digits">
      <div class="countdown-timer__unit">
        <span class="countdown-timer__number" data-days>--</span>
        <span class="countdown-timer__text">Days</span>
      </div>
      <div class="countdown-timer__unit">
        <span class="countdown-timer__number" data-hours>--</span>
        <span class="countdown-timer__text">Hours</span>
      </div>
      <div class="countdown-timer__unit">
        <span class="countdown-timer__number" data-minutes>--</span>
        <span class="countdown-timer__text">Min</span>
      </div>
      <div class="countdown-timer__unit">
        <span class="countdown-timer__number" data-seconds>--</span>
        <span class="countdown-timer__text">Sec</span>
      </div>
    </div>
  </div>

  <script>
    (function() {
      var timer = document.querySelector('.countdown-timer');
      var targetDate = new Date(timer.getAttribute('data-target-date')).getTime();

      function update() {
        var now = new Date().getTime();
        var diff = targetDate - now;

        if (diff <= 0) {
          timer.style.display = 'none';
          return;
        }

        timer.querySelector('[data-days]').textContent = Math.floor(diff / 86400000);
        timer.querySelector('[data-hours]').textContent = Math.floor((diff % 86400000) / 3600000);
        timer.querySelector('[data-minutes]').textContent = Math.floor((diff % 3600000) / 60000);
        timer.querySelector('[data-seconds]').textContent = Math.floor((diff % 60000) / 1000);
      }

      update();
      setInterval(update, 1000);
    })();
  </script>
{% endif %}

Step 3: Include in Product Template​

Add near the price or "Add to Cart" button:

{% render "countdown-timer" %}

Step 4: Add CSS​

.countdown-timer {
  margin: 12px 0;
  padding: 14px 18px;
  background-color: #fff8e1;
  border: 1px solid #f9a825;
  border-radius: 6px;
  text-align: center;
}

.countdown-timer__label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
  color: #666;
}

.countdown-timer__digits {
  display: flex;
  justify-content: center;
  gap: 16px;
}

.countdown-timer__unit {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.countdown-timer__number {
  font-size: 24px;
  font-weight: 700;
  color: #333;
  line-height: 1;
}

.countdown-timer__text {
  font-size: 11px;
  text-transform: uppercase;
  color: #888;
  margin-top: 4px;
}

Managing Urgency at Scale​

Use the Bulk Editor to set urgency messages or countdown dates across many products at once. This is especially useful for:

  • Flash sales Set countdown dates on all sale products, then bulk-clear after the sale
  • Seasonal campaigns Add "Limited Holiday Edition" badges before a holiday, remove after
  • Launch events Set countdown timers for a product drop, then clear once products are live

To remove expired messaging, bulk-clear the metafield values using the Bulk Editor or a CSV import with empty values.

Combine for maximum impact

Use urgency messaging and countdown timers together with product badges for a layered approach: a "Sale" badge on the product card catches attention in the collection, and the countdown timer on the product page creates pressure to buy now.