Countdown sale promotion (countdown timer)

A countdown sale is a percent off a collection or some products that ends soon, with a timer under the price on the product page.

At a glance

Before you start

• Pick the collection (or the products) that go on sale, and the date the sale ends. Storefront widgets can’t show a discount aimed at a product tag.
• Turn on the app embed if you want shared look settings or your own wording. See Install and turn on the app embed. For what works without it, see the app embed table.

Set it up in the app

1. Open Promotions, click Create promotion, then click Choose on the Countdown sale card.

   It is under Promotions with storefront widgets.

   

2. Pick the collection and set the discount in the Discount section.

   The page starts at 20% off a collection you pick. You can switch Applies to to specific products. A banner says “Pick the collection for this promotion. Storefront widgets can’t show a product tag.”

   Until you pick, Make it live won’t save. It says “Pick a collection under Discount first.”

   

3. Check the Storefront widgets section.

   Show storefront widgets is on by default. Leave it on.

   

4. Set the end date in Schedule and status, then click Make it live.

   The page starts with an end date 3 days after the start, at midnight in your store’s time zone. Change it to your sale’s end. The countdown counts down to this date.

   Or click Save as draft to finish later.

   

Add it to your theme

Note What’s next appears after you click Make it live, not after Save as draft. It goes away when you dismiss it or leave the page. No What’s next panel? Open Promotions. In the row’s Storefront widgets column, click Add block. It shows when the block isn’t in your theme yet.

1. Under What’s next, click Open theme editor.

   Add the widget to your theme names the AndOr Countdown block. The link opens your theme editor with the block added.

2. Drag the block under the price, then click Save.

   The block works on the product template only.

   

   The dashed price in the editor preview is a sample. It shows until a discount applies to the product you preview.

3. Change Countdown wording, if you like.

   It goes in front of the time left, for example “Sale ends in 3h 12m”. Left empty, it says “Sale ends in” in the shopper’s language.

All block settings are on the Countdown widget page.

Check it on your store

1. Under What’s next, click View on store.

   It opens the collection from this discount in a new tab. Open a product from it. You see the time left under the price. It gets more exact as the end gets closer. In the last two minutes it says “Sale ends soon”.

2. Under Try it at checkout, click Open store, add the product to the cart, then check out.

   The discount comes off at checkout.

Not showing?

• The block is not on the product template, or you didn’t click Save in the theme editor.
• The discount has no end date. A sale that runs until you switch it off has nothing to count down to.
• The discount is not running yet, or it has ended.
• The product is not in the collection you picked.
• JavaScript is off in the shopper’s browser.

See What it needs to appear and Widgets not showing.

Turn the widget on or off

In Promotions, use the row’s Storefront widgets switch. The discount keeps working at checkout.

Settings and limits

Limits:

• Set fixed price can’t show: “its discount value cannot be shown as a sale price or a badge.”
• With Limit the discount to a maximum amount on, widgets can’t show it. The saving would look bigger than it is.
• For widgets, Applies to must be all products, specific products, specific collections or specific variants. Tags, product types, SKUs and the “Exclude” options can’t show.
• The countdown needs an end date.
• AndOr Countdown works on the product template only.