Shopify Countdown Timer

Method 1 — Custom Liquid (Online Store 2.0 themes, recommended)

If you're on Dawn, Sense, Refresh, Craft, Crave, Studio, Origin, Colorblock, or any 2021+ Shopify theme, this is the fastest path — no theme code edits needed.

1. In Shopify admin, go to Online Store → Themes and click Customize on your live theme.
2. From the template dropdown (top center), choose Products → Default product (or whichever template).
3. On the left sidebar, click Add section and select Custom Liquid.
4. Drag the Custom Liquid section to the position you want (above "Add to cart" is the highest-converting spot for sale urgency).
5. Paste the iframe markup from above into the section's Custom Liquid content field.
6. Click Save. The countdown now appears on every product page using that template.

Method 2 — Direct template injection (legacy themes)

For pre-OS-2.0 themes (Debut, Brooklyn, Narrative, Boundless, and older custom themes):

1. In Shopify admin, go to Online Store → Themes → Actions → Edit code.
2. In the file tree, open sections/product-template.liquid (or templates/product.liquid on the oldest themes).
3. Find the area where the "Add to cart" button lives. Just above it, paste the iframe markup wrapped in a <div>:

<div class="gotimer-sale-countdown">
  <iframe src="https://gotimer.org/e/countdown?duration=3600&label=Sale+ends&theme=dark&accent=%23ff3b3b"
    width="100%" height="320" frameborder="0" loading="lazy"
    style="border-radius:12px;border:0;max-width:480px;"></iframe>
</div>

4. Click Save. Refresh a product page in another tab to confirm.

Method 3 — Homepage banner (any theme)

1. In Theme Editor, switch the template dropdown to Home page.
2. Click Add section and pick Custom Liquid.
3. Drag it to the top of the page (above the hero slider).
4. Paste the iframe. For a sticky top banner, wrap it with:

<div style="position:sticky;top:0;z-index:50;background:#111;padding:8px;text-align:center;">
  <iframe src="https://gotimer.org/e/countdown?duration=3600&theme=dark&accent=%23ff3b3b&controls=none"
    width="100%" height="60" frameborder="0" loading="lazy" style="border:0;max-width:600px;"></iframe>
</div>

Per-product countdowns via metafield

If every product has its own launch or sale-end date, drive the countdown from a metafield instead of hard-coding the duration.

1. In Shopify admin: Settings → Custom data → Products.
2. Add a metafield with namespace custom, key launch_date, type Date and time.
3. On each product page, set the launch date in the metafield UI.
4. In your product template (Custom Liquid section or theme code), compute seconds remaining and inject into the iframe URL:

{%- assign launch = product.metafields.custom.launch_date -%}
{%- if launch -%}
  {%- assign secs = launch | date: "%s" | minus: "now" | date: "%s" -%}
  {%- if secs > 0 -%}
    <iframe src="https://gotimer.org/e/countdown?duration={{ secs }}&label=Launch+in&theme=dark&accent=%23ff3b3b"
      width="100%" height="320" frameborder="0" loading="lazy"></iframe>
  {%- endif -%}
{%- endif -%}

Conversion best-practices for sale countdowns

• Place it above the buy button, not below — the urgency signal must come before the decision moment.
• Use red accent (accent=%23ff3b3b) and dark theme for highest contrast on mobile-checkout flows.
• Hide the controls (controls=none) so shoppers can't pause or restart the timer.
• Pair with a discount code in the label — the label can repeat the code (label=Code+FLASH+at+checkout).
• Don't fake the countdown— if the "sale ends in 1 hour" resets on every visit, savvy shoppers notice and trust drops. Use a real deadline if possible.

Testing checklist before going live

• Preview on desktop, tablet, and mobile (Shopify Theme Editor has all three).
• Visit the product page in an incognito window to confirm the embed renders.
• Check that the iframe doesn't interfere with the Add-to-cart click area on mobile.
• If you use Shopify's Online Store speed test, run it before and after — the lazy-load attribute should keep the score unchanged.

Looking for a Pomodoro-style timer for a productivity-focused product (like a study planner)? Try the embed hub configurator with timer type set to Pomodoro / Interval.