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🗂️
There are 2 ways to add the widget -:
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
