How do I place the bar visually in theme customization? •

Please watch our video tutorial here:

If you prefer a step-by-step guide please proceed below:

Adding the bar as a Section

Please note that if you are not using a Shopify 2.0 theme, you might not be able to add a section to certain pages.

First, ensure that the bar is in fact set to manual placement in the app's dashboard:

Next enter the theme's Customize section. For that click on:

1) Online Store

2) Themes

3) Customize

And on the left, you can click on Add section:

Scroll the the bottom of that list until get to a section called Apps. Among the list of apps, you'll find Quick Announcement Bar. Click on it to add it to your page.

Now you can use the dotted tab to move the bar around in the layout. You may find yourself trying to drag the bar by grabbing the dotted tab for the QAB Custom Placement block. But that won't work. You need to grab and move the dotted tab of the Apps element. Like so,

And you should be able to see the bar that has been prepared in the app configuration rendered into the preview window:

If you click on the section, you'll see that there are no customizable settings. All the settings are still set in the app. But this allows you to place the bar in your theme more easily.

If you want the bar to occupy the entire width of the page (you'll notice the bar doesn't quite go edge to edge), you would take a different approach. Rather than adding a section as we've done, you would add custom liquid code.

This new section will load at the bottom of the page. When you click into it, there will be an empty box. In there is where you will place this code:

<div id="qab_placeholder"></div>

Then Save (top right) and the bar will then load and go from edge to edge.

You can move it around with the dotted tab.

You can follow these same steps on other pages.

Adding the bar as a Block

You can place the bar as a block inside another section. For that example, we'll switch over to the product page. In the top drop-down click in and select Products, then Default product.

The product page will load. We're going to focus on the section called Product information. You can see all of the components that make up that section. We can add our bar to that by adding a block.

At the bottom of the section in the menu, click Add block. Just as before, select the QAB Custom Placement block.

It will then appear at the bottom of the section. Now you can use the dotted tab directly next to the bar to drag it up.