Creating Your First Bar
This guide walks you through creating and publishing your first shipping bar from start to finish.
Step 1 — Open Bars
Section titled “Step 1 — Open Bars”From the app dashboard, click Bars in the left sidebar, then click New Bar.
Step 2 — Set your threshold
Section titled “Step 2 — Set your threshold”Enter the minimum cart value that qualifies for free shipping. This should match the threshold you’ve configured in your Shopify shipping settings.
Example: If you offer free shipping on orders over $50, enter 50.
Step 3 — Customize your messages
Section titled “Step 3 — Customize your messages”Set three messages that display at different stages of the customer’s progress:
| Stage | Token available | Example message |
|---|---|---|
| Below threshold | {remaining}, {threshold} | Spend {remaining} more for free shipping! |
| Goal reached | — | You've unlocked free shipping! 🎉 |
| Cart empty | — | Spend {threshold} for free shipping. |
Step 4 — Style the bar
Section titled “Step 4 — Style the bar”Choose colors, font size, and animation in the Appearance tab:
- Background color — bar background
- Text color — message text
- Progress bar color — the filled portion of the progress indicator
- Animation — enable a pulse effect when the goal is reached
- Close button — let customers dismiss the bar
Step 5 — Save
Section titled “Step 5 — Save”Click Save Bar. The bar is saved but not yet visible on your storefront.
Step 6 — Preview in the theme editor
Section titled “Step 6 — Preview in the theme editor”Click Preview in theme editor to open Shopify’s theme customization tool with the bar loaded. Verify it looks correct on your live theme.
Step 7 — Publish
Section titled “Step 7 — Publish”Return to the app and toggle the bar to Active. The bar is now live on your storefront.
Next, learn how to control where and when the bar appears: Display Rules →