Configure Theme to Show Loyalty Points Balance | Enhance Customer Visibility with AiTrillion

Configure the Theme to Display Loyalty Points Balance

Introduction

In this article, we will walk you through the step-by-step process of configuring your website’s theme to display a points balance effectively. Whether you are using a pre-built theme or customizing one to fit your brand, these best practices will help you create a seamless and visually appealing experience for your users. Let’s get started!


There are 4 widgets that can be configured to show the loyalty points balance:

1. Customer available points - 




2. Customer lifetime points - 



3. Customer spent points -


4.) Earn Points - To set up the earn point widget - Click here.


Below are the steps and the types of widgets available:

Following loyalty reward points balance can be shown in the Shopify store :

1) Customer available points

Here are the steps for setting up the widget:

Step 1: Copy below shortcode

<span class="aaa-ly-cus-available-p"> </span>

Step 2: Go to Online-store → Themes → Actions(Published theme) → Edit code → Open a liquid file (files can be chosen from suggestions).

Step 3: Paste the copied shortcode where you need it and save it.

B) Customer lifetime points

The steps for setting up the widget are:

Step 1: Copy below shortcode

<span class="aaa-ly-cus-lifetime-p"> </span>

Step 2: Go to Online-store → Themes → Actions (Published theme) → Edit code → Open a liquid file (files can be chosen from suggestions).

Step 3: Paste the copied shortcode where you require it and save.

C) Customer spent points

Follow the below steps for setting up the widget:

Step 1: Copy below shortcode

<span class="aaa-ly-cus-spent-p"> </span>

Step 2: Go to Online-store → Themes → Actions(Published theme) → Edit code → Open a liquid file (files can be chosen from suggestions).

Step 3: Paste the copied shortcode where you require it and save.

Suggestions to put the shortcode in sectioned themes:

You can choose from below suggested “.liquid” files accordingly for pasting shortcodes and displaying customer points on specific pages:

1. Product Page → Paste the copied shortcode in the “product-template.liquid” file under “Sections” to show points

2. Account Page → Paste the copied shortcode in the “customer/accounts.liquid” file under “Templates” for showing points.

3. Home Page → Paste the copied shortcode in any “.liquid” file under Sections on the home page for showing points.

4. Collection Page → Paste the copied shortcode in the “product-grid-item.liquid” file under “Snippets” for showing points.

5. Cart Page → Paste the copied shortcode in “cart.liquid” file under “Sections” for showing points.

🚨If you have a non-sectioned theme (no files available under sections) then choose and paste the copied shortcode in the files suggested for non-sectioned themes.


Suggestions to put the shortcode in non-sectioned themes:

You can choose from the below suggested “.liquid” files accordingly for pasting shortcodes and displaying customer points on specific pages:

1. Product Page → Paste the copied shortcode in the “product.liquid” file under “Templates” to display the points.

2. Account Page → Paste the copied shortcode in the “customer/accounts.liquid” file under “Templates” to display the points.

3. Home Page → Paste the copied shortcode in the “index.liquid” file under “Templates” for showing points to any home page section. Find the keyword “include” if any snippet has been included, open that file under “Snippets” and paste the shortcode there.

4. Collection Page → Paste the copied shortcode in the ”collection.liquid” file under “Templates” for showing points. Find the keyword “include” if any snippet has been included, open that file under “Snippets” and paste the shortcode there.

5. Cart Page → Paste the copied shortcode in the “cart.liquid” file under “Templates”to display points.


Important Notes

  • Customers must be logged in to see their available, spent, or lifetime loyalty points.

  • Always make a backup of your theme before editing theme files.

  • After adding or updating shortcodes in theme files, changes may take up to 15 minutes to reflect on the storefront.

  • Ensure shortcodes are pasted in the correct theme files (product, account, cart, or collection templates) based on where you want the points to appear.

  • For sectioned themes (Online Store 2.0), add the shortcode inside the appropriate section or block rather than older template files.

  • Avoid placing the same shortcode multiple times on a single page, as it may cause display issues.


Next ⏭️

More Helpful Articles

    • Related Articles

    • AiTrillion's Loyalty Rewards Program

      Watch the 5-minute loyalty setup video Introduction This article will walk you through how the Loyalty Rewards Program in AiTrillion works, the different types of rewards you can offer, and how it helps increase customer retention, lifetime value, ...

    • Configure the display of loyalty rewards

      Introduction Welcome to the world of Loyalty Rewards in AiTrillion! In this article, we'll show you how to showcase your Loyalty Rewards program directly on your store, engaging your customers and enticing them to participate. By displaying your ...

    • Configure loyalty points expiry

      Introduction In this article, you'll gain insights into setting up the expiration of loyalty points and ensuring effective management and incentivization within your loyalty program. Below are the steps to configure Loyalty Points Expiry: Step 1: Go ...

    • Display and Customize the Earn Points Widget

      Introduction In this article, we'll explore how to display the "Earn Points" widget on your store's product detail & collection page and the benefits it brings to your overall customer retention strategy Overview?️ Display earn point widget ...

    • Loyalty points based on tags

      Introduction Awarding loyalty points based on customer tags allows you to create more personalized and targeted rewards within your loyalty program. By using tags, you can automatically grant points to specific customer groups, recognize special ...