# Theme Integration

{% hint style="info" %}
This feature is available for **All** plans.
{% endhint %}

### What is this feature?

The Joy Loyalty theme integration feature allows you to display customer point balances in strategic locations across your storefront, such as:

* Navigation menu
* Account page
* Cart page
* Product pages
* Custom page templates

By adding a simple code snippet to your theme files, you can show customers their current point balance without requiring them to open the loyalty widget. This creates a more integrated loyalty experience and keeps points top-of-mind during the shopping journey, and later on increase loyalty program visibility.

### Requirements before using this feature

To integrate Joy Loyalty points display into your theme, you need:

1. An active Joy Loyalty account
2. Basic understanding of Shopify Liquid code
3. Access to your Shopify theme code editor
4. Customer accounts are enabled in your store

### Why use this feature

Displaying loyalty points throughout your storefront increases program visibility and engagement. When customers can easily see their point balance while browsing products or checking their account, they're more likely to:

* Remember they have points to redeem
* Be motivated to earn additional points through purchases
* Feel recognized as loyal customers
* Experience a more integrated loyalty journey

This integration helps maximize the value of your loyalty program by keeping it visible throughout the customer experience rather than hidden behind a widget.

### Use case 1: Show on your header

{% embed url="<https://go.screenpal.com/watch/cTinbgnl2JK>" %}

#### Step 1: Add the snippet to your header

Add the below snippet code into `sections/header.liquid` file to show customer points and tier level on all pages of your store. Feel free to customize the information you want to show. You may want to greet the customer by Mr + last name, or you do not want to show the tier name, feel free to reach out to our chat support if you need any further customization.

```liquid
{%- if shop.customer_accounts_enabled -%}
     {%- if customer -%}
         <style>
           @media screen and (max-width: 749px) {
                .joy-small-hide {
                    display: none !important;
                }
            }
         </style>
          <div class="joy-small-hide" onclick="avadaJoyTrigger();" style="cursor:  pointer; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; margin-left: 8px; margin-right: 8px; line-height: 1.2;">
            <div style="font-size: 12px; color: #ffffff;">Hi, {{ customer.first_name }}!</div>
            {%- if customer.metafields.avada_joy.point or customer.metafields.avada_joy.vipTier.tierName -%}
              <div style="font-size: 12px; color: #ffffff;">
                {%- assign aj_point = customer.metafields.avada_joy.point | split: '' -%}
                {%- for digit in aj_point -%}
                  {%- assign threeFromEnd = aj_point.size | minus: forloop.index | modulo: 3 -%}
                  {%- if threeFromEnd == 2 and forloop.index != 1 -%}{{ digit | prepend: ',' }}{%- else -%}{{ digit }}{%- endif -%}
                {% endfor %}
                {{ aj_point | pluralize: 'point', 'points' }} {% if customer.metafields.avada_joy.vipTier.tierName %}| {{ customer.metafields.avada_joy.vipTier.tierName }} tier {% endif %}
              </div>
            {%- endif -%}
          </div>
        {%- endif -%}
{%- endif -%}
```

{% hint style="info" %}
Do not format the liquid code snippet, just copy and paste it into your theme file. If not, the point balance number formatting will not be displayed correctly.
{% endhint %}

<figure><img src="https://1367962225-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FpAxc1paAgix94BNLrez8%2Fuploads%2Fgit-blob-e4090d21977b8ab55e4c8112e60b4318d65a74b2%2Fimage%20(482).png?alt=media" alt=""><figcaption></figcaption></figure>

#### Step 2: Mobile menu

Go to `snippets/header-drawer.liquid` and add the following snippet under your My Account link. This snippet does not set the color to white like the above snippet, because the cart drawer in this example has a dark background color.

