Countdown timer

The Countdown Timer section is ideal for highlighting upcoming events such as product launches or sales campaigns, with or without an accompanying image. This versatile section helps you create a compelling countdown banner to showcase time-sensitive offers or releases, engaging visitors with the urgency of a ticking clock.

 

Edit Section Settings:

General:

Color Scheme: Tailor the color theme to fit your branding.
Overlay Opacity: Adjust the overlay's transparency to balance visibility between the timer and the background image.

Desktop and Mobile Layouts:

Full Width Option: Choose to span the countdown section across the full screen.
Section Height: Options include 'Full screen' and 'Natural' (dynamic) or a specific pixel height (static), with a range from 200px to 1200px for desktop and 200px to 800px for mobile.
Text Alignment: Align text to the left, center, right, or justify.
Content Position: Select the location of the countdown timer and accompanying text on the page.
Margins: Fine-tune the space above and below the section.

Customize Blocks:

Subheading Block:

Subheading: Enter text to serve as a prelude or context to the main content.
HTML Tag Selector: Choose the appropriate HTML tag (e.g., <h2>, <h3>) for semantic structure and SEO.
Size Modifier: Adjust the text size to fit your design, available for both desktop and mobile.
Margin Top: Set the space above the subheading to ensure visual separation and balance.

 

Heading Block:

Heading: Input the main title or focal point of the section.
HTML Tag Selector: Select the desired HTML tag to emphasize the hierarchical importance (e.g., <h1>, <h2>).
Size Modifier: Customize the heading size for visual impact, with settings for desktop and mobile.
Margin Top: Control the top margin to align with the overall layout and spacing.

 

Timer Datetime Block:

Datetime Format: Set the target date and time for the countdown. Format: YYYY-MM-DD HH:MM. Timer will use the store's timezone by default, but you can overwrite the timezone by adding the timezone difference to the value. Example: 2026-12-24 00:00-06:00
Time Units Display: Choose to show the countdown units ("Hide," "Show above," "Show below") and their placement.
Unit Spacing: Adjust spacing between units for clarity (options: Narrow, Medium, Wide).
Text Gradient: Apply a color gradient to the text, overriding default colors for a standout effect.
Size Modifier: Scale the size of the countdown timers text for both desktop and mobile views.
Margin Top: Customize the top margin to integrate the timer smoothly into the section layout.

 

Button Block:

Button Label: Define the call-to-action text for the button.
Button Link: Specify the URL or destination the button should direct to.
Button Style: Choose the button's appearance (Primary, Secondary, or Link) to match your stores theme.
Size Modifier: Adjust the button's size, ensuring it's proportionate to the content area on both desktop and mobile.
Margin Top: Set the space above the button to maintain visual harmony.

 

Post Timer Message Block:

Configure a special message to appear once the countdown ends, offering continued engagement.

RTE Text Editor: Utilize the rich text editor to craft your post-timer message, adding a personal call-to-action.
Button: Optionally, include another button within this block which appears when the time runs out, reinforcing the action you wish users to take after the countdown.

Image (or Video) Block:

Media Toggle: Decide between an image or video backdrop for the timer, enhancing the section's visual appeal.
Desktop Settings: 
Image/Video Selection for Desktop and Mobile: Pick an image or paste a video URL.