Promotion bar (Standard promo banner)

The Promotion Bar feature allows you to create an attention-grabbing banner. Here's how the layout is structured:

On the left side of the promotion bar, you can include a captivating heading to immediately capture the viewer's attention. This heading can be visually divided from the rest of the content using a dividing line.

Below the heading, you can add descriptive text that provides additional information or highlights the key aspects of your promotion. This text serves to engage the viewers and convey the benefits, details, or any other relevant information.

On the right side of the promotion bar, you'll find a prominently displayed button. This button serves as a clear call-to-action, encouraging visitors to take the desired action. You have the flexibility to customize the button text to align with your specific promotion, such as “Shop Now”, “Learn More” or “Claim Offer”.

How to access the Promotion bar section

Access this section through the theme customizer:

Navigate to Online Store > Themes
Select “Customize” on your active theme
On any theme template, click “Add section”
Search and select “Promotion bar”

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

How to configure the Promotion bar section

Basic Components

The Promotion bar section includes General Settings that control its overall configuration. To customize the Promotion bar, simply click on the section.

Settings in this article are organized and named according to the headings used in the theme customizer:

Heading settings
Text settings
Button settings
Content settings
Section settings

General settings

Heading settings

Settings	Description
Heading	This is a text field where you can add the heading of your banner. You can also format the text by making it bold or italic.
Font size	This is a slider that lets you adjust the font size of the heading for desktop devices. You can use it to make the font size bigger or smaller as per your requirement.
Font size for mobile	This is another slider that lets you adjust the font size of the heading for mobile devices. You can use it to make the font size bigger or smaller as per your requirement.
Font weight	This dropdown menu lets you select the font weight for the heading. Select from various options to customize the text’s thickness.
Font color	This color picker lets you select the font color for the heading. Click the box displaying the color circle and color name to select any color you like.

Text settings

Text	Description
Description	This is a text field where you can add the description of your banner. You can also format the text by making it bold or italic, adding a link to the text, also use the option of numbered or bullet lists.
Font size	This is a slider that lets you adjust the font size of text for desktop devices.
Font size for mobile	This is another slider that lets you adjust the font size of text for mobile devices.
Font weight	This dropdown menu lets you select the font weight for the description. Select from various options to customize the text’s thickness.
Font color	This color picker lets you select the font color for the description. Click the box displaying the color circle and color name to select any color you like.

Button settings

Settings	Description
Show button	Enable this toggle to display the button on the promotion bar.
Button label	This option allows you to add a label to the button. *If you remove the label, the button will become invisible on the page.
Button link	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 that appears when you click on the field.
Button color style	This feature allows you to customize the color style of buttons. You have two options to choose from: Primary Secondary This setting can be applied to buttons, links, and underlined links within the section. To choose or change the colors for these button styles, go to the “Colors” tab in the theme settings and locate the* “Primary button” and “Secondary button” blocks. By changing the colors in the theme settings, the new color style will be applied throughout the entire theme.
Button style	You can choose from seven different button styles: Default button: This is the standard button style with a solid background color and text. Default button with icon Outline button: This style features a transparent background with a colored outline and text. Outline button with icon Inline button: The inline button style blends seamlessly with the surrounding text, appearing as a link with the same color. Inline button with underline: Similar to the inline button style, this option adds an underline to the text, making it more noticeable. Inline button with underline on hover — this option adds an underline to the text on hover.

Content settings

Settings	Description
Content align	You can align the description to your promotion bar. Choose: Left, Center, or Right alignment.
Background color	Select the background color for the banner by clicking the box with a color circle and color name to pick any color you like.
Background image	Upload an image or select free images to use as the background for the banner section.
Overlay color	Select an overlay color to apply on top of the background image. You can adjust the opacity of the overlay as well.
Overlay opacity	Use the slider to adjust the opacity of the background overlay if the background image is selected.

Section settings

Setting	Description
Section top space	The “Section top space” setting allows you to adjust the amount of space at the top of the section using a slider.
Section bottom space	The “Section bottom space” setting functions similarly to the “Section top space” setting, but controls the space at the bottom of the section.
Enable full width section	Enable this toggle to display the section at full width.