🧰 Countdown timer

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.

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

December 3rd, 2024

• Updates to link hover states and animations

November 6th, 2024

• Minor bug fixes.

September 25th, 2024

• Countdown timer added to Theme Sections.