The checkout widget lets customers see the points they'll earn and redeem their available rewards as part of their checkout experience. It shows up during checkout as a Loop loyalty block, where customers can log in, view and redeem their balance, and apply coupons to the order before they pay. This keeps the reward visible at the exact moment a customer is deciding to buy.
Configuring checkout widget
Navigate to Loop admin → Loyalty → Customer experience → Checkout widget.
1. Adding the widget to checkout
For the widget to appear at checkout, the Loop Loyalty block has to be added to your Shopify checkout editor. Until it is added, the widget will not show to customers, even though the program is active.
You can add the block in two ways. When you open your checkout widget page, a banner at the top of the checkout widget screen prompts you to add the checkout block, and clicking Add Loop Loyalty block takes you into the Shopify checkout editor to place it. Inside the Shopify checkout editor, you can also decide where the block sits on the checkout page, so you control its placement in the flow.
If you dismiss that banner, you can still add the block later from the Add Loop block option inside the checkout widget section.
2. Customizing the widget
Once the block is added, you configure how the widget looks and reads from the checkout widget section. You can choose the widget icon that best represents your program, set the program name, and customize the login text customers see before they sign in. Each field shows its default value, so you can adjust the wording to match your brand voice or leave the defaults in place.
A live preview of the widget is present alongside the texts settings, so you can see your changes before they go live. You can also set the widget Status to Active or inactive from this screen.
3. Setting redemption rules
How customers redeem points at the checkout depends on the rules you set in the Preferences section. The amount a customer can apply in one order, and the minimum order value before they can redeem are all set here. Whether the balance shows as a currency value or as points to your users also comes from Preferences section, under the display format setting.
Other important functionalities like minimum cart value for users to redeem loyalty points and the order type on which they can redeem the points - whether it is subscription order or one-time order can also be determined from the preferences section.
Check the complete Preferences guide here.
4. How redemption works
Once the user is on checkout, they will be able to see their total available points and coupons. They will also be able to see the minimum and maximum amount set by you and won't be able to redeem outside that range. When they click on the redeem button, the points will automatically be applied as a discount coupon for the user.
Additionally, all the available coupons will be visible in the My coupons section.
Checkout widget user experience
The visibility of checkout widget will depend on the end user state. Below are the different states a user can fall into:
If a user is not logged in: If your checkout widget is enabled for the store, when any user lands on your store's checkout page, whether he is eligible or not eligible for redeeming points, they will be able to see the loyalty widget block. This is because if a user is not logged in, there's no way for us to determine the user's loyalty status.
2. Logged in user who is eligible and has points: If a user is eligible for accessing and redeeming points and they have points to redeem, they will simply be able to experience the checkout functionalities.
3. Logged in user who is not eligible: You can set specific users for whom you want loyalty points to be visible by adding customers tags to them. This can be set via the preferences section. If a user is not tagged with the customer tag, they won't be able to view or redeem loyalty points.
FAQs
What happens if a user tries to redeem credits outside of the range set in the Preferences?
If a user tries to withdraw credits outside the minimum and maximum balance set in the Preferences section, the redeem button will get disabled, not letting them complete this action.
What happens to the user balance if they redeem the points but never complete checkout
Any points redeemed in the checkout widget will be automatically converted into discount coupons and applied to the cart. In case, the user drops at checkout and does not complete the purchase, the coupons will be stored as it is and be accessible to the users via all loyalty touchpoints - customer portal, checkout widget and loyalty portal.
Need help?
No worries - we're here for you! If you have any questions or need assistance, feel free to email us at [email protected] or chat with us using the support beacon at the bottom right of your screen.
Regards, Loop subscriptions team 🙂