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
Engaging promotional text or customer messages enhanced with images
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:

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 – These control the overall settings of the section.
Image block – Image block settings allow you to add an image to a heading. You can choose the image position and adjust its size.

To insert a new block between existing ones or to add a block when none have been added yet, refer to the article "Add a block" and locate the section titled “How to Add a Block”.

General settings

Setting	Description
Color scheme	Select a color scheme from the list and customize it with appropriate colors for heading, text, countdown, and background. Applying a color scheme to the countdown bar 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.
Heading	This field is for adding a heading to the section. In the top menu of the field, you can find options to customize the heading. Furthermore, you can click the dynamic source button to insert a dynamic source as the heading of the section.
Heading size	The heading size setting offers three options to control the size of your section heading: Small Medium Large
Heading color	This option allows you to customize the heading color. Choose one of three styles: Text Text secondary Accent The colors will adapt automatically based on the selected color scheme.
Color-changing text	This option allows you to change the color of part of the heading to highlight important information. Simply enter the portion of the heading you want to display in a different color into the field. Note: Case-sensitive. To change the colors of words that are not next to each other, use a comma. For example, 'shipping, shop'*
Custom color	Select a color to apply to the specific part of the heading you want to emphasize. Simply click the color swatch and select a color from the palette.

Background image settings

Setting	Description
Image	Choose a background image for your countdown. Click on “Select Image” to access your media library, upload a new image, or explore free images. Also, you can connect a dynamic source by clicking the source button. Once an image is added, you can use the “Change” button to remove, replace, or delete it.
Image mobile	You can use a landscape image for desktop and a square or portrait image for mobile. This allows you to add an image with the appropriate ratio for each device, ensuring optimal display.
Image fit	“Media fit” refers to how background images are sized and displayed within their respective containers on a web page. Two options for Media fit: Original: This setting displays the media at its original size, without any cropping or resizing. Fill: This option adjusts the media to fill the entire container, even if it requires cropping or resizing to do so.

Button settings

Setting	Description
Button label	Decide whether the section includes a button: To display the button, enter text into the field as the label. To hide the button, leave the text field empty.
Button link (paste a link or search)	Input the URL you want the button to direct to, or select a page from the dropdown list of options that appears when you click on the field. Also, you can click the source button to add a dynamic source as a URL.
Button style	In Shopify, Button style can be customized by using the primary and secondary button color sets, which are defined in the theme settings. These color sets allow you to style buttons consistently across your store.
Button type	Button type: Choose how the button will be displayed: Button – a solid button. Button with icon – a button that includes an icon. Link – text styled as a hyperlink. Link with icon – a hyperlink that includes an icon.
Icon	Select an icon from the dropdown list; it will be displayed in the button before the text.

Countdown settings

Setting	Description
End date	Enter the end date for a specific promotion. Refer to the example provided below the field in the theme customizer to ensure the discount period's end date is correctly formatted.
When date has passed	When the specified date has passed, use a dropdown menu to choose how the countdown bar behaves: Show Zeroes: The countdown stops and displays `00:00:00` for all units (days, hours, minutes, seconds). Hide countdown: The countdown bar is hidden once the date has passed. Cycle: The countdown resets and starts over from the initial duration, creating a repeating cycle.
Number size	The number size setting offers three options to control the size of numbers: Small Medium Large
Days	Keep the suggested label for days, or write your label in the field.
Hours	Keep the suggested label for hours, or write your label in the field.
Minutes	Keep the suggested label for minutes, or write your label in the field.
Seconds	Keep the suggested label for seconds, or write your label in the field.

Container settings

Setting	Description
Color scheme	Select a color scheme from the list and customize it with appropriate colors for heading, text, countdown, and background. Applying a color scheme to the countdown bar 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.
Top padding	The 'Top padding' setting allows you to adjust the amount of space at the top of the container 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 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, 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 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.