Zest Theme
Zest Theme
Theme Sections

Countdown timer

3 min read
image

Create urgency and boost conversions with the Countdown Timer section. This section helps you highlight limited-time offers, flash sales, or new product drops with a live countdown and optional promotional text or background media.

Ideal for homepages, sale banners, or product launches.

How to add a Countdown timer section to your Shopify store

Steps

  1. In the theme editor (Customize) > click Add section.
  2. Select Countdown timer.
  3. Make necessary changes.
  4. Save the settings.

How to edit a Countdown timer section

image

Section settings

Blocks settings

You can add 5 types of blocks to the Countdown timer section:

  • Heading
  • Subheading
  • Text
  • Countdown timer
  • Button

Add a countdown timer and adjust the end time of the event.

The Countdown type offers two modes:

  • Evergreen: A repeating countdown that resets after a specified duration (e.g., every month).
    • This is useful for recurring sales, daily deals, or subscription cycles.

The Evergreen setting is only available in Zest version 9.0.0 and above. ✨

  • Fixed time: A one-time countdown that ends at a specific date and time.
    • Ideal for limited-time promotions, event registrations, or product launches.
image

The countdown timer can be displayed in different Styles: Minimal/ Highlight

image
image

The Number size and Number spacing can be adjusted to improve readability and aesthetics:

  • Small
  • Medium
  • Large

If you choose the Evergreen countdown, you must specify the Duration for when the timer should reset.

Duration determines how often the countdown restarts.

image

If you choose the Fixed time countdown, you need to specify when the countdown should end.

Enter the exact date and time in the Ends time field when the countdown should stop.

image

Date formats accepted:

NameFormatExample
24 hour formatYYYY/MM/DD HH:MM2023/10/04 23:30
12 hour formatYYYY/MM/DD HH:MM AA2023/10/04 11:30 PM

Add a heading to the section.

image
Style the heading in Theme settings > Typography

Add a subheading to the section.

image
Style the subheading in Theme settings > Typography

Add a description to the section.

image
Style the text in Theme settings > Typography

You can also display a call-to-action button to redirect customers to your desired pages.

image
Last updated