HTML to Liquid Converter

Production Shopify · Impulse as conversion lab

Run Impulse sale modules merchants can schedule with metafields

Impulse storefronts stack urgency modules for flash sales, seasonal campaigns, and promo windows. This guide is about shipping metafield-driven sections that turn on and off without a deploy—not hardcoding countdown dates into Liquid that expire next Tuesday.

Production implementation guide · Updated 2026-08-03

Start here if the storefront runs high-volume promos

Use this guide when sale calendar frequency and merchandising velocity demand that content operators control module visibility—not developers redeploying Liquid every campaign.

This guide fits when

  • Impulse or promo-heavy themes where flash sales and limited offers are weekly
  • Merchants who need to schedule sale hero visibility, countdown timers, and urgency badges for a campaign window
  • HTML with hardcoded sale dates that must become metafield-gated so next quarter's promo does not require a code change
  • Agencies that ship custom sections content teams can activate on Black Friday morning without engineering on call

Choose a different guide when

  • Dawn / free themes where campaigns launch infrequently (different guide, simpler on/off model)
  • Prestige editorial builds where urgency and dense promo UI fight the brand voice
  • Announcement bars for general site messages (different object—use announcement section instances)
  • Hero sections with one-time campaign settings (different object—use flat section.settings, no metafield calendar)

Impulse's conversion calendar problem (and metafield solution)

On Impulse-style storefronts, promo modules are constant. The homepage shows a flash-sale hero this week, a free-shipping band next week, and a VIP-access countdown the week after. Hardcoding campaign start and end dates in Liquid means every promo rotation requires a developer and a deploy.

Metafield-driven visibility moves that calendar to the merchant. A custom section reads shop or template metafields to decide if the sale module renders. Content operators edit metafield values in Settings or Metaobjects—section code stays stable across every campaign.

Hardcoded promo dates vs metafield calendar
Hardcoded in Liquid                       Metafield-gated promo
───────────────────────                   ──────────────────────────
{% if "now" > "2026-08-15" %}             {% if shop.metafields.promo.flash_active %}
  render flash module                       render flash module
{% endif %}                               {% endif %}

→ Code change per campaign                → Setting change per campaign
→ Deploy + test window                    → Instant activation (editor or API)
→ Expired dates pile up in comments       → Reusable on/off switch per module

When promo frequency is high, metafield gates shift ownership from engineering to merchandising operations.

Metafield architecture for sale module gates

Define a metafield namespace for campaign control (e.g., shop.metafields.promo.flash_active as boolean). Your section checks that metafield before rendering urgency UI. Operators toggle the metafield in admin Settings or via a Metaobject calendar—section file never changes.

Prefer shop-level metafields for sitewide promos, product metafields for SKU-specific urgency badges, and collection metafields for category takeover bands. Keep the schema simple: booleans for on/off, date_time for countdown targets, single_line_text for dynamic urgency copy.

Metafield-gated flash sale module

{% comment %} Read shop metafield for flash sale visibility {% endcomment %}
{% assign flash_active = shop.metafields.promo.flash_active %}
{% assign flash_end = shop.metafields.promo.flash_end_date %}
{% assign flash_message = shop.metafields.promo.flash_message %}

{% if flash_active %}
  <section id="FlashSale-{{ section.id }}" class="flash-sale color-{{ section.settings.color_scheme }}">
    {% if flash_message != blank %}
      <p class="flash-sale__message">{{ flash_message }}</p>
    {% endif %}
    {% if flash_end != blank %}
      <div class="flash-sale__countdown" data-target-date="{{ flash_end }}">
        {% comment %} Countdown JS targets this element {% endcomment %}
      </div>
    {% endif %}
    <a class="button" href="{{ section.settings.cta_link }}">
      {{ section.settings.cta_label | default: "Shop now" }}
    </a>
  </section>
{% endif %}

Metafield booleans guard rendering; date and text metafields supply urgency data. Marketing edits shop.metafields.promo.* in admin—section code is stable.

Schema for metafield-gated section (settings only)

