Countdown banner settings

This guide describes the Countdown banner section.

A section designed to display a banner with a live countdown timer, perfect for promoting limited-time offers, flash sales, or upcoming events. The banner can include:

A background image or color
A custom message or promotional text
A real-time countdown showing days, hours, minutes, and seconds
Optional call-to-action button linking to a product or collection

Example – How to Use This Section:

Content direction: Horizontal

Content direction: Vertical

How to access the Countdown banner section

Access this section through the theme customizer:

Navigate to Online Store > Themes
Select “Customize” on your active theme
From any page, click “Add section”
Search and select “Countdown banner”

To insert a new section between existing ones, follow the steps in the article Add a section

How to configure the Countdown banner section

Basic Components

The “Countdown banner” section consists of two primary components:

General settings
Block. Available block types include:

Text (Learn about all available block settings, article "Text").
Countdown (Learn about all available block settings, article "Countdown").
Button (Learn about all available block settings, article "Button").

General settings

Select a setting described in the following table:

Setting	Description
Color scheme	Select a color scheme from the list and customize it with appropriate colors for text, headings, buttons, and background. Applying a color scheme to the image banner section automatically updates all associated colors set in the theme settings according to the created color schemes. You can edit colors in this block, but it will impact the other sections and blocks in which the same color scheme is used. Learn more about color schemes.
Content direction	Choose how your content is arranged: Horizontal – The heading, countdown bar, and button are placed in a single row. Vertical – The heading, countdown bar, and button are stacked in a column, one below the other.
Background image	You can add a background image with its own background or use a transparent image placed at the bottom, allowing the color scheme’s background to remain visible.
Make section full width	Displays the banner across the entire width of the page.
Paddings for container:	Use this setting to fine-tune spacing, especially when: The content: text, countdown bar, button, has a different background than the section it's in. The background is the same as the section, and you want to minimize unnecessary gaps.
Container top padding	The Top Padding setting allows you to adjust the amount of space at the top of the container.
Container bottom padding	The 'Bottom padding' setting functions similarly to the “Section top padding” setting, but controls the space at the bottom of the container.
Container top padding mobile	The 'Top padding (Mobile)' setting allows you to adjust the amount of space at the top of the container, specifically for mobile devices.
Container bottom padding mobile	The 'Bottom padding mobile' setting works similarly to the 'Top padding mobile' setting but controls the space at the bottom of the container for mobile devices.

Section padding

Setting	Description
Top padding	The 'Top padding' setting allows you to adjust the amount of space at the top of the section using a slider.
Bottom padding	The 'Bottom padding' setting functions similarly to the “Section top padding” setting, but controls the space at the bottom of the section.
Top padding mobile	The 'Top padding mobile' setting allows you to adjust the amount of space at the top of the section specifically for mobile devices, using a slider.
Bottom padding mobile	The 'Bottom padding mobile' setting works similarly to the 'Top padding mobile' setting but controls the space at the bottom of the section for mobile devices.