How to Set Up Cart Progress Bar?

How to Set Up Cart Progress Bar?

What is Cart Progress Bar?

Cart Progress Bar shows customers how close they are to unlocking rewards, such as discounts or free gifts.

Depending on your Reward Type, customers unlock tiers by reaching a minimum cart value or product quantity. Only products that match your Apply to Products settings contribute to their progress.

For example:

  • Total Cart Value: “Spend $20 more to unlock your next reward.”

  • Product Quantity: “Add 2 more items to unlock your next reward.”


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: Offer discounts, free gifts, or both at different milestones.

Step 1: Create a New Offer

  1. In your Shopify admin, go to Apps → G: Volume Discount & Free Gift
  2. Click Offers in the left sidebar
  3. Click Create Offer (top right)

Step 2: Select Cart Progress Bar

  1. On the Select Offers page, click the Cart Progress tab
  2. 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

  1. Name: Enter an internal name (only you see this)
  2. Priority: Set to 0 unless you have multiple offers running
  3. Status: Set to Active for go-live. Draft to save as a draft for reviewing.
  4. Widget Title: Enter the headline shown on your store (e.g., BUY MORE, SAVE MORE)


Apply to Products

Use Apply to Products to define which products contribute to the cart value used to unlock rewards.

Only products that match the selected targeting conditions will be included in the qualifying cart value. Products that do not match can still remain in the customer’s cart, but their value will not move the progress bar or help unlock a tier.



Example

Suppose your offer is configured as follows:

  • Cart Amount: $900
  • Reward: Free Gift
  • Apply to Products: Specific Collection X, containing Product A, Product B, and Product C

The qualifying cart value will be calculated as follows:

  • Product A ($300) + Product B ($300) + Product C ($300)
    Qualifying cart value = $900 → The customer unlocks the free gift.
  • Product A ($300) + Product B ($300) + Product D ($300)
    Product D is not included in Collection X, so the qualifying cart value = $600 → The free gift remains locked.

This setting gives you more control over which products customers need to purchase to progress through the offer tiers.

Reward Type

Under Reward Type, choose how customers unlock your offer tiers:
  1. Total Cart Value: Tiers unlock when the qualifying cart value reaches the amount you set. For example, a $50 requirement unlocks when eligible products in the cart total $50.
  2. Product Quantity: Tiers unlock when the qualifying item quantity reaches the number you set. For example, a requirement of 3 unlocks when the cart contains 3 eligible items. This counts item quantities, including multiple units of the same product.

After selecting a reward type, configure the requirement and rewards for each tier under Offer Tiers.

Configure Tiers

Under Offer Tiers, click Tier 1/Tier 2, etc, to expand it.
  1. If Reward Type is Total Cart Value

Cart Amount: Enter the minimum cart value the customer needs to reach to unlock this tier’s reward. For example, enter 50 to unlock the reward when the qualifying cart value reaches $50.


  1. If Reward Type is Product Quantity

Product Quantity: Enter the minimum number of items the customer needs to purchase to unlock this tier’s reward. For example, enter 3 to unlock the reward when the cart contains at least 3 eligible items.


This counts item quantities, including multiple units of the same product. For example, 2 units of Product A and 1 unit of Product B count as 3 items, provided both products are eligible.

For both reward types, only products that match your Apply to Products settings count toward the requirement.

Discount: Choose a Discount Type from the dropdown, then set the value:
  1. Percentage Discount: Deducts a percentage off the order total. E.g, Set value to 5→ customer gets 5% off
  2. Fixed Discount: Deducts a fixed amount off the order total. E.g, Set value to 10 → customer gets $10 off
  3. Fixed Product Price: Sets a specific price for a product. E.g, Set value to 20 → the product is priced at $20
  4. 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:
  1. {{ remaining_goal }} — automatically shows how much more the customer needs to spend (e.g., Spend {{ remaining_goal }} more to unlock your next reward)
  2. {{ 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).

Customize Display Text

You can customize the text displayed on the Cart Progress Bar instead of using the default labels:
  1. Locked Badge Text: The badge shown before a tier is unlocked.
  2. Unlocked Badge Text: The badge shown after the customer reaches the required cart amount.
  3. Free Gift Badge: The label displayed on the free gift reward.
  4. Add to Cart Button: The text displayed on the button customers use to add the free gift to their cart.
Enter your preferred text in each field. The Cart Preview on the right will update automatically so you can check how it appears to customers.


Add a Free Gift to a Tier

In the tier’s reward section, click Free gift.

Under Gift, use Search products or Browse to select a gift product. Use Add gifts to add more products to the gift list.

Under Free Gift Rule, choose how customers receive their gifts.

All gifts (default)

Customers receive every gift in the list, in the quantities you configure. Adjust the quantity of each gift as needed.

For example:

  • Gift A × 1

  • Gift B × 2

  • Gift C × 1

When customers unlock the tier, they receive all 4 gift items: 1 of A, 2 of B, and 1 of C.


Selectable

Customers choose a set number of gifts from your list.

Enter Number of gifts buyers can select to set how many gifts customers can choose.

For example, enter 2 and add Doll, Teddy Bear, and Puzzle to the gift list. Customers can choose any 2 gifts, such as 1 Doll and 1 Teddy Bear.

Each gift can be selected only once, and customers receive one unit of each selected gift. They cannot choose 2 Dolls.


Customize the gift text

  • Free Gift Badge: Enter the label displayed on the gift reward.

  • Add to Cart Button: Enter the text displayed on the button customers use to add their gift.

Check Cart Preview to review the gift display.


Notes
For detailed setup instructions and examples, see Free Gift Selection in Cart Progress.

Use Cases

1. One tier with a single reward

Keep one tier and remove any additional tiers.

  • Discount only: Turn Discount on and configure the discount. If a Free gift card is present, click Delete on that card to remove it.

  • Free gift only: Turn Discount off, then add your gift products and configure the Free Gift Rule.


2. Different rewards across tiers

Use separate tiers for different rewards. For example:

  • Tier 1 — Discount only: Turn Discount on and remove the Free gift card, if present.


  • Tier 2 — Free gift only: Turn Discount off and configure the Free gift reward.



Set the requirement for each tier according to your selected Reward Type.

3. One tier with both rewards

Within the same tier, turn Discount on and configure the discount, then add and configure a Free gift reward.

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.

Add More Tiers

Click + Add Tier to create another reward milestone.


For each tier, set its cart amount or product quantity, then configure its discount and any free gift rewards.

To remove a tier, click its trash icon.


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
  1. Click Add rule to add more segments.  Or click 🗑 (the trash bin icon) to remove a rule.
  2. 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.