{
  "name': 'Flash sale hero",
  "settings": [
    {
      "type': 'color_scheme",
      "id': 'color_scheme",
      "label': 'Color scheme",
      "default': 'scheme-1"
    },
    {
      "type': 'text",
      "id': 'cta_label",
      "label': 'Button label",
      "default': 'Shop flash sale"
    },
    {
      "type': 'url",
      "id': 'cta_link",
      "label': 'Button link"
    },
    {
      "type': 'paragraph",
      "content': 'Visibility controlled by shop.metafields.promo.flash_active (boolean). Edit metafield values in Settings → Custom data."
    }
  ],
  "presets": [{ "name": "Flash sale hero" }]
}

Schema documents the metafield contract in a paragraph setting. Operators know where to flip the switch—no support tickets asking 'how do I turn it on?'

Countdown timers and urgency copy without hardcoded dates

Impulse promo modules often include countdown timers ('Ends in 4h 23m'). Avoid hardcoding the target date in Liquid defaults or JavaScript—next campaign requires a code change. Store the target timestamp in a date_time metafield; JavaScript reads that value to drive the countdown UI.

For urgency copy ('Only 3 left' / 'Final hours'), prefer single_line_text metafields over hardcoded strings. Merchandising teams can A/B test urgency language without a deploy—just edit the metafield value.

Countdown timer reading metafield date

{% assign countdown_target = shop.metafields.promo.flash_end_date %}

{% if countdown_target != blank %}
  <div class="countdown" data-end-date="{{ countdown_target | date: '%Y-%m-%dT%H:%M:%S%z' }}">
    <span class="countdown__label">Sale ends in</span>
    <span class="countdown__timer" data-role="timer">Loading...</span>
  </div>

  <script>
    (function() {
      const el = document.querySelector('[data-end-date="{{ countdown_target | date: "%s" }}"]');
      if (!el) return;
      const target = new Date(el.dataset.endDate).getTime();
      
      function update() {
        const now = Date.now();
        const diff = target - now;
        if (diff <= 0) {
          el.querySelector('[data-role="timer"]').textContent = 'Ended';
          return;
        }
        const h = Math.floor(diff / 3600000);
        const m = Math.floor((diff % 3600000) / 60000);
        const s = Math.floor((diff % 60000) / 1000);
        el.querySelector('[data-role="timer"]').textContent = h + 'h ' + m + 'm ' + s + 's';
        requestAnimationFrame(update);
      }
      update();
    })();
  </script>
{% endif %}

Metafield supplies the target; JS reads it and updates the UI. Next campaign: change the metafield date—countdown code is reusable.

Stacking multiple promo sections without collision

Impulse homepages often run three to five promo modules at once: flash hero, urgency banner, limited-SKU grid, countdown footer. Each section must own its metafield namespace and CSS scope. Collisions happen when two sale sections share shop.metafields.promo.active or leak unscoped countdown JS.

Namespace metafields by module purpose: shop.metafields.promo.flash_active for the hero, shop.metafields.promo.vip_early_access for the membership band. Scope all CSS and JS to section.id. Test the homepage with all promo sections active simultaneously—they must coexist without visual or behavior fights.

Stacked promo metafield namespaces
Section                         Metafield namespace
────────────────────           ──────────────────────────────
Flash sale hero                shop.metafields.promo.flash_active
                               shop.metafields.promo.flash_end_date

VIP early access band          shop.metafields.promo.vip_active
                               shop.metafields.promo.vip_message

Limited inventory grid         collection.metafields.promo.low_stock_active
                               collection.metafields.promo.badge_text

Countdown footer               shop.metafields.promo.footer_countdown_target

→ Each module owns a unique metafield slice—no shared on/off booleans.
→ Content operators edit the right namespace per campaign without collision.

Dedicated metafield namespaces per module prevent calendar conflicts when multiple promos run at once.

When to choose Impulse architecture vs simpler Dawn patterns

