Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.yuko.so/llms.txt

Use this file to discover all available pages before exploring further.

Where to find this: Shopify admin → Apps → Yuko Loyalty → Loyalty → Widgets → Product Page Earn

​
Introduction

Display the points a customer will earn for buying this specific product, right on the product detail page.

​
What problem this solves

Customers who don’t realise they’re earning won’t change behaviour because of the program. Surfacing the earn value at the product page — the moment of consideration — lifts conversion and program enrollment.

​
Where it appears

  • Product detail pages on your storefront.

​
When to use

  • You want loyalty visible at the moment customers consider a purchase.
  • Your AOV is high enough that the per-product earn is meaningful.
  • You want to lift add-to-cart and product-page conversion rate.

​
Overview

  • Calculates per-product earn from the active price and earning rules.
  • Updates dynamically when variants change (theme-dependent).
  • Customisable message with placeholders.
  • Customisable icon and styling.

​
Before you start

Yuko app is installed on your Shopify store.
Your loyalty program is enabled.
The widget is set to Active in Shopify admin → Apps → Yuko Loyalty → Loyalty → Widgets.
Your active Shopify theme supports Online Store 2.0 app blocks.

​
Setup guide

​
1. Configure the widget in Yuko

1

Open the widget settings

In Shopify admin, go to Apps → Yuko Loyalty → Loyalty → Widgets → Product Page Earn.
2

Customise the message

Edit the displayed message. Default: “You’ll earn [points_value] [points_label] on this purchase!”
3

Customise icon and styling

Optional: swap the icon and adjust styling within branding constraints.
4

Activate

Toggle the widget Active.

​
2. Add the widget to your theme

1

Open the Theme Editor

In your Shopify admin, go to Online Store → Themes, find your active theme, and click Customize.
2

Pick the right template

Use the template selector at the top to open the page where this widget should appear (Product, Cart, etc.).
3

Add the Yuko app block

Click Add block in the section where you want the widget. Under Apps, select the Yuko block listed for this widget.
4

Position and save

Drag the block to your preferred position and click Save.
When choosing the page template, pick a Product template. Place the widget near the price or the Add to Cart button.

​
3. Verify

Open any product page on your live storefront and confirm the widget renders with the calculated points.

​
Available placeholders

PlaceholderReplaced with
[points_value]The numeric points value (per product, per cart or per order, depending on widget).
[points_label]Your configured points label (e.g., Points, Stars, Coins).
[point_balance]The customer’s current points balance.
[discount_expiry_date]The date a redeemed reward expires.
[next_tier]Name of the customer’s next VIP tier.
[tier_entry_amount]Spend or points threshold to reach the next tier.
[multiplier_value]Points multiplier applied at the customer’s current tier.

​
How it works

  1. Customer visits a product page.
  2. The widget runtime detects the active product variant.
  3. Yuko calculates the earnable points based on active Place an Order and similar campaigns, applying any VIP multiplier for logged-in customers.
  4. The result is rendered using your configured message.

​
Decision guidance

  • Place near the price for visibility.
  • Place near Add to Cart for conversion.
  • Use a clear icon (star, gift) so the message is scannable at a glance.

​
Limitations

  • Some themes don’t fire variant-change events; the widget may not update on variant selection in those cases.
  • For bundle products, the displayed value is the bundle’s parent price.
  • Logged-out customers see base earnings only — VIP multiplier requires login.

​
Examples

  • “Earn 50 Stars on this purchase!” with a star icon, placed below the price.
  • “You’ll earn 1 point per $1 spent on this product.” alternate format for points-per-spend programs.

​
Best practices

Keep the message under 10 words. Long copy gets lost on dense product pages.
Test on a few high-value products first before rolling out to all templates.

​
FAQs

Some themes don’t expose variant-change events. Update to a more recent Online Store 2.0 theme or contact your theme developer.
Not in v1. The widget shows the calculated earn including the VIP multiplier; the message text is shared.
No — it’s specific to product detail templates.

Product Page Earn

Show points earnable on product detail pages.

Cart Earn

Show total earnable points in cart.

Cart Redeem

Surface points balance and rewards in cart.

Checkout Earn

Show earnable points inside Shopify Checkout.

Checkout Redeem

Apply rewards inside Shopify Checkout.

Order Status Earn

Confirm earned points on the thank-you page.

Order List Balance

Show points balance on the order history page.

Customer Profile Balance

Show balance on the customer profile.

Customer Account Page

Loyalty hub inside Shopify customer accounts.

Rewards Landing Page

Standalone loyalty page for your storefront.

Floating Launcher

Persistent loyalty panel on every page.

Branding & Locale

Cross-widget styling, icons and language.

Theme App Embed

Required to render any storefront widget.

Checkout UI Extension

Show points and rewards inside Shopify checkout.

Customer Account Extension

Add the loyalty hub inside Shopify customer accounts.

Verify Your Setup

Confirm widgets render correctly on the live storefront.

Book a Free Setup Call

Talk to our team for personalised setup help.Time: 30 minutes

Contact Support

Visit our support hub for help articles, live chat and ticket submission.

Browse the Guides

Documentation across loyalty, referrals, memberships and more.

Install Yuko

Add Yuko to your Shopify store from the Shopify App Store.