How to Add a Countdown Timer to Shopify

No upgrade to buy, and the four plans that sit outside that

Shopify documents the theme code editor, the theme editor and the Custom Liquid section without naming a plan requirement, and the Basic plan page says Basic includes an online store you customize "through Shopify's built-in theme editor". So on Basic and up there is nothing to buy. Four of the nine current plans fall outside that reading, for two different reasons.

Two of them have no storefront at all. The Lite plan page states that "The Lite plan doesn't include the online store sales channel", and the Agentic plan page lists "Online Store" first among the features that "aren't available with the Agentic plan". No theme, no product page, nowhere for a timer to render. The other two have a storefront but almost no control over it: Starter says "Other themes and customization options aren't available on the Starter plan", and Retail says "You can't use any other theme with the Retail plan" and "Further customization options aren't available on the Retail plan". Both restrict you to the Spotlight theme, neither page says whether the code editor is reachable, and both are closed to new stores, so treat Starter and Retail as unconfirmed rather than as a flat no.

Decide where the deadline goes before you paste anything

A countdown is not one feature, it is a placement decision. Under the buy button it answers a question the shopper is already asking. In a bar across the top of the store it reaches people browsing a collection who have not picked an item yet. On the cart page it speaks to someone who has chosen and is hesitating. Pick one: three clocks on one journey stop reading as information and start reading as pressure.

The cart row surprises people. Shopify requires marketplace themes to support sections on every template except customer accounts, gift card and checkout, so the cart page takes a Custom Liquid section just like a product page. Checkout is the real wall, and no theme level code reaches it.

The clock itself, running on this page

Add it from the theme editor, without opening a code file

1. Put both of your Shopify addresses on the same site id

   A Shopify store has two web addresses, and a widget cannot tell that they are the same shop. One is the custom domain you set as primary, the one Shopify displays "to customers as they browse your online store" while redirecting the others to it. The other is the .myshopify.com address the store was created with, which Shopify will rename for you exactly once and never again. Add both in the BootSignal dashboard, because the widget resolves location.hostname against the addresses registered under one site id, and a page served from the one you skipped renders nothing at all. If you ever spend that single rename, register the new address before you switch.

2. Open the theme editor and switch to the product template

   In the Shopify admin go to Online Store, find the theme, and click Edit theme. Use the template dropdown in the center of the top menu bar to switch to the product template, so you are editing what shoppers see on a product rather than on the front page.

3. Add a Custom Liquid section and paste both lines

   In the left sidebar click the Sections icon, then Add section (or Add block inside an existing section) and choose Custom Liquid. Drag it to where the clock belongs, usually just under the price or the add to cart button. Paste the loader and the mount element into the code field, swapping YOUR_SITE_ID for the id the dashboard shows beside your domains, then Save. data-lang decides the language of the unit labels under the digits.

   <script src="https://bootsignal.com/bootsignal.js"
           data-site-id="YOUR_SITE_ID" data-lang="en" defer></script>
   
   <div data-bootsignal="countdown"
        data-target="2026-12-31T23:59:59"
        data-expired="This sale has ended."></div>

   Copy

4. Put your real deadline in data-target

   Replace the placeholder timestamp with the moment your discount actually stops, keeping the same shape. Then write data-expired as the sentence the page should show once the clock runs out.

   <div data-bootsignal="countdown"
        data-target="2026-09-01T23:59:59"
        data-expired="Sale pricing has ended. Free shipping is still on."></div>

   Copy

5. Save, then look at a real product URL

   The theme editor draws its own overlays on top of section content, so it is a layout check, not a behavior check. Save, open a live product page in an ordinary tab, and watch the numbers move. If nothing renders, check the hostname against your registered domains first.

• The Custom Liquid setting caps its content at 50kb, which no widget snippet approaches.
• Invalid Liquid throws an error on save, and unclosed HTML tags are closed automatically, which can rearrange a half copied snippet. Paste the closing </div> and </script> with everything else.
• The setting cannot use {% javascript %} or {% stylesheet %} tags, which leaves ordinary HTML and a <script src> as the shape that survives the save here. That is exactly what the loader is.
• Keep defer on the script tag. Shopify's Theme Check flags parser blocking scripts as a storefront slowdown.

A deadline, not a dark pattern