Metafield-gated promos add complexity. Use them when campaign frequency justifies the architecture—weekly flash sales, seasonal rotations, or multi-brand storefronts with different promo calendars. If the homepage campaign changes twice a year, flat section.settings on Dawn is simpler and cheaper to maintain.

Impulse's metafield model shines when non-technical operators must control visibility without developer access. If every promo launch requires engineering anyway (creative assets, new product setup), the metafield layer may be over-engineering.

Figure — Impulse metafield calendar vs Dawn flat settings
  • Choose Impulse (metafield gates) when: promo rotations happen weekly or more, content operators need instant on/off control, multiple promo modules stack on one page, A/B testing urgency copy is routine.
  • Choose Dawn (flat settings) when: campaigns launch infrequently, design and copy are one-off per season, engineering is available for each launch, metafield admin access is a governance concern.
  • Middle ground: start with Dawn flat settings; add metafield gates only to the modules that rotate frequently (e.g., announcement bar gets a metafield, hero stays flat).

Architecture should match operational velocity—don't build a calendar system for a store that runs two campaigns per year.

Example: metafield-gated flash sale hero

Flash heroes are Impulse staples: big urgency message, countdown, CTA to the sale collection. Gate the entire section with shop.metafields.promo.flash_active (boolean). Store countdown target and urgency copy in additional shop metafields. Section settings control design (color scheme, layout), metafields control calendar and copy.

Flash hero Liquid with metafield guards

{% assign flash_active = shop.metafields.promo.flash_active %}
{% assign flash_headline = shop.metafields.promo.flash_headline %}
{% assign flash_end = shop.metafields.promo.flash_end_date %}

{% if flash_active %}
  {%- style -%}
    #shopify-section-{{ section.id }} .flash-hero {
      padding-block: {{ section.settings.padding }}px;
    }
  {%- endstyle -%}

  <section
    id="FlashHero-{{ section.id }}"
    class="flash-hero color-{{ section.settings.color_scheme }}"
  >
    {% if flash_headline != blank %}
      <h2 class="flash-hero__headline">{{ flash_headline }}</h2>
    {% endif %}
    {% if flash_end != blank %}
      <div class="flash-hero__countdown" data-countdown-target="{{ flash_end | date: '%Y-%m-%dT%H:%M:%S%z' }}">
        <span>Ends in <strong data-timer>Loading...</strong></span>
      </div>
    {% endif %}
    <a class="button" href="{{ section.settings.cta_link }}">
      {{ section.settings.cta_label | default: "Shop sale" }}
    </a>
  </section>

  <script>
    (function() {
      const section = document.getElementById('FlashHero-{{ section.id }}');
      const countdownEl = section.querySelector('[data-countdown-target]');
      if (!countdownEl) return;
      const target = new Date(countdownEl.dataset.countdownTarget).getTime();
      const timerEl = countdownEl.querySelector('[data-timer]');

      function tick() {
        const diff = target - Date.now();
        if (diff <= 0) {
          timerEl.textContent = 'Ended';
          return;
        }
        const h = Math.floor(diff / 3600000);
        const m = Math.floor((diff % 3600000) / 60000);
        timerEl.textContent = h + 'h ' + m + 'm';
        requestAnimationFrame(tick);
      }
      tick();
    })();
  </script>
{% endif %}

Section renders only when shop.metafields.promo.flash_active is true. Countdown and headline read from metafields—marketing edits those values per campaign.

Schema for flash hero (design settings only)

{
  "name': 'Flash sale hero",
  "settings": [
    {
      "type': 'color_scheme",
      "id': 'color_scheme",
      "label': 'Color scheme",
      "default': 'scheme-1"
    },
    {
      "type': 'range",
      "id': 'padding",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit': 'px",
      "label': 'Section padding",
      "default": 40
    },
    {
      "type': 'text",
      "id': 'cta_label",
      "label': 'Button label",
      "default': 'Shop flash sale"
    },
    {
      "type': 'url",
      "id': 'cta_link",
      "label': 'Button link"
    },
    {
      "type': 'paragraph",
      "content': 'Visibility: shop.metafields.promo.flash_active (boolean). Headline: shop.metafields.promo.flash_headline (text). Countdown: shop.metafields.promo.flash_end_date (date_time). Edit in Settings → Custom data."
    }
  ],
  "presets": [{ "name": "Flash sale hero" }]
}

