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). It provides a clear visual cue that communicates progress and reward activation.
Inserting the Cart Reward Bar Element
Open the Insert Panel
Navigate to the Insert Panel in Instant.
Locate the Reward Element
Go to Elements → Cart.
Hover over the Cart category to expand available options.
Select Cart Reward Bar.
Add to Your Cart Drawer
Drag and drop the Reward Bar element into your Cart Drawer Layout.
The element appears pre-configured, ready for immediate use.
Configuration
Once added, you can 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.
States include not started, in progress, and reward unlocked.
Creating Automated 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.
Important Note on Discount Calculations
When using the Cart Reward Bar in combination with Shopify automated discounts, it’s important to understand that not all discounts are calculated in the same way. This affects how the reward threshold is tracked and displayed inside your cart.
How Different Discounts Are Calculated
Free Shipping
Thresholds for free shipping rewards are calculated based on the order total, which includes order-level discounts.
Example: If your free shipping threshold is $50, and a customer’s cart totals $60 but an order-level discount reduces it to $48, free shipping will not be triggered.
Most Other Discounts (e.g., Buy X Get Y, % Off, Fixed Amount Off)
These discounts are calculated based on the cart items subtotal (before order-level discounts are applied).
Example: If your reward bar is set to activate a 10% discount at $50 and the cart items subtotal is $52, the reward will trigger—even if order-level discounts later reduce the order total below $50.