Adding loyalty points via Shopify
In this tutorial, let's set up Shopify so that customers can earn loyalty points for completing their order and see their current loyalty balance in Shopify.
Talon.One requirements
- You are an Admin user.
- You have set up an Application and a campaign.
- You have set up a profile-based loyalty program.
Shopify requirements
- You are an Administrator user.
- You have completed the basic setup of the Talon.One Shopify app.
Setting up the integration
Create a rule in Talon.One
The Talon.One Shopify app automatically closes the customer's session in Talon.One after they complete their order.
So let's create a rule in your Talon.One campaign that awards 100 loyalty points whenever a customer session is closed:
What | Name | Properties |
---|---|---|
Conditions | Check for event types and custom event values |
|
Effects | Add loyalty points |
|
Display the loyalty balance in Shopify
Now that our loyalty program is working, we want to display the customer's loyalty balance in Shopify.
- Theme-based stores
- Headless stores
For theme-based stores, the app embed automatically fetches customer data from Talon.One and stores it in a customer metafield.
To retrieve the loyalty information from that metafield and display it in your online store:
-
In Shopify, open Online Store > Themes.
-
Find the theme that you want to edit and click Customize.
-
Open the store page that you want to customize.
-
In the sidebar, click Add section and choose Custom Liquid.
-
Add the following Liquid code, where
YOUR_LOYALTY_API_NAME
is the API name of your loyalty program in Talon.One:{% if customer %}
{% assign loyalty_data = customer.metafields.talon_one.data.value.loyalty.programs.YOUR_LOYALTY_API_NAME %}
<p>
<strong>Welcome, {{ customer.first_name }}!</strong>
{% if loyalty_data %}
You have collected {{ loyalty_data.ledger.currentBalance }} loyalty points.
{% endif %}
</p>
{% endif %}tip- To see the API name, open your loyalty program and click Settings > Basic Info.
- If you're only using a single loyalty program in your Application and want to avoid entering the API name, you can use
first[1]
:{% assign loyalty_data = customer.metafields.talon_one.data.value.loyalty.programs.first[1] %}
-
Click Save.
When you view your store, you'll see a new section with a welcome message and the customer's current loyalty balance.
To display the loyalty balance in a headless store:
-
Call the Retrieve customer data endpoint to fetch customer data. Calling the endpoint also stores the data in a customer metafield.
-
Use the
loyalty
object in the response or in the metafield to access the loyalty data, for example:{
"loyalty": {
"programs": {
"My_Loyalty_Program": {
"ledger": {
"currentBalance": 100,
"pendingBalance": 0,
"totalBalance": 100,
... // other properties
}
}
}
}
} -
Modify the template of your store to display the loyalty balance.
Add the metafield to the Shopify admin
To verify that the integration is working, you can add the metafield to the Shopify admin user interface.
This step is optional. The Talon.One Shopify app always syncs the metafield data, regardless of whether it is visible in the Shopify admin.
To add the metafield:
- In Shopify, open Settings > Metafields and metaobjects > Customers.
- Click View unstructured metafields.
- Next to talon_one.data, click Add definition.
- Enter a name for the metafield, for example,
Talon.One Customer Data
. - Click Select type and select JSON.
- Click Save.
Now, when you open a customer profile in the Shopify admin, you can see the metafield and the data stored for that customer.