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

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.

Screen_Shot_2022-04-08_at_4.19.22_PM.png

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:

Screen_Shot_2022-04-08_at_4.21.24_PM.png


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

Screen_Shot_2022-12-22_at_1.56.06_PM.png


Give the section the name fsb_bar and click done.

Screen_Shot_2022-12-22_at_2.25.24_PM.png


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:

Screen_Shot_2022-12-22_at_2.43.46_PM.png

Then save (top right).

From here you have 2 options.

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

Screen_Shot_2022-12-22_at_2.26.29_PM.png

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

Enter theme customization. 

In the left menu, click Add section

Screen_Shot_2022-12-22_at_2.05.30_PM.png

Choose FSB

Screen_Shot_2022-12-22_at_2.33.09_PM.png

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

Screen_Shot_2022-12-22_at_2.45.49_PM.png


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:

Screen_Shot_2022-12-22_at_2.46.18_PM.png


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.

Screen_Shot_2022-12-22_at_2.42.40_PM.png

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.