Overview
The Reward Bar is a powerful tool designed to increase sales by encouraging customers to add more items to their cart. It acts as a progress tracker, showing how close customers are to unlocking valuable rewards like free shipping, discounts, or even a free product. As customers see their cart value or item quantity increase, they’re motivated to reach the next reward tier, driving additional purchases.
You customize the Reward Bar by controlling when it appears using Targeting, setting the trigger based on either Cart Value or Total Quantity, and creating up to 3 tiers of rewards. For each tier, you can choose to offer:
Free Shipping
Discount
Free Product
📝Tiers will be automatically reordered in the interactive builder preview according to their threshold values, from lowest to highest.
Targeting
Use Targeting to control when your Reward Bar appears in the Slide Cart Drawer.
Choose from the following options:
All Products - Show the Reward Bar for all carts (default behavior).
Specific Products - Show the Reward Bar only when the cart contains at least one of the selected product(s).
Specific Collections - Show the Reward Bar only when the cart contains at least one product from the selected collection(s).
👉 Use the sync button to manually update your collections after changes in Shopify:
📝You must select at least one product or collection when using Targeting. If none of your selected Targeting products are available, the Reward Bar will not display. When multiple products or collections are selected, the Reward Bar will appear when any of them are in the cart and will automatically hide if the cart no longer matches your Targeting. Reward progress is calculated using all products in the cart, not just the matching products.
Reward Trigger
In the Reward Trigger section, you set the condition that must be met to activate the tiers of the Reward Bar.
When "Cart Value" is selected, enter the value the customer should reach in the Threshold field to unlock the reward. This is the amount the customer must spend in their cart before they qualify for the next reward tier.
When "Total Quantity" is selected, enter the number of items the customer must add to their cart in the Threshold field to trigger the reward. This condition is based on the total number of items in the cart rather than the cart’s value.
This flexibility allows you to tailor the Reward Bar to suit different types of promotions, whether you're aiming to increase the total cart value or encourage customers to add more items to their order.
Free Shipping
Threshold - Specify the minimum product value or number of items the customer need to reach to qualify for free shipping.
Exclude shipping rates over a certain amount - If you want to exclude free shipping for shipping rates over a certain monetary value, then toggle this option on and enter the amount in the field.
Manage Countries - Choose the countries that you want the free shipping discount to apply to.
📝 Free shipping may show in the Cart Drawer, but not apply at Checkout if the country is ineligible.
📝To use the Free Shipping feature, you must first activate the "OCU Shipping Discount" in the Discounts section of your Shopify admin. Follow the quick and easy steps shown below to activate it:
Important: How the Free Shipping reward works
The Free Shipping reward applies an automatic "Free Shipping" discount when reward conditions are met.
This discount:
Overrides your existing Shopify shipping rules
Applies to all shipping methods at checkout
Cannot be limited to specific delivery methods (such as pickup-only or local delivery)
If your store offers free shipping only for certain delivery options, this reward will still remove shipping costs for all available shipping methods.
Discount
Discount percentage - Enter the percentage value of the discount you want to offer the customer. This will be applied to the cart total once the customer meets the threshold set. This is an "Order" discount type, meaning the discount will be applied to the entire order total, not just specific products.
Threshold - Specify the minimum product value or number of items the customer need to reach to qualify for the discount.
📝To use the Discount feature, the "OCU Order Discount" must be active in the Discounts section of your Shopify admin.
Free Product
1. Threshold - Specify the minimum product value or number of items the customer need to reach to qualify for the free product.
2. Click the "Selected Products" button to choose the free product(s) that will be added to the customer's cart once they meet the threshold. Up to 3 products can be selected. Please select only one variant per product. If multiple variants are selected, one will be added to the cart at random.
3. Free Product Choice - Toggle on to allow customers to choose one of the selected Free Products when the tier threshold is met. The toggle only appears when you've selected 2 or 3 products.
📝Select "Reached Reward Bar" in the Cart Preview to edit the Free Product Choice block:
The customer can hover over the free product link or icon in the reward bar to view an image of the free product(s).
📝Important Notes
1. To make the reward product(s) free, OCU uses the "OCU Product Discount" automatic discount in Shopify that triggers when the cart reaches the set threshold. When multiple Product discounts apply to the same line item, only the best discount is applied. Learn more about how different discounts combine.
2. If a customer earns a free product through the Reward Bar and then applies a discount code at Checkout that lowers their order value below the qualifying tier, the free product will remain. Shopify does not allow apps to modify line items once the customer reaches checkout.
This behavior can only be controlled through Shopify’s discount combination settings. If the customer’s discount code is not combinable with the "OCU Product Discount" used for the free item, Shopify will remove the free-product discount when the customer applies their code at checkout.
Free Product Availability Warnings
OCU automatically monitors the availability of any products or variants selected in your Free Product tiers and displays warnings if something becomes sold out, hidden, or unavailable to the Online Store.
You’ll see a red warning indicator in both the Cart Drawer list view and inside the builder, along with a message identifying the affected tier:
On the storefront, unavailable products are automatically hidden from customers. The entire reward section is hidden if all products in a tier become unavailable. If Free Product Choice is enabled and only one product remains available, it will be automatically added to the cart.
Availability updates happen in real time, but preview mode in the editor will still display your full configuration regardless of product status.
Additional Settings
Price Rounding - Round prices up after currency conversion.
Bar Color / Fill Color - Select the desired colors for the Bar and Fill to match your design preferences.
Headline Icon - Toggle the headline icon on/off for the reward bar. To upload a custom icon, delete the default icon first via the 🗑️ button.
Recommended size: 40x40px PNGLayout – Choose between three display options for the reward progress bar:
No Icons: Displays text labels like "Free Shipping," "Product," or "Discount" for each reward tier.
Contained Icons: Replaces the text with contained icons for each reward, offering a cleaner, more visual representation without any accompanying text.
Inline Icons: Replaces the text with icons placed directly in line, with no containers, for a lighter, more streamlined look.
Clicking on the Reward Bar text in the editor will open a popup where you can edit the:
Progress Message for each Tier- The message shown when the tier reward threshold is partially reached.
Last Goal Reached Message - The message shown when the last tier threshold is reached or exceeded and the customer is granted all rewards.
5. Hide Shipping Tier for Subscriptions - When enabled, this setting hides the "Free Shipping" reward in the Reward Bar if the cart contains a subscription product.
Customize Reward Bar Tier Text
If you use the "Without Icons" Layout option, you can customize the text shown for each tier to create more compelling messages and encourage customers to reach higher cart values. Each tier can have its own unique text, formatting, and dynamic values:
Click directly on any tier’s text label (Free Shipping, Discount, or Product).
Type your custom copy and apply formatting such as:
Bold or italic text
Text color
Font changes
You can insert variables that automatically update based on the cart and reward:
{{ product_title }}– Reward product name{{ product_price_was }}– Original price{{ product_price_now }}– Discounted price{{ discount }}– Discount amount (percentage or fixed value){{ quantity }}– Product quantity
📝 Key details:
Longer text wraps to multiple lines automatically. You can also press Enter to add manual line breaks.
Each tier can use different text, formatting, and variables.
Variables are replaced with real values once cart conditions are met.