How to Use a Cart Progress Bar to Increase Order Value

You've set up tiered discounts on your Shopify store. Spend $50, get 10% off. Spend $100, get 20% off. Free shipping over $75. But there's a problem — your customers don't know how close they are to the next threshold until they're already at checkout.

A cart progress bar fixes that. It's a visual indicator on your pre-checkout page that shows exactly where the customer's cart stands relative to each tier. "$12 away from free shipping" is more motivating than a static banner that says "Free shipping on orders over $75."

Why Progress Bars Work

The psychology is straightforward. When people see they're 80% of the way to a goal, they're far more likely to push through than when they see a flat number. This is the goal gradient effect — the closer you are to a target, the harder you work to reach it.

Applied to ecommerce, a progress bar turns a passive price threshold into an active challenge. A customer with $63 in their cart doesn't think "I need to spend $75 for free shipping." They think "I'm almost there" — and they start looking for something small to add.

This nudge happens at the highest-intent moment in the buying process. The customer has already picked products and is about to check out. They're not browsing. They're buying. The progress bar doesn't interrupt that flow — it amplifies it by giving them a reason to add one more item before they complete the purchase.

What a Cart Progress Bar Shows

A good progress bar does more than show a fill level. It maps to your store's actual promotion structure — every tier, every threshold, every reward.

Tiered discount progress. If you offer "10% off at $50, 20% off at $100," the bar shows segmented sections for each tier. The customer can see they've unlocked the first tier and how far they are from the next one. Each segment fills independently, so the visual reads clearly at any cart value.

Free shipping threshold. The most common threshold merchants set. Show a single-tier bar that fills as the cart approaches the free shipping minimum. Simple and effective.

Combined tiers. Some stores combine discount tiers with a free shipping threshold. The bar handles this by showing all tiers in sequence — "10% off" then "Free shipping" then "20% off" — so the customer always knows what's next.

Locked vs unlocked labels. Each tier shows whether it's been reached or not. "Unlocked: 10% off" in one color, "Locked: Free shipping — $12 away" in another. The customer doesn't have to do math.

Setting Up a Progress Bar on Your Pre-Checkout Page

With Checkout Links, the progress bar is a block you drag onto your pre-checkout page. It reads your link's tiered promotions automatically — no manual configuration of thresholds.

Step 1: Set up tiered promotions on your link. Before adding a progress bar, your checkout link needs tiered discounts configured. Go to your link's settings and add promotion tiers: "10% off orders over $50," "Free shipping over $75," "20% off orders over $100." Each tier has a threshold and a reward.

Step 2: Enable a pre-checkout page. If your link doesn't have a pre-checkout page yet, enable it in the link editor. This is the page customers see between clicking your link and reaching Shopify's checkout.

Step 3: Add the progress bar block. Open the block editor for your pre-checkout page. Drag the progress bar block onto your page — typically near the top, above the cart items, so customers see it immediately.

Step 4: Customize the labels. Each tier gets a "Locked" label (shown before the threshold is reached) and an "Unlocked" label (shown after). The defaults work fine, but you can customize them. "Almost there — add $8 more for free shipping" is more compelling than a generic "Locked" label.

Step 5: Pick a style. The block ships with color presets — plain, light grey, red, orange, purple, green, blue, or custom. Pick one that matches your brand. The bar fill color and container style update together, so it stays visually consistent without manual color picking.

The block is cart-aware. As customers add or remove products from the pre-checkout page, the bar updates in real time. No page reload. No delay.

Choosing the Right Thresholds

The progress bar only works if the thresholds make sense for your store's average order value.

Set the first tier just above your current AOV. If your average order is $45, set the first discount threshold at $50-$60. This is close enough that most customers feel they can reach it with one more item, but far enough above average that it actually lifts your revenue per order.

Don't set the first tier too high. A progress bar showing 15% fill is discouraging, not motivating. If a customer with $30 in their cart sees they need $120 for the first tier, the bar works against you — it highlights how far away they are instead of how close.

Space tiers 30-50% apart. If your first tier is at $50, put the second at $75-$100. This gives customers who hit the first tier a visible and achievable next goal. If the gaps are too big, the middle of the bar looks empty and the customer stops trying.

Make the reward match the effort. Asking someone to spend $50 more for an extra 2% off isn't motivating. The discount increase at each tier should feel proportional to the spending increase. Jumping from 10% to 20% off at double the spend feels fair. Jumping from 10% to 12% doesn't.

Where to Place the Progress Bar

Position matters. The progress bar should be the first thing the customer notices on the pre-checkout page, but it shouldn't block the checkout action.

Top of the page, above cart items. This is the strongest position. The customer lands on the page and immediately sees their progress. As they scroll down to their cart items, they've already absorbed the spending context.

Between cart items and the checkout button. An alternative position that works if your page has other content at the top (like a callout block or email capture). The customer reviews their cart, sees the progress bar, and has one last chance to go back and add something before hitting checkout.

Don't put it below the checkout button. If it's below the fold or below the primary action, customers won't see it. The entire point of the bar is to influence behavior before they check out, not after.

Pairing the Progress Bar with Other Blocks

A progress bar is most effective when it's part of a larger pre-checkout page that gives customers a reason and an easy way to add more.

Progress bar + upsell block. Show the progress bar at the top, then an upsell block below the cart items. If the customer sees they're $15 away from the next tier, and the upsell block shows a related product for $18, the connection is instant.

Progress bar + product recommendations. Similar to upsells, but broader. Show products from the same collection or products frequently bought together. The progress bar sets the "spend more" mindset; the product block provides the "spend more on what" answer.

Progress bar + email capture with discount. For first-time visitors, pair the spending progress bar with an email capture block that unlocks an additional discount. The customer sees two incentives — the tier discount from spending more, and an immediate discount from entering their email. Both push toward checkout completion.

Measuring the Impact

After adding a progress bar to your pre-checkout page, watch two numbers:

Average order value. This is the primary metric. Compare your AOV for the 30 days before the progress bar versus the 30 days after. Even a $5-$10 lift in AOV compounds significantly across hundreds or thousands of orders.

Checkout completion rate. Make sure the progress bar isn't adding friction. If your completion rate drops, the thresholds might be too aggressive (customers feel pressured) or the bar might be positioned poorly (blocking the checkout flow). Adjust the placement or the tier values.

A well-configured progress bar typically lifts AOV by 10-20% without hurting completion rates. The customers who were already going to buy still buy. The ones who were close to a threshold add one more item. The bar doesn't create pressure — it reveals an opportunity the customer didn't know they had.