```liquid
<div onclick="avadaJoyTrigger();" style="line-height: 1.2;">
  <div style="font-size: 12px; ">Hi, {{ customer.first_name }}!</div>
  {%- if customer.metafields.avada_joy.point or customer.metafields.avada_joy.vipTier.tierName -%}
    <div style="font-size: 12px; ">
      {%- assign aj_point = customer.metafields.avada_joy.point | split: '' -%}
      {%- for digit in aj_point -%}
        {%- assign threeFromEnd = aj_point.size | minus: forloop.index | modulo: 3 -%}
        {%- if threeFromEnd == 2 and forloop.index != 1 -%}{{ digit | prepend: ',' }}{%- else -%}{{ digit }}{%- endif -%}
      {% endfor %}
      {{ aj_point | pluralize: 'point', 'points' }} {% if customer.metafields.avada_joy.vipTier.tierName %}| {{ customer.metafields.avada_joy.vipTier.tierName }} tier {% endif %}
    </div>
  {%- endif -%}
</div>
```

#### **Step 3: View the result**

On the storefront, you should see the snippet is now showing. When you click on the snippet, it will open up the Joy loyalty widget. On mobile, the snippet will be hidden and only show the one in the header drawer.

<figure><img src="https://1367962225-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FpAxc1paAgix94BNLrez8%2Fuploads%2Fgit-blob-f49542a525f213a5928a1d060f313c168b3b1318%2Fimage%20(483).png?alt=media" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1367962225-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FpAxc1paAgix94BNLrez8%2Fuploads%2Fgit-blob-e33a1ffbfd385bbf6207ff02eba3aa9b5f02cf25%2Fimage%20(136).png?alt=media" alt=""><figcaption></figcaption></figure>

### **Use case 2: Customer Account Page**

#### **Step 1:** Copy the code snippet

```
 {%- if customer.metafields.avada_joy.point or customer.metafields.avada_joy.vipTier.tierName -%}
  <p>Point balance: {{ ' ' }}
    {%- assign aj_point = customer.metafields.avada_joy.point | split: '' -%}
    {%- for digit in aj_point -%}
      {%- assign threeFromEnd = aj_point.size | minus: forloop.index | modulo: 3 -%}
      {%- if threeFromEnd == 2 and forloop.index != 1 -%}{{ digit | prepend: ',' }}{%- else -%}{{ digit }}{%- endif -%}
    {% endfor %}
    {{ aj_point | pluralize: 'point', 'points' }}
    {%- if customer.metafields.avada_joy.vipTier.tierName -%}
      <br>
      Tier: {{ customer.metafields.avada_joy.vipTier.tierName -}}
    {%- endif %}
  </p>
{%- endif -%}
```

#### Step 2: Add the snippet to your theme

You can add code to `sections/main-account.liquid` file to show the point balance on the customer's account page when they are logged in.

<figure><img src="https://1367962225-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FpAxc1paAgix94BNLrez8%2Fuploads%2Fgit-blob-4fff895d19d4f46168b61ecdf262ec85dcc28fad%2Fimage%20(484).png?alt=media" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
The customer account page already has the Customer Account block, you can use it instead. If you want a more customizable approach, you can use this.
{% endhint %}

#### Step 3: View results on your storefront

<figure><img src="https://1367962225-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FpAxc1paAgix94BNLrez8%2Fuploads%2Fgit-blob-87743a11844057c53c1a4f536eb6770ff2005870%2Fimage%20(486).png?alt=media" alt=""><figcaption></figcaption></figure>

### Best practices

For effective Joy Loyalty points integration:

* **Be consistent**: Place the points display in locations that make sense for your store layout
* **Keep it visible**: Position the points where customers will notice them without being intrusive
* **Match your branding**: Style the points display to match your site's design
* **Test thoroughly**: Check the display across different devices and account states
* **Consider context**: Place points in locations relevant to redemption opportunities

### Frequently Asked Questions

**Q: Will the points display update automatically when customers earn or redeem points?**\
A: Yes, the display pulls data from customer metafields that automatically update when point balances change.

**Q: Can I display other loyalty information besides points?**\
A: Yes, you can access additional loyalty data through customer metafields. Contact Joy support for specific metafield references.

**Q: Will this code work with all Shopify themes?**\
A: The code should work with most themes, but you may need to adjust it slightly for compatibility with specific theme structures.

**Q: What happens if I update my theme?**\
A: Theme updates may overwrite your customizations. Make sure to back up your code and reapply it after updates.

**Q: Can I make the points clickable to open the loyalty widget?**\
A: Yes, the provided code already includes the `avadaJoyTrigger()` function, which opens the loyalty widget when clicked.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.joy.so/integrations/theme-integration.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.