Overview
If your store uses a headless Shopify setup (for example, Shopify Admin + custom frontend built with React, Next.js, Vue, etc.), you’ll need to manually pass customer and store information to rediem so that we can identify logged-in users and display their loyalty data.
The following steps will help you set up rediem on your headless site.
Step 1: Add the rediem Customer Attribute Container
Create a container <div> element on your site that must include key Shopify customer and store attributes as data- attributes so rediem can identify the user and load the correct account details. This div must be present on the page before rediem's script runs so that appropriate loyalty information relevant to that shopper can be displayed.
On page load, the Loyalty module will scan the DOM of the following element:
<div
data-rdm_domain="{{ shop.domain }}"
data-rdm_id="{{ customer.id }}"
data-rdm_email="{{ customer.email }}"
data-rdm_firstName="{{ customer.first_name }}"
data-rdm_lastName="{{ customer.last_name }}"
data-rdm_tags="{{ customer.tags | join: ',' }}"
id="rdmWidgetLoadDiv">
</div>
Explanation of Attributes
Attribute | Description |
data-rdm_domain | Your Shopify store domain. |
data-rdm_id | The unique Shopify Customer ID. |
data-rdm_email | The logged-in customer’s email address. |
data-rdm_firstName | The customer’s first name. |
data-rdm_tags | Customer tags joined by commas (e.g., “VIP,Subscriber”). |
data-rdm_lastName | The customer’s last name. |
⚠️ Note:
This data must be rendered dynamically from Shopify’s customer object (e.g., via the Storefront API or session data).
If the customer is not logged in, you can skip rendering customer fields or display an empty div with only data-rdm_domain — rediem will treat them as a guest.
Step 2: Load the rediem Script
After adding the container, load the rediem script (to be provided by Customer Support Team) on all pages where you want the widget to appear.
Insert the script after the container div or globally in your layout file.
The script automatically looks for the #rdmWidgetLoadDiv element and initializes the loyalty widget based on the provided customer data.
Step 3: Verify the Integration
Once the script is loaded and the customer data is passed:
Open the rediem Loyalty dash for a non-logged in experience.
Log in with a known customer account.
Post login, open the rediem widget to view logged in state and data according to provided customer details..
If the widget does not load:
Ensure the div ID is exactly rdmWidgetLoadDiv.
Confirm all data-rdm_* attributes are being populated correctly.
Step 4: Handling Guest Users
If a user is not logged in, you can still load the rediem script but omit customer-specific attributes.
Example:
<div
data-rdm_domain="{{ shop.domain }}"
id="rdmWidgetLoadDiv">
</div>
The rediem widget will display the non-logged in state until a customer logs in.
Next Steps
Once rediem is successfully integrated:
Configure your Loyalty Program rules and appearance in the rediem Admin Dashboard.
Test user flows for earning and redeeming rewards.
Implement handlers for adding product to cart and fetching cart data for Free and featured products functionality.