Setting up Yotpo Loyalty & Referrals on a Headless Platform
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.
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.
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
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:
- 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.
- 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:
- 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.
- 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.