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
​
There are 2 ways to add the widget -:
-
Via Shopify app block
-
Via Shortcode
Via Shopify app block
Here are the steps to display 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 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.
🚨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
Related Articles
Cart widget points
Introduction In this comprehensive article, we'll walk you through the steps to configure Cart Widget Points, enabling you to display customers' loyalty points directly in their shopping carts. Here are the below steps to set Cart Widget Points: Step ...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 ...Add a thank-you widget to share on Facebook
Introduction In this article, we'll walk you through the steps to set up a thank-you popup that encourages customers to share their experiences on Facebook. This feature allows you to leverage social media engagement and expand your brand's reach ...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 ...Earn point activity for Refer a Friend
Introduction Discover how to set up the "Refer a Friend" feature in your Loyalty Program with AiTrillion. By enabling this functionality, you can empower your customers to become brand advocates and expand your customer base through referrals. Follow ...