Banner

Select a color scheme from the list and customize it with appropriate colors for heading, countdown bar, button, and background.

Applying a color scheme to the banner block 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.

Click Select video to upload a video for the banner instead of an image, making the section more dynamic.

You can also connect a dynamic source by clicking the Source button.

Select how the banner media is displayed:

• Adapt

• Portrait

• Square

• Landscape

Choose the heading size:

• Small

• Medium

• Large

Only shown when Heading is filled in.

Sets the color of the heading text.

• Text — the color scheme's default text color.

• Secondary — the color scheme's secondary text color.

• Accent — the color scheme's accent color (used for "Exclusive Deals" in red in the screenshot).

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).

• Cycle: The countdown resets and starts over from the initial duration, creating a repeating cycle.

Only shown when End date is filled in.

Enter text to display above the countdown timer — for example: Offer ends in.

Only shown when End date is filled in.

Controls the text styling of the countdown label.

• Uppercase — displays the label in all caps.

• Normal — displays the label as typed, with normal casing.

Keep the suggested label for days, or write your label in the field.

Only shown when End date is filled in.

Keep the suggested label for hours, or write your label in the field.

Only shown when End date is filled in.

Keep the suggested label for minutes, or write your label in the field.

Only shown when End date is filled in.

Keep the suggested label for seconds, or write your label in the field.

Only shown when End date is filled in.

Add text for the banner button (e.g., Shop Now or View All Products).

The button is hidden if no label is added.

To set a button link, you can enter the link URL directly into the "Button link" field or select a page from the dropdown list of options that appears when you click on the field.

Only shown when Button label is filled in.

Choose the button's appearance:

• Primary: Uses the primary button color defined in color scheme.

• Secondary: Uses the secondary button color defined in each color scheme.

• Outline: A button with a border and no fill.

• Link: A minimal button style aligned with the text.

• Link with dot: A minimal text-only link with a small dot marker next to it.

Only shown when Button label is filled in.