Introduction
Loyalty reward widgets are small, customizable tools that can be added to a website or web page to display information about a loyalty program and allow customers to interact with it.
These widgets can be a useful way to promote and manage a loyalty program, as they can provide customers with easy access to their loyalty account and rewards information.
Overview🗂️
Workflow
To access all the below codes: Go to Loyalty Rewards > Display On Store
To show You earn X points on this purchase
To learn more, Click here
To Show Customer Available Points
Step 1: Copy below shortcode
<span class="aaa-ly-cus-available-p"> </span>
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
To Show Customer Lifetime Points
Here are the steps for setting up the widget:
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 it.
To Show Customer Spent Points
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 liquid file (files can be chosen from suggestions).
Step 3: Paste the copied shortcode where you require it and save.
Setup Points Redemption Widget on Cart
Step 1: Copy below shortcode
<div class="aaa-loyalty-cartredeem-widget"></div>
Step 2: Go to Online-store → Themes → Actions (Published theme) → Edit code → Open file “cart-template.liquid” under “Sections”.
Step 3: Paste the copied shortcode where you want to show the widget in the file and save.
Step 4: If you have a non-sectioned theme (no files are available under sections), then paste the copied shortcode in cart-template.liquid file under Templates after the </form> tag and save.
Next➡️
💡Tips for Loyalty Reward Program