How do I place the bar anywhere on my site with an older Theme? •
If you wish to place the Free Shipping 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="fsb_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 fsb_bar and click done.
A new section will be created with default code. Delete that code and paste in the following:
<div class="fsb-section"> <div>{{ section.settings.fsb_section_body }}</div> </div> <section> <div id="fsb_placeholder"></div> </section> {% schema %} { "name": "FSB", "limit":1, "presets": [ { "name": "FSB", "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 FSB
The FSB 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.