Cart

Free shipping bar

Learn how to enable and configure the free shipping progress bar in the cart

The free shipping bar displays a progress indicator in the cart that shows customers how much more they need to spend to qualify for free shipping. As items are added, the bar fills up and updates its message automatically.

Enabling the free shipping bar

  1. Open Theme settings in the Theme Editor.
  2. Click Cart.
  3. Check Enabled under the Free shipping bar group.
  4. Enter your free shipping minimum in the Free shipping threshold field.

Setting a different threshold per currency

If your store supports multiple currencies, you can define a separate threshold for each one. In the Free shipping threshold per currency field, enter one currency per line using the format CODE:AMOUNT:

USD:100
EUR:85
GBP:73

When a customer's currency matches one of these entries, the theme uses that threshold. Otherwise, it falls back to the default value from Free shipping threshold.

Changing the messages

The free shipping bar displays two messages: one while the customer still needs to spend more, and one when they qualify. To edit them:

  1. In your Shopify admin, click the three-dot menu (⋯) next to your theme and select Edit default theme content.
  2. Click Sections, then scroll to the Cart group.
  3. Edit the following entries:
    • Spend more html — shown when the customer hasn't yet reached the threshold.
    • Qualified html — shown when the customer qualifies for free shipping.

The default messages are:

Spend more html
Spend <span class="font-medium">{{ remaining }}</span> more for free delivery!
Qualified html
You qualify for <span class="font-medium">free delivery!</span>
The {{ remaining }} placeholder in the "Spend more" message is replaced by the amount the customer still needs to spend. Make sure to keep it in your custom message.

Customizing the color

The bar color can be adjusted under Theme settings > Colors > Cart > Free shipping bar.