The Countdown timer section allows you to display a real-time countdown clock to create urgency for promotional events, flash sales, product launches, or special offers. You can combine the timer with heading text, subheadings, and action buttons to drive conversions and encourage shoppers to take immediate action.
Click on Countdown timer in the left sidebar to access the general section settings in the right sidebar.
Customize the color scheme, container width, and background options for the section:
Color scheme: Select a color scheme for the section. You can choose from available presets or customize one via Edit scheme.
Width: Choose between Page (contained layout width) or Full (full-width layout).
Background media: Select the background type for the section (None, Image, or Video).
Adjust the vertical spacing around the section to maintain visual balance across different screen sizes:
Top: Set the top padding for desktop view.
Bottom: Set the bottom padding for desktop view.
Mobile padding:
Top: Set the top padding for mobile view.
Bottom: Set the bottom padding for mobile view.
Click on the Countdown timer block to configure the target date, timer display, and post-expiration behavior.
Time zone: Select the preferred time zone in theme settings (Displays up to 999 days maximum).
Separator: Choose the separator style displayed between time units (None, Colon, or Pipe).
Size: Choose the font size for the countdown numbers (Small or Medium).
Target Date & Time: Set the exact end date and time for the countdown:
Year: Specify the target year (e.g., 2026).
Month: Specify the target month.
Day: Specify the target day of the month.
Hour: Set the target hour (24-hour format).
Minute: Set the target minute.
Action when the timer end: Choose what happens automatically when the countdown reaches zero:
Leave timer at zero: Keep the countdown visible showing all zeros (00:00:00:00).
Hide: Automatically hide the countdown timer block.
Hide timer and show a message: Hide the timer digits and display a custom expiration message instead.
Has zero: Toggle to enable or disable displaying leading zeros for single-digit numbers.
Timer end message: Enter the message to display when the countdown expires (used when Hide timer and show a message is selected).
Number colors: Select a custom color for the countdown numbers via the color picker.
Add text blocks to introduce your offer or sale event:
Subheading: Enter a short introductory tag line above the main title (e.g., Hurry Up!).
Heading: Enter the main callout headline for your promotion (e.g., TACTICAL FLASH EVENT GET 20% OFF).
Add call-to-action buttons below the timer to direct users to specific sales or landing pages:
Click Add block under Group button to insert a Button block.
Button label: Enter the text displayed on the button (e.g., SHOP THE DROP).
Link: Attach a destination URL or search link to the button.
Open link in new tab: Enable this option to launch the link in a new browser tab.
Size: Select the button size (Small, Medium, or Large).
Style: Choose the visual button style (Solid, Outline, or Link).
Show icon: Toggle to display an arrow or directional icon inside the button.
Uppercase: Toggle to force all button text into uppercase letters.