Schema documents the metafield contract. Operators know exactly which metafields to edit for the next campaign.

Example: product-level urgency badges from metafields

Urgency badges on product cards ('Low stock' / 'Final hours') are common on Impulse storefronts. Control badge visibility and text with product metafields instead of hardcoding logic. Merchandising can flag specific SKUs for urgency treatment without editing the section file or collection template.

Product card with metafield urgency badge

{% for product in collection.products limit: section.settings.products_to_show %}
  {% assign urgency_active = product.metafields.promo.urgency_active %}
  {% assign urgency_text = product.metafields.promo.urgency_text %}

  <div class="product-card">
    {% if urgency_active and urgency_text != blank %}
      <span class="product-card__badge product-card__badge--urgency">
        {{ urgency_text }}
      </span>
    {% endif %}
    <a href="{{ product.url }}">
      <img src="{{ product.featured_image | image_url: width: 400 }}" alt="{{ product.title | escape }}" loading="lazy">
      <h3 class="product-card__title">{{ product.title }}</h3>
      <p class="product-card__price">{{ product.price | money }}</p>
    </a>
  </div>
{% endfor %}

Badge renders only when product.metafields.promo.urgency_active is true. Merchandising edits urgency_text per SKU—no collection template changes required.

Practice on Impulse (or a high-conversion theme)

Do this in an Impulse copy or similar conversion-focused theme before automating. The goal is judgment—knowing when metafield gates justify complexity—not file generation speed.

  1. 01

    Define metafield namespaces

    In admin Settings → Custom data, create shop.metafields.promo.flash_active (boolean), shop.metafields.promo.flash_end_date (date_time), and shop.metafields.promo.flash_headline (single_line_text).

  2. 02

    Build the flash hero section

    Create sections/flash-hero.liquid that renders only when flash_active is true. Read flash_headline and flash_end_date from metafields. Add scoped CSS and countdown JS.

  3. 03

    Test the calendar

    Toggle flash_active in admin; confirm the hero appears and disappears on the homepage. Set flash_end_date to 5 minutes from now and watch the countdown expire.

  4. 04

    Add a second promo section

    Build a VIP early access band with its own metafield namespace (shop.metafields.promo.vip_active). Activate both on the homepage simultaneously—confirm no namespace or CSS collision.

  5. 05

    Document the metafield contract

    Write a one-page operator guide listing every metafield namespace, type, and purpose. Include one full campaign activation walkthrough.

Accelerate drafts after you understand metafield gates

Once you can explain when metafield architecture beats flat settings, and you have practiced building one gated section by hand, the converter can speed up HTML → Liquid drafts. You still owe metafield definitions, scoping discipline, and calendar documentation before handoff.

Supporting acceleration only—Impulse promo quality is judged by calendar ownership, not export speed.

Open converter workspace

Continue studying for conversion-focused storefronts

Next reading for teams shipping on promo-heavy Shopify themes—not a list of keyword landings.

Beginner

Fundamentals before metafield calendar systems.

Intermediate

Metafield craft and urgency patterns.

Advanced

Delivery judgment for high-velocity promo operations.

Editorial review

Reviewed by the HTML to Liquid Converter team

Dhruv Goyani, Shopify Developer at HTML to Liquid Converter

Dhruv Goyani

3 years web design + 3 years Shopify development experience

LinkedIn profile →
Nishad Kikani, Lead Shopify Developer at HTML to Liquid Converter

Nishad Kikani

2 years web design + 6 years Shopify development experience

LinkedIn profile →

Content is reviewed by the HTML to Liquid Converter Shopify development team before publication. Technical accuracy is validated against current Shopify Online Store 2.0 conventions and active client theme work.

Last updated:

Questions or corrections? Contact us.