Product Page Earn Widget - Yuko Documentation

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

Introduction

The Product page widget shows the points a customer will earn by buying the product they’re looking at, right on the product detail page.

What problem this solves

Customers who don’t realise they’re earning won’t change their behaviour because of the program. Showing the earn value on the product page, while the customer is deciding, makes the program visible at the right moment.

Where it appears

Product detail pages, wherever you place the Yuko:Product Earn Message theme app block.

When to use

You want loyalty visible while customers consider a purchase.
Your order values are high enough that the per-product earn is meaningful.

Overview

One message field with placeholders.
Default or custom icon.
Styles tab with colours, padding, width, height and Custom CSS.
Updates when the customer switches variants.
Edit the text per language with the Editing language picker.

Before you start

Yuko is installed on your Shopify store.

The program this widget belongs to is set up and enabled.

The widget is switched on with the toggle on its card in Yuko’s Widgets page (for loyalty widgets, Shopify admin → Apps → Yuko Loyalty → Loyalty → Widgets).

For storefront widgets, your active theme is an Online Store 2.0 theme that supports app embeds and app blocks.

Setup guide

Open the widget settings

Go to Loyalty → Widgets, find Product page under Shopping Cart, and click Customize.

Edit the message

Points earned on product page. Default: You'll earn [points_value] [points_label] on this purchase!

Choose an icon

Under Customize product message icon, keep Default or choose Custom to upload your own icon (JPG, PNG, GIF or WEBP, under 1 MB).

Adjust styles (optional)

On the Styles tab, set:

Color Configuration: Border color, Background color, Text color and Button background color.
Widget Style: Padding (px, default 10), Width (%, default 100) and Height (px, leave empty for automatic).
Custom CSS: add your own CSS rules for this widget.

Save and enable

Click Save. Back on Loyalty → Widgets, switch the widget’s toggle on.

2. Add the block to your product template

The widget editor shows an Add Block button that opens the theme editor on your product template with the block ready to add. You can also add it manually:

Turn on the Yuko App embed

Theme blocks get their content from Yuko’s storefront script, which loads through the Yuko App app embed. If you haven’t already, enable it in Online Store → Themes → Customize → App embeds. See Theme App Embed.

Open the Theme Editor

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

Pick the right template

Use the template selector at the top to open the page where this widget should appear (Product, Cart, a page template, and so on).

Add the Yuko app block

Click Add block in the section where you want the widget. Under Apps, select the Yuko block named for this widget (block names start with Yuko:).

Position and save

Drag the block to your preferred position and click Save.

Pick a Product template and add the Yuko:Product Earn Message block (no space after the colon). Place it near the price or the Add to cart button. The block has no theme editor settings; all text and styling come from Yuko. Once the block is added, the widget editor shows a banner confirming it.

3. Verify

Open a product page on your live store and check that the message shows the calculated points.

Available placeholders

Placeholder	Replaced with
`[points_value]`	Total points earned with the purchase.
`[points_label]`	Your loyalty points label.
`[points_cash_value]`	Cash value of the points earned.

See the full placeholder reference below.

How it works

A customer opens a product page that has the block.
Yuko reads the selected variant’s price and works out the points from your active earn rules.
When the customer switches variants, the message updates to the new variant’s price.

Limitations

The block shows only on templates where you’ve added it.
The widget has no Custom placement field; position it with the theme editor.

Best practices

Keep the message short. Under 10 words is easy to scan on a busy product page.

Use Custom CSS sparingly. Small spacing or font tweaks are usually enough to match your theme.

FAQs

I enabled the widget but nothing shows on the product page

Does this widget work on collection pages?

Can I translate the message?

Yes. Use the Editing language picker at the top of the widget editor to set the text for each language published in your store.

Full placeholder reference

Placeholders are written in square brackets, for example [points_label]. Each text field’s help text in the widget editor lists the placeholders that field supports. Available in every storefront widget text

