How do I place the bar visually in theme customization? (QAB)

Please watch our video tutorial here:


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

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. It will then be at the bottom of the sections.

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.

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.

So far we've been placing the bar as its own section. But 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 CTB 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. 

You can place it just above the buy buttons if you like.

You can use the same method to place the bar in the cart page: