Countdown bar
Last updated
Was this helpful?
Last updated
Was this helpful?
Use the Countdown bar section to display a live countdown for an upcoming event or sale. A countdown timer can create a sense of urgency or anticipation for your customers.
Check out the Countdown banner section for a larger alternate layout.
Editing templates will change all pages that use the same template. Create new templates for different page layouts, or show dynamic page content in the same template.
In the editor side panel, click (+) Add section and select Countdown bar. Click and hold the drag handles ⋮⋮
to re-order sections.
Sections include general styles. Click the section to find options for colors, spacing, and animations.
Section colors
Section spacing
Section animations
Select the date and time for the end of the countdown. Choose to hide the timer when the countdown or add a message when the countdown is complete.
Click Countdown bar to find settings
Year
Enter the year of the end-date.
Month
Select the month of the end-date.
Day
Select the day of the end-date.
Hour
Select the hour of the end-time.
Minute
Select the minutes of the end-time.
Time zone
Choose to display the timer according to your Shop time zone or the User’s local time zone.
Hide timer on complete
Choose hide the countdown timer when it has completed.
Timer complete message
Add text to display a message when the timer has completed.
Choose to display a background image that spans the entire bar instead of a background color.
Click Countdown bar to find settings
Image
Select or upload an image to display as the background of the banner.
There are no required image dimensions. We recommend a minimum width of 2500px.
Mobile image
Select or upload a mobile-specific image to display as the background of the banner.
Image focal point
For desktop and mobile, select the most important part of your image to keep centered. Use focal points to avoid unwanted cropping across different screen sizes.
Change the Heading and Text. Add a button with a custom style.
Click Countdown bar to find settings
Heading
Add text to show a main heading.
Text
Add text to display below the main heading.
Button link
Select or paste a URL for a button. You can add up to three buttons below the section heading.
Button label
Enter text to display as the button label.
Button style
Choose a style for the button. Select Solid, Outline, or Text.
Choose whether to enable Full width
Adjust the height for desktop and mobile
Click Countdown bar to find settings
Enable full width
Display the banner at the full width of the screen or window.
Height
Change the height of the banner section for desktop screens: between 60 and 300 pixels.
Mobile height
Change the height of the banner section for mobile screens: between 60 and 300 pixels.
Related links