Setting up Yotpo Loyalty & Referrals on a Headless Platform

      Setting up Yotpo Loyalty & Referrals on a Headless Platform


        Article Summary

        Products


        Loyalty
        Supported plans

        Free, Pro, Premium, Enterprise

        eCommerce Platform

        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 frontend (or the “head”), which in most cases is a template or theme, has been decoupled and removed, leaving only the backend.

        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 backend 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 is relevant only to them: points balance, available discount, etc.

        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.


        Was this article helpful?