.png){kind=logo}
Countdown timer
What is the countdown timer section?
The Countdown timer section features a calendar-style countdown that starts from a specific date and time set by the merchant.
This section is ideal for creating urgency and excitement for events, product launches, or limited-time offers, encouraging customers to act quickly before time runs out, potentially increasing sales.
How to add countdown timer section
.svg){kind=icon}
- Access the Theme Editor: Navigate to `
Online Store > Themes > Customize`. - Add a Section: Click on `
Add section`and select the desired section from the list of available sections. - Customize Your Section: Adjust the settings such as display type, alignment, and visibility according to your preferences.
If you need a more detailed, step-by-step guide on accessing the theme editor, adding sections and blocks, refer to our Setting up theme sections and blocks article.
General section settings
Within this section, you'll find common settings like containers, visibility options, and color settings that are consistent across all sections. For more detailed information on these shared settings, please refer to the Common settings between all sections article.
Unlike the other sections that contain a section header, this particular section does not include one. Instead, the content is presented as blocks that overlay the image or the background color within the section.
Section Settings
- Layout on Desktop: Choose between a Vertical or Horizontal timer layout for desktop screens.
- End Date: Set the timer’s expiration date in YYYY-MM-DD format. Defaults to midnight if left blank.
- End Time (Optional): Specify an expiration time in 24-hour format (e.g., 17:00). Uses the store’s timezone.
- End Text: Enter a message to display when the countdown ends.
- Hide Timer When Date Elapses: Enable this option to remove the countdown when the timer expires.
- Background Image: Upload a background image for the countdown section.
- Overlay Opacity: Adjust the background overlay opacity (10-100%) for better contrast.
- Enable Parallax: Enable a smooth scrolling effect on the background image.
- Content Background: Set a custom background color for the text area.
- Content Box Opacity: Adjust the opacity of the content box (10-100%).
