How do I place the bar anywhere on my site with an older Theme? •

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 want to position the Free Shipping Bar somewhere other than the top or bottom of the page, you can use the Manual Placement for the display position. There are two ways to do this:

• Insert the Placeholder Code to Your Theme
• Use Custom Section to Display the Bar

Insert the Placeholder Code to Your Theme

To manually insert the placeholder code into your Shopify theme, follow these steps:

1. Copy the placeholder code below:

<div id="fsb_placeholder"></div>

2. In your Shopify admin, go to Online Store > Themes.
3. Click the 3 dots > Edit Code on the theme you want to edit.

4. Navigate to the desired file where you want to add the placeholder.
5. Paste the copied code into the file.

6. Save your changes.

Use Custom Section to Display the Bar

If you want to visually place the bar within your theme, you can do so by creating a custom section. Follow these steps:

1. In your Shopify admin, go to Online Store > Themes.
2. Click the 3 dots > Edit Code on the theme you want to edit.

3. In the Sections folder, click Add a new section.

4. Name the section fsb_bar, select Liquid, then click Done.

5. A new section will be created with default code. Delete the default code and replace it with 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:

6. Then save (top right).

Add the Section to Your Theme

From here, you have 2 options for adding the section to your theme:

Option 1: Insert the section in a Liquid file by adding:

Option 2: Place the Section Visually in the Theme Editor

1. In the Shopify admin, go to your Online store > Theme > click Customize.
2. In the left menu, click Add section.

3. Select the FSB.

4. The FSB section will be added at the bottom of the layout.

5. Drag the section to the desired position by hovering over the right side of the label and clicking on the dotted tab.

6. Save the changes for the bar to appear. Depending on the theme, you may also need to preview it to see the bar display correctly.

   
   

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

If you have any questions or concerns, you can reach us at help@hextom.com