If you are using an older Shopify theme and want to place the Free Shipping Bar in a specific position (not just top or bottom), you can use the Placeholder option. This gives you the flexibility to insert the bar exactly where you need it. Before you begin, make sure to select the Placeholder option under the Display configuration section. Display configuration showing Placeholder option selected Additionally, we recommend working on a duplicate theme and hiring a developer if you are not comfortable editing code. We do not provide customization services. Now, 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 This option inserts a small piece of code in your theme where you want the bar to appear. You may follow these steps: Copy the placeholder code below: < div id = "fsb_placeholder" > In your Shopify admin, go to Online Store > Themes > click the three dots next to your theme, then click Edit Code . Three dots menu on the theme with Edit Code option Open the template or layout file where you want the bar to appear. For example, you can add it to a theme.liquid file. We will place the shipping bar above the store’s header. We’ll paste the placeholder code before the header of the theme, as shown in the image below. Placeholder code pasted before the header in theme.liquid Save your changes and test your storefront. Tip · Note: Some older themes only use {{ content_for_layout }} and may not properly insert the placeholder. If the bar does not show, try option below. Use Custom Section to Display the Bar If you want to add the bar visually in the theme editor, you can create a custom section. You may follow these steps: In Shopify admin, go to Online Store > Themes. Click the 3 dots > Edit Code on the theme you want to edit. Edit Code option in the three dots menu on the theme In the sections folder, click the New File icon and create a liquid file with your own preferred name. In the example below, we’ll name it fsb_bar.liquid. New file icon in the sections folder to create a liquid file A new file will be created. Paste the code below within the file: < div class = "fsb-section" > < div >{{ section . settings .fsb_section_body }} < section > < div id = "fsb_placeholder" > {% schema %} { "name" : "FSB" , "limit" : 1 , "presets" : [ { "name" : "FSB" , "category" : "Custom" } ] } {% endschema %} {% stylesheet %} {% endstylesheet %} {% javascript %} {% endjavascript %} Like so: Liquid code pasted into the new fsb_bar.liquid file Then save the file by clicking the Save button at the top right. Save button at the top right of the code editor 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 the {% section 'fsb_bar' %} code like so: Section tag inserted in a liquid file to render the FSB bar section Option 2: Place the Section Visually in the Theme Editor In the Shopify admin, go to your Online store > Theme > click Edit theme. Edit theme button in the Shopify admin In the left sidebar, click Add section. Add section button in the left sidebar of the theme editor Click the Apps tab and select the FSB Custom Placement . Apps tab in the Add section panel showing FSB Custom Placement option The FSB Custom Placement section will be added at the bottom of the layout. FSB Custom Placement section added at the bottom of the layout You may drag the section to the desired position by hovering over the dotted tab. Dotted drag tab used to reposition the FSB Custom Placement section 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 being dragged up below a slideshow element. FSB Custom Placement section dragged to below a slideshow element in the layout Here’s how it looks like in the live store: Free Shipping Bar displayed below the slideshow in the live store If you need assistance with your theme or placement issue, feel free to contact our support team at help@hextom.com

How do I display my bar on the checkout page?

This applies to: