---
title: "Setting up Yotpo Loyalty & Referrals on a Headless Platform"
slug: "setting-up-yotpo-loyalty-referrals-on-a-headless-platform"
tags: ["Custom", "Loyalty and Referrals"]
updated: 2024-06-05T09:47:45Z
published: 2024-06-05T09:47:45Z
canonical: "support.yotpo.com/setting-up-yotpo-loyalty-referrals-on-a-headless-platform"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://support.yotpo.com/llms.txt
> Use this file to discover all available pages before exploring further.

# 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](/v1/docs/implementing-loyalty-referrals-on-a-custom-or-generic-ecommerce-platform#frontend-elements) 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**](https://yotpo.document360.io/docs/supported-platforms-for-loyalty-referrals)**.**

## 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](https://support.yotpo.com/v1/docs/implementing-loyalty-referrals-on-a-custom-or-generic-ecommerce-platform#frontend-elements).

After adding the div to all the relevant pages, you can go ahead and add the desired [Yotpo modules](https://support.yotpo.com/docs/implementing-loyalty-referrals-on-a-custom-or-generic-ecommerce-platform#onsite-modules).

### Advanced modules

Please note:

[The Multi-currency feature](/v1/docs/multi-currency-loyalty-referrals-setup-on-a-custom-or-generic-ecommerce-platform) 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:
  1. Reach out to your Yotpo representative or [our support team](https://loyalty.yotpo.com/contact-support) 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](/v1/docs/implementing-the-checkout-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 [Checkout On-site Module](/v1/docs/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:
  1. Reach out to your Yotpo representative or [our support team](https://loyalty.yotpo.com/contact-support) to inform them that you’d like to add the Free Product 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](/v1/docs/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](/v1/docs/free-products-on-site-module) implementation guide.

### Referral Welcome popup

To make sure the [Referral Welcome popup](/v1/docs/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](/v1/docs/setting-up-your-referral-program#additional-parameters). 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.