Skip to main content

Countdown Timer Widget

Show a live, ticking countdown on the product page for campaigns with a scheduled end date, most commonly Flat Product Discount flash sales.

The Countdown timer widget shows a live, ticking countdown on the product page for campaigns with a scheduled end date and the Countdown timer option turned on, most commonly Flat Product Discount flash sales.

WHERE TO FIND IT

Go to Widgets in your Discount Prime admin, then open the Countdown timer card.

WHAT YOU CAN CONFIGURE

Display

- Display widget on store: master on/off switch

Content

- Footer text: a line of text shown below the countdown digits

- Days label: label under the days digit, e.g. "Days"

- Hours label: label under the hours digit

- Minutes label: label under the minutes digit

- Seconds label: label under the seconds digit

- Show product name (checkbox): adds the product's title into the countdown header

- Text before product name: only shown if "Show product name" is on

- Text after product name (or Header text, if product name is off): the main heading line

Style

- Text color: color of labels and header text

- Numbers color: color of the countdown digits

- Numbers background color: background behind each digit

- Progress bar color: fill color of the countdown's progress bar

- Progress bar border color: border color of the progress bar

A live preview shows a running countdown using sample start/end times, exactly matching the storefront's look.

MULTI-LANGUAGE SUPPORT

If your store publishes more than one language in Shopify (Settings -> Languages), a Language dropdown appears above the Content fields, covering the footer text, all four time-unit labels, and the before/after product name text.

- Hidden when your store only publishes one language.

- Untranslated fields fall back to your default language's text on the storefront.

- A dot next to a language name flags untranslated content for that language.

STEP-BY-STEP: CONFIGURE THE WIDGET

1. Go to Widgets -> Countdown timer.

2. Toggle "Display widget on store" ON.

3. Fill in the footer text and the four time-unit labels (and translations, if applicable).

4. Optionally enable Show product name and set the before/after text.

5. Adjust the digit and progress bar colors under Style.

6. Check the live preview, then click Save.

STEP-BY-STEP: VERIFY IT WORKS

1. Create or open a Flat Product Discount campaign, set an end date, and enable Countdown timer in its schedule section.

2. In an Incognito tab, open that product's page and confirm the countdown is ticking with your custom labels and colors.

3. Wait for (or simulate) the campaign's end date passing, and confirm the countdown and discount both end together.

TIPS & COMMON MISTAKES

- The countdown only shows when the campaign actually has an end date and Countdown timer enabled, turning on this widget alone doesn't create a countdown; it styles the one your campaign schedule produces.

- Requires the app embed to be active, same as every other Discount Prime widget.

- Content and style edits need countdown-settings access, locked without the relevant plan permission.

MINI FAQ

Does enabling this widget start a countdown automatically?

No, you also need an active campaign with an end date and Countdown timer turned on in its schedule section. This page only styles the countdown, it doesn't create one.

Can I use a circular countdown style instead of digits?

Not currently, only the standard digit style is available in the editor today.

What happens to the countdown when the campaign ends?

It disappears from the storefront along with the discount once the campaign's end date passes.

Did this answer your question?