Free Shipping Bar

The Free Shipping Bar feature allows you to display a dynamic progress bar that encourages customers to reach the free shipping threshold.

This screen lets you configure where the bar appears, how it looks, and what messages are shown.

1. Show On

Configure where the Free Shipping Bar will be displayed on your store.

Cart Page

  • Before cart table: Display the bar above the cart table.

  • After cart table: Display the bar below the cart table.

Checkout Page

  • Before checkout form: Display the bar above the checkout form.

  • After checkout form: Display the bar below the checkout form.

Other Places

  • Mini Cart: Display the bar inside the mini cart.

Note: If you are using the Gutenberg editor, you can also add the Free Shipping Bar block anywhere on your site.

2. Style

Customize how the Free Shipping Bar is displayed.

Display Style

Choose one of the following layouts:

  • Minimal Text: Display only the message text.

  • Progress Bar: Display a visual progress bar showing how close the customer is to free shipping.

  • Full Detail: Display detailed information including the progress bar and message.

3. Messages

Customize the messages shown to customers.

Progress Message

This message is displayed when the customer has not yet reached the free shipping threshold.

Available placeholders:

  • {remaining} – The amount needed to reach free shipping.

  • {threshold} – The free shipping minimum amount.

  • {current} – The current cart total.

Achievement Message

This message is displayed when the customer qualifies for free shipping.

4. Appearance

Customize the visual style of the bar.

Color Presets

Select from predefined color options.

Primary Color

Choose a custom primary color for the bar. The background will automatically use 20% opacity of the selected color.

Live Preview

On the right side of the screen, you can see a Live Preview of how the Free Shipping Bar will appear on your store.

  • Use the Simulate Cart Value slider to test different cart totals.

  • The preview displays:

    • Current State (not yet reached threshold)

    • Progress State

    • Achieved State (free shipping unlocked)

This allows you to adjust messages and styles in real time before saving changes.

Save Changes

Click Save Changes to apply your settings.

Last updated

Was this helpful?