Design a countdown

Change colors, fonts, backgrounds, borders, and spacing so a countdown matches your store.

A template gives you a starting look. The Design tab is where you make it yours — or where you rebuild it entirely, since every part is editable.

Countdown timers and estimated delivery dates get a full Design tab. Stock and cart countdowns have fewer options, and keep them inside the Settings tab instead.

The Design tab, with the preview updating as you change settings.

The preview beside the settings updates as you work, so you don't have to save and check your storefront after every change. It shows the countdown's design, not your theme's layout — check the real page at the end.

Switching template

You're not stuck with the design you picked at the start. Open the templates picker from inside the builder and choose another — the seasons are tabbed across the top: Default, New year, Valentine, Summer Sale, Moon Festival, Halloween, Black Friday, Christmas, and Winter Sales.

Switching template replaces the design. Your text, timing, and conditions are kept.

Countdown timer design

The timer's Design tab has four sections plus custom CSS.

Design Main Section

The countdown's outer container — the panel everything else sits inside.

Group	Controls
Background	A solid colour or an uploaded image. With colour you get a Main background color with separate Left and Right values, so a flat fill is one colour on both and a gradient is two
Overlay image	Darkens an uploaded background so text stays readable over it
Text	The font for the whole countdown. Turn on Use custom font style to pick a font family and weight
Padding	Space inside the panel, set as Top / Right and Bottom / Left
Border	Border size, radius, style — Solid, Dotted, or Dashed — and colour
Shadow	Yes or No

Uploaded images must be PNG, JPEG, or JPG and under 1 MB. Large images slow your product pages down — crop and compress before uploading.

Element styling: Title and Subtitle

The Title and Subtitle each get their own font, font size, colour, and margins. This is where you make the title dominate and the subtitle recede, or bring them closer together.

Design Timer Section

The digits themselves.

Group	Controls
Font	Timer font size for the numbers and Label font size for the words underneath
Border	Size and style of the box around each unit
Color	Number color, Data text color for the labels, Background color for each unit's box, Dot color for the separators, and Border color
Padding	Space inside each unit's box

Setting a background and border on the units gives you the boxed look; leaving both clear gives you plain numbers on the panel.

Button

If you've turned the button on, it gets its own border (radius, size, style), colours (background, text, border), and padding.

Design Mobile Section

Separate font sizes for phones, described in the app as "Optimize countdown appearance and layout for mobile devices to ensure a smooth and responsive user experience."

You can set mobile-specific sizes for the Title, Subtitle, Timer number, and Timer label, plus mobile padding.

This section is worth a minute on every countdown. A title that reads well at 25px on desktop is usually too big on a phone, and four timer units at desktop size often wrap or overflow.

Estimated delivery date design

A delivery date's Design tab is split to match its two parts:

• Design Main Widget — the message: fonts, colours, size, borders, spacing.

• Design Process Widget — the Ordered → Dispatched → Delivered bar: icons, colours, and spacing.

If your layout is Message only or Progress bar only, only the relevant half matters.

Stock and cart countdown design

These two have their design controls inside the Settings tab.

Stock countdown offers Alignment, separate colours for the message, slider, stock figure, and background, and an Animation — None, Flash, or Pulse.

Cart countdown offers position, colours for the message, timer, and background, borders, and fonts.

Custom CSS

Every type ends with a Custom CSS (Developer Zone) box for anything the controls don't cover. See Custom CSS.

Practical advice

Borrow from your theme. A countdown in your brand colours looks like part of the store; one in template defaults looks bolted on. Your theme's accent colour is usually the right background.

Contrast matters more than colour. The numbers are the point — make sure they're readable against whatever is behind them, including at the small end of the size range.

Check it on a real page. The preview shows the countdown alone, on its own background. Your product page has a price, a button, and images competing with it.

Check it on a phone. Use the Design Mobile Section rather than accepting whatever the desktop sizes do on a small screen.

Next steps

• Custom CSS

• Translate countdown text

• Timer text and button

• Choose a template