Urgency earns its place when it is true. Your sale ends Sunday at midnight, the clock says so, and a shopper who comes back Monday sees the price they expected. The other kind of timer reads five hours no matter when you arrive, resets on a fresh browser, and has no relationship to any event in your store. Shoppers who notice do not just skip the offer, they stop believing the rest of the page.

BootSignal only does the first kind. data-target is a fixed timestamp, so everyone counts toward the same moment and the clock reaches zero for everyone at once. There is no per visitor mode and no restart. If you extend a sale, you edit the timestamp and save, which is a decision you made rather than a loop the widget runs on its own.

The same rule runs through the catalog. The social proof toast replays only activity your site already recorded, and it has no way to invent a purchase in Ohio that never happened. On a store, that is the difference between social proof and a prop.

If your theme has no Custom Liquid section

Custom Liquid is a Shopify Theme Store requirement, not a platform guarantee. A custom built theme, an off marketplace theme or an old vintage theme can leave it out, and the code editor is what is left when that happens. From the Shopify admin open Online Store, find the theme, click the horizontal menu ("...") icon and choose Edit code. Duplicate the theme first so you have something to fall back to.

Split the two pieces here. The loader goes in the Layout folder, in theme.liquid, before the closing </body> tag, because it should load once on every page. The mount element does not: theme.liquid is the global layout, so a countdown pasted there turns up on your policy pages and your search results.

That means finding the section file, not the template. On an Online Store 2.0 or Horizon era theme the product template is templates/product.json, and Shopify states that "If you're using a JSON template, then any HTML or Liquid code needs to be included in a section". Markup pasted into the JSON breaks the file and the save fails. Open the Sections folder and edit the section that renders the product page. Shopify documents the same rule for blog posts, where Dawn's file is sections/main-article.liquid.

<div data-bootsignal="countdown"
     data-target="2026-09-01T23:59:59"
     data-expired="Sale pricing has ended."></div>

The one mount that does belong in theme.liquid

Store wide messaging is the exception. If every shopper on every page should learn the sale ends Sunday, the global layout is the right home and the announcement bar is built for it. Paste it next to the loader in theme.liquid, before the closing </body> tag, and give each new announcement its own data-id.

<div data-bootsignal="announce"
     data-message="Summer sale ends Sunday at midnight"
     data-link="/collections/sale"
     data-link-text="Shop the sale"
     data-id="summer-2026"></div>

Keep the bar and the timer in agreement. A bar that says Sunday above a clock that says Saturday is worse than having neither.

What this costs to run

A sale is the week your traffic spikes, which on a metered widget is also the week the invoice does. The meter here is the domain instead: $20 per month or $200 per year per registered domain, every widget included, nothing counted by traffic or pageviews. So the clock on the product page and the bar above it cost the same on a quiet Tuesday as they do on your biggest day of the year. The catalog behind that price is 31 paid widgets plus 31 free browser tools, and widgets released later are included too. A second store is a second domain, priced from the dashboard. Full pricing has the details, and the alternatives section holds the priced comparisons.

Write the sentence that shows when the clock hits zero

Most merchants set data-target carefully and then type something forgettable into data-expired. That is backwards. The expired message runs the longest, sitting on the product page from the moment the sale ends until you notice, which on a busy store can be days.

Give it a job. "The sale has ended" tells a shopper they are late and nothing else. "Sale pricing has ended, free shipping is still on" gives them a reason to stay on the page they already opened.

If the timer does not show up

1. Check the hostname in the address bar against your registered domains. A store answering on both a custom domain and .myshopify.com needs both registered.
2. Confirm the loader is on the page exactly once. Pasting it into a Custom Liquid section and into theme.liquid puts two copies on the same product page.
3. Look at what the Custom Liquid field saved, not what you pasted. Unclosed tags are closed for you on save, so a snippet that lost its closing </div> comes back rearranged.
4. Make sure the mount is on the template you are looking at. A section added to the home page template does not appear on a product, and this one costs people the most time.
5. Ask whether the theme was updated since you pasted. Shopify warns that if your code changes are incompatible with a theme update, all your code changes are removed in the updated copy, and it does not spell out how a Custom Liquid section fares, so check a product page after every update.

Nothing you configured lives in the theme except the paste itself. Re-adding the section and retyping the timestamp puts the same clock back, which makes a theme update an annoyance rather than a loss.