Shopify Checkout Extension
Shopify Checkout Extension
Article Summary
Share feedback
Thanks for sharing your feedback!
Shopify’s new checkout UI lets Shopify Partners like Yotpo extend the checkout experience to include functionality that isn't provided natively.
Yotpo Loyalty & Referrals merchants can easily install the new checkout extension on their store to allow their customers to redeem points for a discount when placing an order.
The extension will automatically match the look & feel of your brand and fast loading time at checkout, having a positive impact on conversion rates.
Additionally, the extension allows customers who logged into their Shopify account to redeem points using Shop Pay.
In this article, you will learn how the extension works and how to install and test it.
How do I upgrade to extensible checkout on Shopify?
To learn how to upgrade to extensible checkout, click here.
How does it work
The app lets you add a dropdown element to your checkout page that includes rewards logged-in customers can redeem for points they’ve earned.
Please 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, click here.The Rewards at Checkout menu supports the following reward options:
- Fixed amount
- Fixed amount gift cards
- Percentage
- Free shipping
- Any amount (Variable)
Please note:
The app does not support:
All relevant existing rewards are included automatically - no need to choose them manually.
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.
Choosing 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
Enabling Shop Pay
To allow customers to redeem in Shop Pay and other express checkouts, check the Include app in Shop Pay option under ‘App Behavior’.
Logged out message
By default, logged-out customers will see a message that lets them know that they can log in to earn and redeem points.
You can hide the message by choosing True.
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 currency point balance available for the customer to redeem | You have ##point_balance## points |
| Fixed rewards dropdown label | The name of the dropdown menu of available fixed-amount rewards | Rewards |
| 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 | You’re ##points_amount## points away from 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! |
Displaying loyalty points as credit
Please 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
To preview your checkout experience and see exactly what your customers will see, you’ll need to have another tab open where you’re logged in as a customer that meets the requirements.
You can add points to your test user and see which redemption options are available to you at checkout.
Was this article helpful?
