Countdown timers create urgency and can lift conversion on your sale pages. GetSale's timer builder gives you five layout templates, eight ready-made color themes, and a "Generate with AI" option that writes copy and picks a color scheme for you in seconds. This guide walks through building a timer from scratch, using AI generation, applying a theme, and fine-tuning every detail before you connect it to a discount.
Looking for how to add a timer to your storefront or connect it to a discount's end date? See the sections on placement and discount assignment below — those are the two steps that make a timer actually appear on your store.
Creating a timer and choosing a template
From the GetSale app, go to Timers.
Click Create timer (or Create Timer at the top of the empty state if this is your first one).
Give the timer a Name. This is for your own reference only — customers never see it.
Choose a Template:
Countdown — a title, subtitle, and a full days/hours/minutes/seconds countdown.
Countdown (Compact) — a single line of text with the countdown embedded inline. Your title must contain the exact placeholder
{timer}(e.g. "Sale ends in {timer}") — that's where the countdown renders.End date — shows a fixed date/time instead of a live countdown (e.g. "Sale ends on January 1st 12:00pm"). No days/hours/minutes/seconds digits are shown.
Progress bar — a title, subtitle, and countdown above a visual progress bar that fills as the deadline approaches.
Flip clock — a title, subtitle, and countdown rendered as animated flip cards for each digit.
Switching templates updates the live preview immediately and reveals the settings relevant to that layout — for example, "Timer label" fields (days/hours/mins/secs) only appear for templates with a live countdown, and "Month Translations" only appears for the End date template.
Using Generate with AI
If you'd rather not write timer copy and pick colors by hand, use the AI generator.
On the timer builder page, click Generate with AI in the top-right corner. (This option is available on plans that include custom timers.)
Choose a Tone: Urgent, Friendly, Playful, Luxury, or Minimal.
Choose an Occasion: Black Friday / Cyber Monday, Holiday Sale, Flash Sale, Clearance / End of Season, or New Product Launch.
Click Generate. The AI writes a title, subtitle, and timer labels, and picks a coordinated color palette and font sizes for the template you currently have selected. A live preview appears on the right as soon as generation finishes.
Not happy with the result? Click Regenerate to get a fresh version with the same tone and occasion. There's a short cooldown (a few seconds) between generations, and a small "x of y generations used today" counter shows your remaining quota for the day — quotas reset at midnight UTC.
Rate the result with the thumbs up/down icons under the preview. Thumbs down opens an optional reason (Inaccurate, Wrong tone, Too long, Too short, Other) and a comment box — this feedback helps improve future generations.
When you're happy with the preview, click Accept. This copies the generated title, subtitle, timer labels, and colors/font sizes into the builder — nothing is saved to your timer until you click Save on the main page. You can still edit any of these fields by hand afterward.
If you change your mind, click Cancel to close the modal without applying anything.
The AI always generates a design that matches the template you're currently editing, so pick your template first, then generate.
Applying a theme preset or resetting to default
If you want a polished look without using AI or fully custom colors, use a Theme Template:
In the Timer type card, open the Theme Templates dropdown (next to the Template selector).
Choose from the eight built-in presets: Frostbyte, Midnight Signal, Clean Canvas, Olive Grove, Sunset Rush, Pumpkin Pop, Luxury Gold, or Pastel Pulse. Each preset sets the title, subtitle, background/text/countdown colors, border radius, and (where relevant) progress bar and flip clock colors.
To discard any theme or custom styling and return to GetSale's original defaults, click Default Theme.
Theme presets are a starting point — you can still edit any individual color, font size, or text field afterward.
Customizing text, labels, month translations, colors, and font sizes per template
Timer text
Set a Title (required) and, for every template except Countdown (Compact), a Subtitle. Both support an emoji picker via the smiley icon in the field.
Titles are capped at 100 characters, but text longer than about 30 characters (50 for Countdown Compact) may not display well on your storefront — you'll see a warning suggesting you test thoroughly if you go over.
Use Reset title to restore the default title text for the current template.
Timer label (Countdown, Countdown Compact, Progress bar, and Flip clock only)
Customize the text shown for Days, Hours, Minutes, and Seconds (e.g. "days" → "d"). Each label can be up to 10 characters and can't be left empty.
Month Translations (End date template only)
Since the End date template displays a written date rather than a countdown, you can translate each month name (January–December) into your store's language.
Timer colors and font sizes
Set a Background color for the whole timer.
Set color and font size for Title, Subtitle (Countdown, Progress bar, and Flip clock templates), Labels, and either Countdown or Date (End date template shows Date instead of Countdown/Labels).
Progress bar template adds Fill and Track colors plus a Height in pixels for the bar itself.
Flip clock template adds a Digit size, plus Card background, Card text, and Card border colors for the flip cards.
Placement, padding, and the advanced JS-selector option
In the Placement settings card:
Set a Border radius (0–99px) for the timer's corners.
Set Padding independently for Top, Right, Bottom, and Left.
Click Advanced settings to reveal two additional options:
JS Selector — the CSS selector GetSale uses to find where to insert the timer on your storefront page. It defaults to
form[action*="/cart/add"] button[type="submit"](i.e., right next to your Add to Cart button). Only change this if you need the timer to appear next to a different element — click Reset to restore the default.Placement — choose whether the timer renders Above or Below the element matched by the JS selector.
Border radius and padding controls (and the theme template picker) are available on plans that include custom timers; on other plans you can still create and style a basic timer with the default look.
Assigning the timer to a discount (requires an end date)
Creating and saving a timer doesn't make it appear on your store by itself — it has to be attached to a discount:
Open the discount you want the timer to appear on.
In the discount's timer settings, check Use Timer.
Select the timer you just built from the dropdown.
Save the discount.
Important: the timer will not display unless the discount has an end date set. If your discount is set to run indefinitely, add an end date before saving — that end date is what the timer counts down to (or displays, for the End date template).
Troubleshooting and FAQ
My timer isn't showing on my storefront. Confirm the discount it's attached to has an end date, that the discount is active, and that your theme still has the corresponding element the JS Selector targets (if you're using a custom add-to-cart button, you may need to adjust the selector).
The countdown digits aren't appearing in my Compact template title. Make sure your title text contains the literal placeholder
{timer}exactly once — it's required for that template and won't render without it.Generate with AI is greyed out or missing. AI generation and theme templates are available on plans that include custom timers. Simple timers (fixed design) are available more broadly.
I hit my daily AI generation limit. The generator has a daily quota per store that resets at midnight UTC. You can still edit the last generated result by hand, or use a Theme Template in the meantime.
Can I use the same timer on multiple discounts? Yes — select the same timer from the dropdown on any discount that needs it. Its end-date-driven countdown will match whichever discount it's attached to.