How do I place the bar anywhere on my site with 2.0 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.

There are two options on how you can do this.

Option 1: Place the placeholder code in your theme

Place the code <div id="fsb_placeholder"></div> in your theme code, as shown here:

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. In these situations, you can use option 2 

Option 2: Place an app block in your theme

That's what I'll walk you through.

Step 1: Ensure that the bar is in fact set to manual placement in the app's dashboard:

Step 2: Navigate to your theme customization screen by going to your Online Store Sales Channel, then to your Theme, then click customize as shown here:

​

Step 3: 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.

Step 4: Add the bar as it's own section. To do that, you can click on Add section:

Then 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.

Step 5: Position the block where you would like. 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.

Here are some examples of what you can do with the following steps.

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.

Option 3: Add a custom liquid block

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.

Step 1: Open your theme editor, and add a custom liquid section

Step 2: Click on the newly created block. You will see an empty field where you can place your code. This is where you'll place the placeholder code:

<div id="fsb_placeholder"</div>

Step 3: Don't forget to save!

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

Step 4: You can click and drag the custom liquid to move the bar to any spot on the page below the header. You cannot place the bar above the header using this approach.We also have a video tutorial, if you prefer: