Shopify Checkout Extension
- DarkLight
Shopify Checkout Extension
- DarkLight
Article summary
Did you find this summary helpful?
Thank you for your feedback
Goals and Outcomes
Shopify’s new checkout UI allows Shopify Partners, like Yotpo, to improve and customize the checkout experience with features beyond Shopify’s native functionality. The Yotpo Loyalty & Referrals checkout extension makes it easy for your customers to redeem points for discounts directly at checkout.
Key benefits:
Quick installation – integrate the extension into your Shopify Plus store with just a few clicks.
Seamless brand experience – the extension automatically matches your store’s design for a consistent look and feel.
Optimized performance – fast loading times at checkout help improve conversion rates.
Shop Pay compatibility – logged-in customers can redeem points directly through Shop Pay, making the process even more convenient.
In this article, you’ll learn more about the checkout extension, how to set it up, and how to test it.
How do I upgrade to extensible checkout on Shopify?
To learn how to upgrade to extensible checkout, click here.
Checkout Extension Overview
Checkout Extension OverviewThe app lets you add a dropdown element to your checkout page that includes rewards logged-in customers can redeem for points they’ve earned.
Note
Currently, customers must be logged into their Shopify account to see the extension on your checkout page.
Once you’ve added the app to your store, it will automatically inherit the checkout branding you defined and the content of the relevant fields will be filled automatically if left empty. You can customize the text within the fields at any point by going to your Shopify checkout editor.
Tip
You can use Shopify’s checkout editor to edit your checkout page. To learn more, see Shopify's help center.
The Rewards at Checkout menu supports the following reward options:
Fixed amount
Fixed amount gift cards
Percentage
Free shipping
Any amount (Variable)
Note
The app does not support:
Multipule languages
All relevant existing rewards are included automatically - there’s no need to select them manually. This behavior is managed by the system and cannot be manually adjusted.
When a customer gets to the checkout page, they will see one of the following:
If they are logged into their Shopify account and eligible to redeem a reward – the highest redeemable option available to them will be selected by default. If they click on the dropdown menu to choose a different reward to redeem, the rewards will appear in order of points cost from lowest to highest.
If they are logged in and do not have enough points to redeem a reward – they will see how many points they are missing to receive a reward.
If they are not logged in to their Shopify store account – they will see the logged-out message prompting them to create an account and redeem a reward. Keep in mind that if a customer clicks to log in, they will not be automatically redirected to the checkout page. Learn more about customer login redirects.
Only for brands using Shopify’s new Customer accounts and program eligibility set to “Only members who signed up”: If they are logged in, but haven’t signed up for your loyalty program yet, they’ll see a logged in non-member message prompting them to join your program to redeem rewards.
Notes
If a customer redeems a coupon but does not complete their order, the points used to redeem the code will be restored.
For referral codes specifically, which are not manually redeemed but automatically applied, the coupon will still appear in the customer’s rewards history even if the purchase isn’t completed.
Choosing a Redemption Type
Before you add the extension to Shopify, you'll need to choose the type of redemption available to customers.
In the Yotpo Loyalty & Referrals main menu, go to Display On-site > Checkout UI Extension.
Choose between the following options:
Fixed-rewards dropdown where the customer can choose which reward they would like to add to checkout.
Pay with points where the customers see a point selector and can choose how many points they'd like to redeem from their current balance.
Now you can add the app to your store.
Adding the Extension on Shopify
To add the Yotpo Loyalty & Referrals extension to your store:
Open your Shopify checkout editor.
Click Add App.
Select the Rewards at checkout Yotpo Loyalty & Rewards app.
Edit texts (optional) - if you leave the text fields empty, the content will be filled automatically, but you can go ahead and edit the text to better match your brand’s tone and voice.
Click Save.
App Settings
Customize how your loyalty program appears during checkout, including visibility in Shop Pay, opt-in messaging, and rewards messaging.
Enabling Shop Pay
To allow customers to redeem in Shop Pay and other express checkouts, enable the Include app block in Shop Pay toggle under Checkout behavior.
Logged Out Message
By default, logged-out customers will see a message encouraging them to log in to earn and redeem points. This message field is translatable, so you can customize it in any language to match your store’s localization needs. Simply enter the message in your desired language directly in the field.
Set to False if you want to hide this message.
Set to True if you want to display it.
Note
The default login URL used in the logged out message is hardcoded in the checkout extension and defaults to: https://www.example.com/account/login. This default URL cannot be updated directly through our extension. You can, however, customize it using markdown formatting.
For example:
Don’t miss out! [Log in](https://www.example.com/pages/signup) to earn and redeem rewards.
If no custom link is provided, the extension will fall back to the default URL. You can configure a redirect in your Shopify admin settings to point “/account/login” to your preferred destination (e.g., /pages/signup).
Logged in Non-member Message
This setting applies only if:
You’re using Shopify’s new customer accounts, and
Your loyalty program eligibility is set to “only members who signed up.”
The goal of this setting is to prompt logged in customers who haven’t signed up for your loyalty program to join it so they can start earning rewards.
Note
Make sure this message matches the one shown on your Rewards Page and widgets. We recommend copying and pasting the content here for consistency.
Opt-in disclaimer
If you’ve added a disclaimer to your Rewards Page or widgets, be sure to include it here as well. To add important links to your disclaimer, such as your privacy policy page, add the relevant term in square brackets followed by the page’s URL in regular brackets.
For example: I agree to the program’s [privacy policy](http://example.net/privacy-policy).
Add checkbox to opt-in disclaimer
Set to True to add a checkbox. Customers will have to enable the checkbox before clicking to opt in.
Set to False to remove the checkbox.
Opt-in button text
Add a CTA message to encourage customers to opt into your program, e.g., “Join now.”
Note
Customers associated with customer tags that have been opted out of your loyalty program (e.g, “employees”) will not see this extension when they are logged in and shopping at your store.
App Texts
The app texts will be filled automatically if left empty. You can edit the app text fields if you wish to translate the texts or if you want to adapt them to your brand’s tone and voice.
Below is an overview of the text fields within the app and the default text that will appear on your checkout page:
Text field | Description | Default text |
|---|---|---|
Points balance message | The current point balance available for the customer to redeem. | You have ##point_balance## points |
Points expiration message | A message that lets customers know when they have points about to expire within the next 30 days. If you don’t want to display this message, select True. This field is translatable, so you can customize the message in any language. Just add the message in the desired language, but keep the default placeholders ##next_points_to_expire## and ##days_until_expired##. | Hurry up! ##next_points_to_expire## points will expire in ##days_until_expired## days! |
Fixed rewards dropdown label | The name of the dropdown menu of available fixed-amount rewards. | Rewards |
Fixed reward options text | These are the fixed reward options customers will see in the dropdown. This field is translatable, so you can customize the message in any language. Simply replace the “for” and “points” text in the default message with their equivalents in your chosen language. | ##reward_text## for ##points## points |
Fixed amount dropdown button | The call-to-action that appears on the button next to the fixed-amount rewards dropdown. | Apply |
Pay with points label | The header of the point selector field. | Redeem your points |
Pay with points button | The call-to-action that appears on the button next to the point selector. | Apply $X off |
Insufficient points message | The message customer will see if they don’t have enough points to redeem a reward. | The message customer will see if they don’t have enough points to redeem a reward |
Minimum spend required message | If you’ve set a minimum amount a customer must spend to redeem a reward, the customer will see a message showing the minimum amount and how much they need to add to reach it. | Make a purchase of ##cart_minimum_amount## or more. Add another ##cart_missing_amount## to your cart to use your points! |
Hide Rewards at Checkout for specific countries | You can hide the Rewards at Checkout view from customers in specific countries. To do that, enter a comma-separated list of country codes in the settings. The extension will be hidden for customers from those countries based on the delivery country selected at checkout. Add the relevant country codes in an ISO 3166 format. | N/A |
Displaying loyalty points as credit
Note
This is supported only for the Pay with points setting.
You can display a customer's points balance as credit in the Shopify checkout extension.
To display points as credit:
In your Yotpo Loyalty & Referrals main menu, go to Display On-site > Checkout UI Extension.
Select Pay with points.
Click Save.
In the Shopify checkout editor, add the ##points_as_credit## placeholder to the Points balance message field and update the rest of the texts to match the new credit display.
Click Save.
Testing the Checkout Experience
You can preview the checkout experience to see how it will appear to customers; however, keep in mind that preview mode is limited to visual testing only. You won’t be able to test an actual redemption unless the app is both activated and added to your live checkout theme.
If you want to simulate the customer experience, open another tab and log in as a customer who meets the loyalty program criteria. You can add points to your test user to see the available redemption options at checkout.
Was this article helpful?
