Setting up Yotpo Loyalty & Referrals on a Headless Platform
Setting up Yotpo Loyalty & Referrals on a Headless Platform
Article summary
Did you find this summary helpful?
Thank you for your feedback
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
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.
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 Free Product 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.
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?
