# Add 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.

> For the complete documentation index, see [llms.txt](https://docs.talon.one/llms.txt).

## Talon.One requirements

- You are an [admin](/docs/product/account/account-settings/manage-roles.md#admin-role)
  user.
- You have set up an [Application](/docs/product/applications/create-and-manage-applications.md) and a
  [campaign](/docs/product/campaigns/create-and-manage-campaigns.md).
- You have set up a
  [profile-based loyalty program](/docs/product/loyalty-programs/profile-based/create-pb-programs.md).

## Shopify requirements

- You are an
  [administrator](https://help.shopify.com/en/manual/your-account/staff-accounts/staff-roles/staff-roles-descriptions)
  user.
- You have completed the
  [basic setup](set-up-shopify-app.md) of the Talon.One
  Shopify app.

## Set up the integration

<StepsContainer>

### Create a rule in Talon.One

The Talon.One Shopify app automatically
[closes the customer's session](integrate-with-shopify.md#customer-session-data) in
Talon.One after they complete their order.

So let's create a [rule](/docs/product/rules/overview.md) in your Talon.One
[campaign](/docs/product/campaigns/overview.md) that awards 100 loyalty points whenever a
customer session is closed:

| What           | Name                                               | Properties                                                                                                                                                                                              |
| -------------- | -------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Conditions** | Check for event typesand custom event values | **Event type**: `Customer Session Closing`                                                                                                                                            |
| **Effects**    | Add loyalty points                                 | **Loyalty program**: Select the loyalty program you created.**Recipient**: `Current Customer (Friend)`**Reason**: `Order bonus`**Amount of points**: `100` |

### Display the loyalty balance in Shopify

Now that our loyalty program is working, we want to display the customer's loyalty balance
in Shopify.

<Tabs>
<TabItem value="theme" label="Theme-based stores" default>
For [theme-based](https://shopify.dev/docs/storefronts/themes) stores, the
[app embed](set-up-shopify-app.md#enable-the-app-embed) automatically fetches
[customer data](integrate-with-shopify.md#customer-data) from Talon.One and stores it in
a customer [metafield](https://help.shopify.com/en/manual/custom-data/metafields).

To retrieve the loyalty information from that metafield and display it in your online
store:

1. In Shopify, open **Online Store** > **Themes**.
1. Find the theme that you want to edit and click **Edit theme**.
1. Open the store page that you want to customize.
1. In the sidebar, click **Add section** and choose **Custom Liquid**.
1. Add the following [Liquid](https://shopify.dev/docs/api/liquid/) code, where
   `YOUR_LOYALTY_API_NAME` is the API name of your loyalty program in Talon.One:

   ```liquid
   {% if customer %}
     {% assign loyalty_data = customer.metafields.talon_one.data.value.loyalty.programs.YOUR_LOYALTY_API_NAME %}
     
       Welcome, {{ customer.first_name }}!
       {% if loyalty_data %}
         You have collected {{ loyalty_data.ledger.currentBalance }} loyalty points.
       {% endif %}
     
   {% endif %}
   ```

   :::tip
   - To see the API name, open your loyalty program and click <Settings className="icon"/>
     **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] %}`
   :::
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.

</TabItem>
<TabItem value="headless" label="Headless stores">
To display the loyalty balance in a
[headless](https://shopify.dev/docs/storefronts/headless/getting-started) store:

1. Call the
   [Retrieve customer data](/shopify-integration-api#tag/Customer-profiles/operation/getCustomerHeadless)
   endpoint to fetch customer data. Calling the endpoint also stores the data in a
   customer [metafield](https://help.shopify.com/en/manual/custom-data/metafields).
1. Use the `loyalty` object in the response or in the metafield to access the loyalty
   data, for example:

   ```json
   {
     "loyalty": {
       "programs": {
         "My_Loyalty_Program": {
           "ledger": {
             "currentBalance": 100,
             "pendingBalance": 0,
             "totalBalance": 100,
             ... // other properties
           }
         }
       }
     }
   }
   ```
1. Modify the template of your store to display the loyalty balance.

</TabItem>
</Tabs>

### 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.

:::note
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:

1. In Shopify, open **Settings** > **Metafields and metaobjects** > **Customers**.
1. Click **View unstructured metafields**.
1. Next to **talon_one.data**, click **Add definition**.

   :::note
   The **Add definition** button only appears after Shopify has successfully received
   customer data.
   :::

1. Enter a name for the metafield, for example, `Talon.One Customer Data`.
1. Click **Select type** and select **JSON**.
1. 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.

</StepsContainer>