Setting up Yotpo Loyalty & Referrals on a Headless Platform

      Setting up Yotpo Loyalty & Referrals on a Headless Platform


        Products


        Loyalty

        Supported plans

        Free, Pro, Premium, Enterprise

        eCommerce Platform

        Shopify, Shopify Plus, BigCommerce, Adobe Commerce, Salesforce Commerce Cloud, Custom

        Headless commerce architecture underpins an eCommerce solution with headless content management capabilities. That means a Customer Management System that stores, manages, and delivers content without a frontend delivery layer.

        With a headless platform, the front end (or the “head”), which in most cases is a template or theme, has been decoupled and removed, leaving only the back end.

        Please note:

        The on-site implementation of Yotpo frontend elements is the same process as the generic integration and will require extensive dev resources.

        The back end of the platform is directly connected to Yotpo and automatically sends order information and customer information. A headless implementation allows you to create a custom customer-facing shop while managing your orders and related info in an eCommerce platform.

        For the list of supported platforms, click here.

        Implementation

        The customer identification div must be added to the custom/generic frontend pages of every headless platform, regardless of the setup you have. 

        This div allows Yotpo to identify the shopper and present information that’s relevant only to them: points balance, available discount, etc.

        To learn more about the customer identification div, see Implementing Loyalty & Referrals on a Custom or Generic eCommerce Platform.

        After adding the div to all the relevant pages, you can go ahead and add the desired Yotpo modules

        Advanced modules

        Please note:

        The Multi-currency feature is currently not supported on a headless platform implementation

        Free Product module

        The implementation may vary according to the checkout page you’re using:

        • Generic frontend checkout page- if your checkout page was created by a frontend developer and not an eCommerce platform:

          1. Reach out to your Yotpo representative or our support team to inform them that you’d like to add the Checkout module to your shop.

          2. Once they enable the feature for you, use the following implementation guide: Implementing a Free Products Module on a Custom or Generic Platform

        • eCommerce platform checkout page - if you’re using the official checkout page of one of the following platforms: Shopify Plus, Magneto, BigCommerce, or SFCC, you can follow the Free Products On-site Module implementation guide.

        Checkout module

        The implementation may vary according to the checkout page you’re using:

        • Generic frontend checkout page- if your checkout page was created by a frontend developer and not an eCommerce platform:

          1. Reach out to your Yotpo representative or our support team to inform them that you’d like to add the Checkout module to your shop.

          2. Once they enable the feature for you, use the following implementation guide: Implementing the Checkout Module on a Custom or Generic

        • eCommerce platform checkout page - if you’re using the official checkout page of one of the following platforms: Shopify Plus, Magneto, BigCommerce, or SFCC, you can follow the Checkout On-site Module implementation guide.

        Referral Welcome popup

        To make sure the Referral Welcome popup appears in a headless implementation, add the JS loader code to the destination page - the page defined in the ‘Landing URL’ field of your Referral Program settings. This is typically your brand’s homepage or the first page you want a new friend to see after clicking the referral link.

        Unlike other Yotpo modules, the popup doesn’t require any additional HTML div as it’s triggered automatically from the referral link redirect.


        Was this article helpful?