Promo Bar Component

Adding a Promo Bar to the top of your Store

The Promo Bar Component adds a space for text at the very top of your store for alerts, promotions, or any other important messages. You can only add one and it cant be moved like most other components can.

To add one, go to the style editor by selecting the button by that name on the top of the page. Once in the style editor, click on the blue button with a plus sign.

Add Component Button example

In the component menu that opens on the right side of the page, scroll down and select ‘Layout 1’ under ‘PROMO BAR’. This adds the component to the top of the page.

Adding a promo bar example

Editing the Promo Bar

Once the bar is added to the page some options for it are displayed in a sidebar on the left side of the page. These include:

  • Background Color: This sets the background color of the promo bar.
  • Promo Text: The text to display in the promo bar. You can even use some basic html in your text. See the bottom of this article for hints.
  • Text Position: This sets the alignment of the text in the promo bar. Left aligned, center aligned, or right aligned.

Promo bar editing example

To edit the promo bar again later just hover over it in the style editor and click the ‘EDIT’ button that appears in the middle.

When you are done editing, save your work by clicking the save & publish button at the top right of the page.