Customizing the Placement of your Smart Shipping Bar

Smart Shipping Bar comes with a number of options for customizing the placement of your bar. You’ll find these options by going to the Appearance section, under Options > Position.

The first three options (‘Top of store’, ‘Fixed to top of window’, ‘Fixed to bottom of window’) should work well for most themes and stores, however we’ve added ‘Custom placement’ as an option for stores that need more flexibility when it comes to the positioning of their bars within a page. 

Note: While this feature is accessible to everyone, we highly recommend having some familiarity with HTML and Liquid (Shopify’s templating language) before embarking on a custom placement journey.

How to custom place your bar

Step 1: Select ‘Custom placement’ under the Position settings.

Step 2: Some brief instructions and code will appear below, like this:

Copy <div id=”pxu_fsb”></div> to your clipboard.

Step 3: Navigate to Online Store > Themes.

Step 4: Click the Actions dropdown button (it’s next to the purple Customize theme button) and select Edit HTML/CSS.

Step 5: Within the code editor sidebar, find the template/section where you would like your bar to appear and paste the code into the theme. An example would look like this:

Step 6: Save!

Note: While you can create as many bars as you want using the regular positioning options — if you have a paid plan, that is —  we highly recommend publishing only one custom placed bar at a time.

If you’re having difficulty finding the right area to add the code snippet, reach out to our support team for some help 🙂