How to Add a Countdown Timer to Shopify Email

Shopify Email doesn't have a countdown timer section. It does have a Custom Liquid section that accepts plain HTML. And since an email countdown timer is just a live image URL, that's all you need. Design the timer in Countello, paste one snippet into a Custom Liquid section. Done. Here's the full process, including how to give each customer their own deadline.

What you need

• A Shopify store with the Shopify Email app and a campaign in progress.
• A desktop browser. Shopify's docs note that Custom Liquid sections can only be created on desktop.
• A Countello countdown (the free plan is enough).

Step 1: Create the countdown

In Countello, create a countdown and choose a mode. For a flash sale or BFCM send, use Fixed. One deadline for everyone. For a per-customer offer ("your discount expires in 48 hours") use Personalized. The deadline rides in the image URL and Shopify fills it in per customer. Style the timer to match your brand and set what shows at zero: zeros, a message, or your own image.

Step 2: Copy the snippet

In the countdown's Embed panel, choose Generic HTML and copy the snippet. A table-wrapped <img> tag pointing at the live image:

<img src="https://img.bestcountdownapp.com/t/your-timer.gif" alt="Countdown timer" width="600">

Keep the outer table: it's the most portable wrapper across email clients, and it keeps the timer centered.

Step 3: Add a Custom Liquid section

1. Open your campaign in the Shopify Email editor.
2. Add a Custom Liquid section where the timer should appear. Above the call-to-action is a strong spot.
3. Paste the snippet into the section's code editor.
4. Save and send yourself a test email.

Step 4: Optional: a personal deadline per customer

Shopify Email's custom code editor supports customer Liquid variables such as customer.email and customer.first_name. For a Personalized countdown, the image URL carries an ?end= parameter. To use it you need a deadline stored where Liquid can reach it. For example a customer metafield or a value your own app writes. A practical pattern: generate the deadline per customer in a flow (e.g. "48 hours after this email") and store it where your template can read it, then build the URL with Liquid:

<img src="https://img.bestcountdownapp.com/t/your-timer.gif?end={{ customer.metafields.custom.countdown_deadline }}">

Store the value as ISO 8601 UTC (2030-01-31T12:00:00Z) or Unix seconds. If you enable signed URLs in Countello, a per-recipient &sig= must be precomputed by your own backend (Shopify's editor can't compute HMAC signatures) and read from another variable or metafield. Metafield availability inside Custom Liquid has expanded over Shopify's changelogs; verify the variable resolves in a test send before relying on it.

Placement and sizing

One timer per email. Put the Custom Liquid section directly above your main button or product section. Deadline and call-to-action should be read in the same glance. Keep the image at 600px or narrower so it fits Shopify Email's content column on phones without scaling artifacts.

Campaigns vs automations

A Fixed countdown suits a one-off campaign. A flash sale, BFCM, a drop. If you use Shopify Email inside an automation where sends go out continuously (post-purchase follow-ups, win-backs), a Fixed date expires for later recipients; switch to Evergreen (duration from send time) or Personalized (deadline from a customer variable) instead.

Before you hit send

1. Send yourself a test through Shopify Email. The editor preview won't render the Liquid or fetch the live image correctly.
2. Open on phone and desktop; the timer should sit centered inside your email column.
3. If the URL uses a customer variable, verify the received timer shows a real countdown, not the expired state, that means the variable resolved.
4. Click the timer to confirm it links to your sale page.
5. Check the first frame reads correctly, that's what Outlook desktop displays.

A note on deadlines and honesty

A countdown only works if readers trust it. Keep the deadline real (an offer that quietly extends makes the next countdown inert) and design the expired state (zeros, a message, or a swapped image) so late openers see a finished email. The trust is the asset; the timer just displays it.

If something doesn't work

• The timer shows a stale time on re-open. Email clients and proxies cache images. The GIF is correct at fetch time; a cached copy may drift. Put the deadline in plain text near the timer.
• The GIF plays once and stops. That's the design. Up to 60 frames, then it holds. A looping countdown would lie on re-open.
• Outlook desktop shows a static image. Outlook desktop renders the first GIF frame only; Countello's first frame already shows the correct remaining time.
• A personalized timer shows the expired state. The variable in ?end= isn't resolving. Check it in a test send, confirm the format is ISO 8601 UTC or Unix seconds, and remember '+' offsets need %2B encoding.

Related reading

Planning a sale email? See flash sale countdowns and Black Friday countdowns. New to countdowns? Create a free timer and test the whole flow in one sitting.