The Cart Reward Bar element allows you to visually incentivize customers by displaying progress toward a reward, such as free shipping or a discount. As customers add items to their cart, the reward bar updates in real time, creating urgency and motivation to increase order value.
The element is designed around threshold conditions (e.g., spend $50 to unlock free shipping) and provides a clear visual cue that communicates progress and reward activation.
Overview
Reward bars are proven to increase average order value by motivating customers to add more items to reach a threshold.
How It Works
State | Description |
Not started | Customer hasn't added items yet |
In progress | Customer is working toward the threshold |
Reward unlocked | Customer has reached the goal |
Inserting the Cart Reward Bar Element
Step 1: Open the Insert Panel
Navigate to the Insert Panel in Instant.
Step 2: Locate the Reward Element
Go to Elements → Cart
Hover over the Cart category to expand available options
Select Cart Reward Bar
Step 3: Add to Your Cart Drawer
Drag and drop the Reward Bar element into your Cart Drawer Layout
The element appears pre-configured and ready for immediate use
Configuration
Once added, configure and preview the Reward Bar in the right sidebar.
Simulate Reward States
Adjust progress states (e.g., 0%, 50%, 100%) to preview how the bar will look at different levels. This helps you visualize both the "in progress" and "completed" reward states.
Set Reward Thresholds
Define the cart value threshold (e.g., $50 for free shipping). Customers will see their progress toward unlocking this reward.
Conditional States
The bar dynamically updates based on the customer's cart value:
State | Visual |
Not started | Empty progress bar |
In progress | Partially filled bar with amount remaining |
Reward unlocked | Full bar with success message |
Creating Automated Discounts in Shopify
To make the reward bar functional, create matching discounts in Shopify.
Free Shipping Discount
In Shopify Admin, go to Discounts → Create Discount
Select Free Shipping
Configure:
Minimum purchase requirement (e.g., $50)
Optionally limit to certain countries or products
Save the discount
Your Reward Bar will now track progress toward this free shipping threshold.
Buy X Get Y Discount
In Shopify Admin, go to Discounts → Create Discount
Select Buy X Get Y
Configure:
Customer buys: Select qualifying product(s) and quantity (e.g., Buy 2)
Customer gets: Select product(s) to discount (e.g., Get 1 free or % off)
Set usage limits or apply automatically at checkout
Save the discount
The Reward Bar can be used alongside this discount to visually motivate customers to add more products.
When using the Cart Reward Bar with Shopify automated discounts, different discount types are calculated differently. This affects how the reward threshold is tracked and displayed.
How Different Discounts Are Calculated
Discount Type | Calculated On | Example |
Free Shipping | Order total (after order-level discounts) | $60 cart - $12 discount = $48 (free shipping at $50 NOT triggered) |
Buy X Get Y | Cart items subtotal (before order-level discounts) | $52 subtotal triggers reward, even if order total is reduced later |
% Off / Fixed Amount | Cart items subtotal (before order-level discounts) | Same as Buy X Get Y |
What This Means
Free shipping thresholds may not trigger if order-level discounts reduce the total below the threshold
Most other discounts trigger based on the subtotal, regardless of order-level discounts applied later
Customization Options
Property | Customization |
Progress bar | Color, height, border radius |
Background | Bar background color |
Text | Message, typography, color |
Icon | Reward icon style |
Animation | Progress fill animation |
Quick Reference
Task | Action |
Insert Reward Bar | Insert panel → Elements → Cart → Cart Reward Bar |
Set threshold | Right sidebar → Threshold value |
Preview states | Right sidebar → Adjust progress percentage |
Create Shopify discount | Shopify Admin → Discounts → Create |
Recommended Placement
Position | Element |
1 (Top) | Header |
2 | Reward Bar |
3 | Product Items |
4 | Upsells |
5 (Bottom) | Footer |