Shopify Checkout Extension

      Shopify Checkout Extension


        Article summary

        Products


        Loyalty & Referrals

        Supported plans

        Pro, Premium, Enterprise

        eCommerce Platform

        Shopify Plus

        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:

        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:

        1. 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. 

        2. 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.


        1. 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:

        1. Open your Shopify checkout editor.

        2. Click Add App.

        3. Select the Rewards at checkout Yotpo Loyalty & Rewards app.

        4. 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.

        5. 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:

        1. In your Yotpo Loyalty & Referrals main menu, go to Display On-site > Checkout UI Extension.

        2. Select Pay with points.

        3. Click Save.

        4. 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.

        5. 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?