How do I place the bar anywhere on my site with an older Theme? (QAB)

The Manual Placement feature, and the associated insertion code, are provided to make it possible for merchants and their developers to implement their own customizations. It is recommended to hire a developer for any theme customizations, and to implement any edits on a duplicated copy of your theme. Please note, we do not offer any customization services.

If you wish to place the Quick Announcement Bar somewhere other than the top or bottom of the page, you can use the Manual Placement option.

From here you have two options.

You can place the code  <div id="qab_placeholder"></div> in your theme code where you would like the bar to display. Something like this:

But sometimes that doesn't quite work. For instance, there are some themes that have only 

 {{ content_for_layout }}

as their code for the main body of the page. 

Other times, you may want to place the bar visually in the theme. In both these cases, you can do so using a custom section.

Enter the theme code editing space. 

Inside the Sections folder, click on Add a new section

Give the section the name qab_bar and click done.

A new section will be created with default code. Delete that code and paste in the following:

<div class="qab-section">
<div>{{ section.settings.qab_section_body }}</div>
</div>

<section>
<div id="qab_placeholder"></div> 
</section>
{% schema %}

{
"name": "QAB",
"limit":1,
"presets": [
{
"name": "QAB",
"category": "Custom"
}
]
}
{% endschema %}
{% stylesheet %}
{% endstylesheet %}
{% javascript %}
{% endjavascript %}

Like so:

Then save (top right).

From here you have 2 options.

1 - You can place that section in a liquid file like so:

2 - You can place the section visually in the theme.

Enter theme customization. 

In the left menu, click Add section

Choose QAB

The QAB section will then be added to the bottom of the layout.

You can drag it to where you would like it to be by hovering over the right side of the label and then clicking on the dotted tab:

You may need to save the theme to see the bar appear. Even then, depending on the theme, you may need to preview the theme to see the bar display.

Here's an example of the bar dragged up to below a slide show element.