Countdown section

The “Countdown” section is a dynamic feature designed to engage your audience and drive urgency. This versatile section allows you to set up a countdown timer to highlight special promotions, upcoming events, or limited-time offers.

Section settings

Image: The section’s image. The image will take up around half the space of the countdown.

Enable image mask: Whether to apply a diagonal mask effect on the image or not.

Image position: Control the position of the image within the section (left or right).

Content alignment on desktop: Control the content (heading, description, button) alignment on desktop viewports (left or center).

Badge text: Adding text to this setting will reveal a small badge above the title of the section.

Heading: The title of the countdown section.

Heading size: Adjust the size of your heading to make your message stand out. Available options: Small, Normal, Large, Extra large, and Extra extra large.

Text: The description of the section.

Button label and Button URL: The call to action button text and link.

Countdown date: Enter a date in ISO format (e.g. 2024-01-30 in the format of YYYY-MM-DD). The section will display a countdown up to this date.

Hide section after countdown has expired: Choose whether to hide the section entirely after the countdown has expired (i.e. the date has passed). Alternatively you can show a message to your customers (see below).

Expiration message: If you don’t want to hide the section after the countdown has expired, you can show a message to your customers. The section along with its content and button will still be visible.

Colors

Color scheme: Select one of the predefined color schemes as defined in Theme settings > Colors. For more information regarding the color schemes please refer to our article about creating your own color scheme.

Section spacing

The section spacing settings gives you the option to adjust the top & bottom section spacing values. Please note: If you select a color scheme with a background color, these settings will affect the spacing between the top or bottom of the section and the content of the section.

SEO

Heading tag: Select the appropriate heading level (H1, H2, or H3) based on how you want the section title to appear.

Visibility

Show section on desktop: Enable or disable the section’s visibility on desktop devices.

Show section on mobile: Enable or disable the section’s visibility on mobile devices.

Hide section if…: Enable this option when the section’s fields are bound to dynamic sources (i.e. metafields or metaobjects). The section will be hidden on the front-end if the most important field(s) are empty, i.e. when there is no meaningful output.