Redeem in Cart Drawer
Set up point redemption directly in your cart drawer for seamless customer experience and increased conversion rates.
Last updated
Was this helpful?
Set up point redemption directly in your cart drawer for seamless customer experience and increased conversion rates.
Last updated
Was this helpful?
Picture your customer with $150 of skincare products in their cart and 800 loyalty points. Instead of forcing them to navigate away and risk losing their shopping momentum, the Cart Drawer Redeem Block lets them redeem points instantly within their cart.
They see "Redeem your points: 800 points," select "$25 off for every 250 points," and watch their total drop to $100 in one click. No disruption, no confusion – just seamless value recognition embedded directly in their purchase flow.
Rising acquisition costs demand maximizing existing customer relationships over chasing new ones. Every redemption friction point represents lost revenue and weakened loyalty.
The Cart Drawer Redeem Block creates immediate gratification that builds psychological loyalty. When customers redeem points without disrupting their flow, they develop anticipation for future redemptions, shifting from price-shopping to loyalty-building.
For beauty and fitness brands where repeat purchases matter most, this seamless experience reinforces that you value their time and loyalty, transforming transactions into genuine brand partnerships.
To add the Cart Drawer Redeem Block to your store, you'll need to configure it through Joy's embedded content settings and then implement it in your theme.
From your Joy Loyalty dashboard, navigate to Embedded content
Select the Product page tab
Locate Redeem in Cart Drawer in the available blocks list
Click Edit in Theme Editor to access the configuration options
The Cart Drawer Redeem Block includes several customization options to match your store's branding through the embedded content configuration panel.
Button styling:
Background color button apply - Set the background color for the apply button
Text color button apply - Configure the text color for the apply button
Border color button apply - Customize the border color for the apply button
Functional settings:
Enable cancel discount - Toggle to allow customers to remove applied discounts and restore their points
Reload page after applying coupon - Enable page reload after discount application for theme compatibility, or disable for smoother AJAX-based updates
After enabling the block in your Joy dashboard, you'll need to add the redemption interface to your cart drawer template.
Access your Shopify theme editor
Navigate to your cart drawer template file (typically cart-drawer.liquid or similar)
Insert the following code snippet where you want the redemption block to appear:
When customers interact with the Cart Drawer Redeem Block, they follow a streamlined redemption workflow designed for simplicity and efficiency.
The interface displays the customer's current point balance prominently at the top, followed by a drop-down menu showing available reward programs. Customers can select their desired reward type (such as "$10 off for every 100 points") and either use the dropdown selection or the interactive slider to choose their redemption amount.
Once they click "Apply," the system validates their point balance, checks program eligibility, and automatically applies the discount code. The cart totals update immediately to reflect the applied discount, and the customer's point balance adjusts accordingly. If they decide to remove the discount, they can easily do so, and their points will be restored.
Can customers redeem multiple reward types in a single transaction?
The Cart Drawer Redeem Block supports one active redemption per cart session. Customers can change their selection before completing checkout, but multiple simultaneous redemptions are not supported to prevent confusion and maintain cart clarity.
What happens if a customer removes items from their cart after redeeming points?
The system automatically recalculates applicable discounts when cart contents change. If the cart total falls below the minimum requirement for the applied discount, the system will notify the customer and may remove the discount, restoring their redeemed points.
How does the redemption block handle cart drawer updates?
The interface includes options for both page reload and AJAX-based updates. The AJAX option provides a smoother experience by updating cart totals without refreshing the page, while the reload option ensures compatibility with all theme types.
Can merchants customize error messages for their brand voice?
Yes, all error messages can be customized through the embedded content settings. Merchants can modify text to match their brand voice while maintaining clarity about redemption requirements and limitations.
What happens to redeemed points if a customer abandons their cart?
Points are only permanently deducted when a customer completes their purchase. If they abandon their cart or navigate away without checking out, their points remain available for future redemptions. However, any applied discount codes may remain in their cart session until manually removed.
How does the feature handle different point-to-currency conversion rates?
The system automatically calculates discount values based on your configured reward program settings. Whether you use fixed rates (like 100 points = $10) or variable rates, the interface displays accurate discount amounts and point requirements for each option.
Can customers see their redemption history through the cart drawer block?
The Cart Drawer Redeem Block focuses on current redemption actions rather than historical data. Customers should visit their loyalty page or account dashboard to view their complete redemption history and point-earning activities.
