Change a timer's layout, colors and font

Applies to: TreStack Timer
Updated: 5 November 2026

Every timer is styled on its own, on the Design tab, with the live preview beside it. The preview uses the same rendering code as the storefront, so what you see is what shoppers get.

Set it up

1. Open the timer in TreStack Timer and go to the Design tab.
2. Under Template, pick a Layout: Standard, Balanced or Inline.
3. Start from one of the 20 color presets. A preset changes the colors and the background and keeps the rest of your settings.

4. Adjust any color by hand. Custom colors take transparency, and the background can be a gradient instead of a single color.
5. Choose the font: Use your theme fonts to follow your theme, or one of the bundled web fonts.
6. Set the labels for days, hours, minutes and seconds. They read Days, Hrs, Mins and Secs by default.
7. The days column hides itself while it reads zero. Turn that off if you want it to show 00 days.

8. Save, or choose Publish if the timer is not live yet.

Check it on your store

Open a page the timer shows on, on a real phone as well as a computer. A resized desktop window is not the same as a phone. If the timer runs off the side of a narrow screen, try the Inline layout or smaller digits.

Good to know

• Prefer the theme font or a web font. A system font shows only on devices that have it installed and falls back on the rest. The bundled web fonts load wherever the timer shows, and only the characters your timer text uses.
• Live timers change for everyone. A save on a published timer reaches the storefront after a short delay. On a fixed minutes timer, an edit also starts every visitor's countdown again.

Every design control and its default is in TreStack Timer, setup and settings.