Placeholder	Replaced with
`[points_label]`	Your points label from Loyalty → Settings (singular or plural, e.g. point / points).
`[point_balance]`	The customer’s current points balance.
`[points_cash_value]`	What the customer’s balance is worth in your store currency, based on your points-to-cash conversion rate.
`[store_name]`	Your store name.

Widget-specific placeholders

Placeholder	Replaced with	Used in
`[points_value]`	Points the customer can earn on this product, cart or order.	Product page, Cart earn, Checkout earn, Order status earn
`[first_name]`	The customer’s first name (logged-in customers only).	Cart redeem greeting, Loyalty Nudges
`[customer_name]`	The customer’s full name (logged-in customers only).	Loyalty Nudges
`[points_needed]`	How many more points the customer needs for a reward.	Insufficient-points text (Cart redeem, Loyalty Nudges)
`[expiration_date]`	The expiry date of an earned reward. Hidden automatically when the reward doesn’t expire. `[discount_expiry_date]` works the same way.	Reward expiry text (Cart redeem, Loyalty Nudges, Floating Rewards)
`[points_to_redeem]`	The number of points the customer chose to redeem.	Checkout redeem summary
`[discount_value]`	The discount those points unlock.	Checkout redeem summary
`[tier_name]`	A VIP tier name.	VIP tier text (Floating Rewards)
`[next_tier]`	The name of the customer’s next VIP tier.	VIP progress text
`[tier_entry_amount]`	The threshold needed to enter a tier.	Cart redeem tier entry text
`[tier_reach_level]`	The threshold needed to reach a tier.	Floating Rewards VIP text
`[multiplier_value]`	The points multiplier for a VIP tier (e.g. 2). Shown only when the multiplier is greater than 1.	Points multiplier benefit text
`[renewal_date]`	The date a paid membership renews.	Floating Rewards membership text

Floating Rewards

Floating button and loyalty panel on every page.

Rewards Landing Page

A dedicated loyalty page built from seven theme blocks.

Loyalty Nudges

Pinned strip and drawer on every page, ideal for boosters.

Product Page Earn

Show points to earn on product pages.

Cart Earn

Show points to earn on the cart.

Cart Redeem

Let customers redeem points and apply rewards in the cart.

Checkout Earn

Show points to earn in Shopify Checkout (Shopify Plus).

Checkout Redeem

Redeem points and apply rewards in Shopify Checkout (Shopify Plus).

Order Status Earn

Show points earned on the order status page in customer accounts.

Order List Balance

Show the points balance on the Orders page in customer accounts.

Customer Profile Balance

Show loyalty details on the Profile page in customer accounts.

Customer Account Page

A full loyalty page inside Shopify customer accounts.

Branding & Locale

Colour palettes for all widgets, and per-language widget text.

Theme App Embed

The Yuko App embed that powers Floating Rewards, Loyalty Nudges and the theme blocks.

Checkout UI Extension

Add the earn and redeem blocks to Shopify Checkout (Shopify Plus).

Customer Account Extension

Add the loyalty blocks and full loyalty page to 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.

​Introduction

​What problem this solves

​Where it appears

​When to use

​Overview

​Before you start

​Setup guide

​1. Configure the widget in Yuko

​2. Add the block to your product template

​3. Verify

​Available placeholders

​How it works

​Limitations

​Best practices

​FAQs

​Full placeholder reference

​Related

Floating Rewards

Rewards Landing Page

Loyalty Nudges

Product Page Earn

Cart Earn

Cart Redeem

Checkout Earn

Checkout Redeem

Order Status Earn

Order List Balance

Customer Profile Balance

Customer Account Page

Branding & Locale

Theme App Embed

Checkout UI Extension

Customer Account Extension

Verify Your Setup

Book a Free Setup Call

Contact Support

Browse the Guides

Install Yuko

Introduction

What problem this solves

Where it appears

When to use

Overview

Before you start

Setup guide

1. Configure the widget in Yuko

2. Add the block to your product template

3. Verify

Available placeholders

How it works

Limitations

Best practices

FAQs

Full placeholder reference

Related