How to Set Up Cart Progress Bar?
What is Cart Progress Bar?
Cart Progress Bar is a widget that appears in your store's cart, showing customers a visual progress bar toward unlocking a reward, such as a percentage discount, a fixed amount off, or a free gift.
As customers add more items to their cart, the progress bar fills up and updates in real time. Each time a customer reaches a spending milestone you define, the corresponding reward is automatically applied. If you set up multiple tiers, customers can see all the upcoming rewards at a glance and choose how far they want to go.
Example: "Spend $20 more to get 10% off" → customer adds one more item → "You've unlocked Free Shipping!"
Why use it?
- Increase Average Order Value (AOV): customers are motivated to add more to their cart when they can see they're close to a reward
- Reduce cart abandonment: a visible goal keeps customers engaged instead of bouncing at checkout
- Easy to set up: no coding needed; fully customizable to match your store's look and feel
- Flexible rewards: mix and match discount tiers, free gifts, or shipping perks in a single offer
Step 1: Create a New Offer
- In your Shopify admin, go to Apps → G: Volume Discount & Free Gift
- Click Offers in the left sidebar
- Click Create Offer (top right)
Step 2: Select Cart Progress Bar
- On the Select Offers page, click the Cart Progress tab
- Click Create offer → on the Cart Progress Bar card
Step 3: Set Up Discount Tiers
You'll land on the Discount Tiers tab. This is where you define the rewards customers unlock as they add more to their cart.
Basic settings
- Name: Enter an internal name (only you see this)
- Priority: Set to 0 unless you have multiple offers running
- Status: Set to Active for go-live. Draft to save as a draft for reviewing.
- Widget Title: Enter the headline shown on your store (e.g., BUY MORE, SAVE MORE)
Configure Tiers
Under Offer Tiers, click Tier 1/Tier 2, etc, to expand it.
Cart Amount: Enter the minimum cart value the customer needs to reach to unlock this tier's reward (e.g., 50 means the reward unlocks when the cart hits $50).
Discount: Choose a Discount Type from the dropdown, then set the value:
- Percentage Discount: Deducts a percentage off the order total. E.g, Set value to 5→ customer gets 5% off
- Fixed Discount: Deducts a fixed amount off the order total. E.g, Set value to 10 → customer gets $10 off
- Fixed Product Price: Sets a specific price for a product. E.g, Set value to 20 → the product is priced at $20
- No Discount: No price discount is applied Use this when the reward is a free gift only
Title: This is the message customers see while working toward this tier. Toggle the Insert variable switch on to use dynamic variables:
{{ remaining_goal }}— automatically shows how much more the customer needs to spend (e.g., Spend {{ remaining_goal }} more to unlock your next reward){{ current_goal }}— shows the total goal amount for this tier
Label: A short text label shown at the milestone point on the progress bar (e.g., 5% Off or Free Gift). Toggle the switch on the right to show or hide the label on the bar.
Details (optional): Toggle this on to show additional description text under the tier when a customer interacts with it. You can use {{ current_goal }} here as well (e.g., Spend {{ current_goal }} to get this discount).
Add a Free Gift to a Tier
Below the Details field, you will see buttons for Free gift. Click Free gift to attach a specific product as a free gift reward for that tier. You can add multiple free gifts at a tier. The product will automatically be added to the customer's cart when they reach the spending goal.
5.No Discount, then add a free gift (see below).Add more tiers
Click + Add Tier to add a second reward milestone (e.g., a free gift at a higher cart value). Or click 🗑 (the trash bin icon) to remove a tier.
For each additional tier, follow the same steps above. Use the Free gift, Upsell, or Shipping buttons below the tier to attach a special reward type.
Tier Details Display
Choose how tier details appear to customers:
- On Hover: details show when the customer hovers over or taps a tier milestone
- Always Visible: details expand below the progress bar by default
Apply to Customers
Choose who this offer applies to:
- All Customers: The offer is shown to every visitor, whether logged in or not.
- Customer Segment: The offer only applies to customers who match specific conditions. When you select this option, you can add one or more rules:
- Login status: Target customers based on whether they are logged in or logged out
- Customer tags (logged-in only): Filter by custom tags on the customer's account (e.g., "VIP", "wholesale")
- Country: Show the offer only to customers from specific countries
- Total amount spent (logged-in only): Target customers who have spent above a certain total across all orders
- Number of orders (logged-in only): Target customers based on how many orders they have placed
- Customer type (logged-in only): Choose whether the offer applies to B2B customers, retail customers, or bot
- Click Add rule to add more segments. Or click 🗑 (the trash bin icon) to remove a rule.
- You can add multiple rules at once. When multiple rules are set, a customer must match ALL of them to see the offer.
Step 4: Customize the Design (optional)
Click the Design tab to adjust the visual appearance.
- Preset: pick a ready-made color scheme to match your store theme
- Widget layout: adjust padding and spacing between elements
- Widget colors: set border and title colors
- Tier colors: Customise the progress bar, badge, and text colors individually
- Typography: change font size for widget title, subtitle, tier title, and tier description
The Cart Preview on the right updates live as you make changes.
Step 5: Advanced Settings (optional)
Click the Advanced tab.
- Schedule
- Run campaign continuously: starts immediately and runs until you deactivate it
- Run campaign on schedule: set a specific start and end date (optional).
- Translation: manage language settings for multilingual stores
Step 6: Save & Go Live
Click Save to publish your offer. Make sure Status is set to Active.
Your Cart Progress Bar will now appear in the cart on your storefront, encouraging customers to spend more to unlock their next reward.
Related Articles
Set up your Frequently Bought Together Offer
What is Frequently Bought Together and Its Benefits? Frequently Bought Together (FBT) is a bundle widget that displays a curated group of related products directly on your Product Page, as a set customers can add to cart in a single click. Instead of ...Set up your Quantity Breaks Discount Offer
Boost sales for a single product, average order value (AOV), or clear excess inventory with ‘Quantity Breaks’ Offer in G: Volume Discounts & Upsell. Paired with 5+ interactive templates, they are designed to help Shopify merchants drive larger ...Set up your Quantity Discount and Volume Discount Offers
Boost sales for a single product or any products, boosting average order value (AOV), or clear excess inventory with ‘Quantity Discount’ Offer and ‘Volume Discount’ Offer in G: Volume Discounts & Upsell. They are designed to help Shopify merchants ...Getting Started to G: Volume Discounts & Upsell
Introduction Struggle to boost your Shopify store’s average order value (AOV) or clear out excess inventory? Do your customers often abandon carts with only one or two items? G: Volume Discounts & Upsell is here to solve these worries. This ...Table Layout Discount Widget in Quantity Discount and Volume Discount
The Table layout displays your discount tiers in a clear, structured table format. It provides the same functionality as the Stack layout while offering additional customization options in the Offer blocks and Design tabs, making complex tiered ...