Add urgency and drive conversions with the Countdown timer section. Set your time, style your timer, and connect it to a product page, collection page, cart page—any template that suits your storefront.
Install the section
- Open Theme Updater & Backups in your Apps admin
- Open Theme sections
- Click Install below the section. You can also click Preview to see the section in a demo storefront
- On the right side of the page, use the Choose theme dropdown to select the theme you want to enhance with the new section
- Click Install
Add the section to a template
Click Customize to open the theme editor for the selected theme.
Open the template (e.g. home page, default product) and click (+) Add section in the sidebar.
Scroll down to the bottom of your default sections list and select 🧰 Countdown timer.
Customize section settings
Open Countdown timer to open general settings for the section.
Section height
Select Small, Medium, or Large to crop the image to the desired Section height. To match the original image's dimensions, select Adapt to image.
Image
Click Select image to choose an image for the section.
Colors
Select your Text color and Image overlay color, then adjust the Image overlay opacity.
Margins
Use the Top margin and Bottom margin sliders to increase or decrease the margins of the section.
Customize blocks
There is a block for the Content and another for the Timer. Drag these blocks to reposition the blocks on the left or right side of the section.
Customize the content block
Click the preloaded Content block (Countdown timer) to customize its content.
Heading and text
Use the provided fields to add a Heading and Text.
Font sizes
Use the sliders for Heading size, Mobile heading size, Text size, and Mobile text size to control the font sizes for the section's text components.
Alignment
Align content to the Left, Center, or Right with the Content alignment and Mobile content alignment.
Button
Connect the section with another page by adding a Button label and Button link. Select Fill or Outline for the Button style, then select its Background color and Text color.
Customize the timer block
Click the preloaded Timer block to customize its content.
Set timer
Add the Year, Month, Day, Hour, and Minute the timer will count down to.
The section will remain visible when the timer concludes. Enable Hide timer on complete to conceal the timer once it has reached the set date and time.
Add a Timer complete message to display a message when the timer has ended.
Timer style
Select either Fill or Outline for the Timer style.
Select a Text color and Background color for the timer, then adjust the opacity.
Changelog
November 6th, 2024
- Minor bug fixes.
September 25th, 2024
- Countdown timer added to Theme Sections.