Theme Integration

This guide explains how to integrate Joy Loyalty points display into various areas of your Shopify theme, allowing customers to see their point balance.

This feature is available for All plans.

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.

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

How to use code snippet to show points on your storefront

Adding the loyalty points display to your storefront requires adding a simple code snippet to your theme files.

Step 1: Copy the code snippet

{%- if shop.customer_accounts_enabled -%}
  <a type="button" href="#" class="btn--link" onclick="avadaJoyTrigger();" style="line-height: 40px; cursor: pointer">
    {%- if customer -%}
      {%- 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 %}
      {{ customer.metafields.avada_joy.point | pluralize: 'Point', 'Points' }}
    {%- else -%}
      Rewards
    {%- endif -%}
  </a>
{%- endif -%}

Step 2: Add the snippet to your theme

You can add this code to various locations in your theme files. Here are two common examples:

Example 1: Navigation Menu Integration

To display points in your site header or navigation menu:

1. From your Shopify admin, go to Online Store > Themes

2. Find your current theme and click Actions > Edit code

3. In the theme files, locate and open the sections/header.liquid file

4. Find the appropriate location within your navigation menu structure

5. Paste the code snippet where you want the points to appear

6. Click Save

Example 2: Customer Account Page Integration

To display points on the customer account page:

1. From your Shopify admin, go to Online Store > Themes

2. Find your current theme and click Actions > Edit code

3. In the theme files, locate and open the templates/customers/account.liquid file

4. Find a suitable location on the account page

5. Paste the code snippet where you want the points to appear

6. Click Save

Step 3: View results on your storefront

After adding the code:

1. Visit your store's front end

2. Log in as a customer

3. Navigate to the page where you added the code

4. Verify that the points display appears correctly

5. Test the functionality by clicking on the points display (it should open the loyalty widget)

Customizing the points display

You can customize the appearance of the points display by modifying the HTML and CSS in the code snippet:

• Change style="line-height: 40px; cursor: pointer" to adjust spacing and cursor behavior

• Add additional CSS classes to match your theme's styling

• Modify the text displayed for logged-out customers (default is "Rewards")

• Add icons or additional text before or after the points

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.