Display and Customize Earn Points Widget | Boost Loyalty Engagement with AiTrillion

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

Customization


Notes
Note: To add the widget to the collection page and product page specifically for varient, click here.


There are 2 ways to add the widget -:

  1. Via Shopify app block

  2. Via Shortcode


Via Shopify app block

Here are the steps to display the earn point widget:

Step 1: Login to Shopify admin >> Online store >> Themes >> Customize




Step 2: Click on the Home page, search for 'Default Product,' and then add the 'Earn Points' widget block above the price.




Via Shortcode

Step 1: Copy the below shortcode

Product details page

<div class="aaa-lyt-make-a-purchase-point-widget" data-product-price="{{ product.price }}"> </div>

Collection page

<div class="aaa-lyt-make-a-purchase-point-collection-widget" data-product-price="{{ card_product.price }}"> </div>

Step 2: Log in to your Store admin → 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 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-template.liquid” file under “Sections” for showing points.

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

3. Home Page → Paste the copied shortcode in the “index.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 the “cart.liquid” file under “Sections” for showing points.


Notes

Note: 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” for showing 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 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 “cart.liquid” file under “Templates” to show points


Customization

Here are the steps for customization:

Step 1: Go to Loyalty rewards >> Display on store >> Widgets




Step 2: Change the text & color according to your need



Now it will be visible to the front store


Product details page



Collection page



Next⏭️


More Helpful Articles


    • Related Articles

    • Customize loyalty popup panel

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

    • Redeemed the points into store credit from the front store loyalty popup

      Introduction Offering store credit redemption directly from the front store is a fantastic way to enhance the customer experience and build loyalty. By allowing customers to easily redeem their earned credits during checkout, you streamline the ...

    • Cart widget points

      Introduction The Cart Widget Points feature allows customers to redeem loyalty points directly from the cart page. By displaying point information at the cart level, you can increase transparency, encourage higher order values, and motivate customers ...

    • Set up the method by which customers can earn points

      Watch a quick video to understand the Earn Points setup Introduction Earn Points Activities allow you to reward customers with loyalty points for specific actions they take on your store. These activities help increase engagement, repeat visits, and ...

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