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:

  1. Navigate to Online Store > Themes
  2. Select “Customize” on your active theme
  3. On any theme template, click “Add section
  4. Search and selectPromotion 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.
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us