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

Please watch our video tutorial:

If you prefer a step-by-step guide, kindly follow the steps below:

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. Something like this:

That often works, but there can sometimes be some unexpected results with some themes. Also, some themes don't have a body section that can be easily edited, and instead you'll see something like this,

with nowhere to place your placeholder code. 

So another option available in 2.0 themes is to place the bar visually using App Blocks. 

That's what I'll walk you through. First, ensure that the bar is in fact set to manual placement in the app's dashboard:

Next, you'll need to get into the theme customization space. For that click on: 
1 ) Online Store
2) Themes
3) Then click Customize
​​

From here, if you are on a 2.0 theme, you'll be able to choose the page you wish to customize. We'll begin with the home page.

To add the bar as it's own section, you can click on Add section:

Scroll to the bottom and you'll see a section called Apps. Among the options, you'll see Free Shipping 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 FSB 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 full width of the page, you can add the bar a different way. Rather than adding a section from the app, you'll add a custom liquid block.

When you click on the newly created block, you'll see an empty field where you can place your code. This is where you'll place the placeholder code:

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

And make sure you save.

After saving, the page will refresh and you should be able to see the bar:

You can then drag the bar to any spot on the page below the header. You cannot place the bar above the header using this approach.

We can use the App Block approach to customize placement such as placing the bar below the Add to cart button on product pages or above the subtotal in the cart page.

Switch over to the product page and choose Default product:

A product page will display.

From here, you can choose to add the bar as a section or a custom liquid, just as in the above example. But you can also add the bar as part of the item description, placing the bar below the add to cart button. Here's how.

In the left side menu, click Product information to open the section and see all of its components.

At the bottom, click Add block. Select FSB Custom Placement.

The App Block will be added to the bottom of the section.

You'll then be able to use the dotted tab to drag it around the section. 

You can drag it to just under the Buy buttons.

Now you'll be able to see the bar placed underneath the Buy it now / Add to cart buttons.

A similar approach can be used on the cart page.  Using the top drop down, open the cart page layout:

Using the same approach as before,  you can click on Subtotal to open up the section and see the contents. In there you can click on Add block to add the FSB Custom Placement. In this example I dragged the block to above the subtotal. 

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.