Xboost

How to show the bar in a custom position

Overview

Use Manual Position to place the bar yourself, for example in your cart page, with the XB: Free shipping app block or a code snippet.

Steps

  1. Open Free Shipping Bar Upsell, click the bar name, then click Placement.
  2. Under Page to display, select Manual Position, then copy the ID with the copy icon. If the field shows "Save or Publish to show ID", click Save first.
  3. Click Add liquid block to your theme, or go to Online Store > Themes > Customize.
  4. Open the page you want, click Add block (or Add section), open the Apps tab and select XB: Free shipping.
  5. Paste the ID into Free shipping ID, move the block where you want it, and click Save in the theme editor.

The block shows the bar only when the bar uses Manual Position and is Active.

Use the code snippet instead

Copy the code snippet from the Placement step and paste it in any theme file. It looks like this, with your ID in data-id:

<div class="xbfsbu-block" data-id="YOUR-FREE-SHIPPING-BAR-ID"></div>