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

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

Via Shopify app block
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 shortcode below

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.

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