> ## 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.

# Product Page Earn Widget

> Show customers how many points they will earn on a specific product, directly on the product detail page.

<Note>
  **Where to find this:** Shopify admin → Apps → Yuko Loyalty → Loyalty → Widgets → Product Page Earn
</Note>

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

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

## Setup guide

### 1. Configure the widget in Yuko

<Steps>
  <Step title="Open the widget settings">
    In Shopify admin, go to **Apps → Yuko Loyalty → Loyalty → Widgets → Product Page Earn**.
  </Step>

  <Step title="Customise the message">
    Edit the displayed message. Default: *“You'll earn `[points_value]` `[points_label]` on this purchase!”*
  </Step>

  <Step title="Customise icon and styling">
    Optional: swap the icon and adjust styling within branding constraints.
  </Step>

  <Step title="Activate">
    Toggle the widget **Active**.
  </Step>
</Steps>

### 2. Add the widget to your theme

<Steps>
  <Step title="Open the Theme Editor">
    In your Shopify admin, go to **Online Store → Themes**, find your active theme, and click **Customize**.
  </Step>

  <Step title="Pick the right template">
    Use the template selector at the top to open the page where this widget should appear (Product, Cart, etc.).
  </Step>

  <Step title="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.
  </Step>

  <Step title="Position and save">
    Drag the block to your preferred position and click **Save**.
  </Step>
</Steps>

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

| Placeholder              | Replaced 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

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

## FAQs

<AccordionGroup>
  <Accordion title="Why doesn't the widget update when I change variants?">
    Some themes don't expose variant-change events. Update to a more recent Online Store 2.0 theme or contact your theme developer.
  </Accordion>

  <Accordion title="Can I show a different message for VIP customers?">
    Not in v1. The widget shows the calculated earn including the VIP multiplier; the message text is shared.
  </Accordion>

  <Accordion title="Does this widget work on collection pages?">
    No — it's specific to product detail templates.
  </Accordion>
</AccordionGroup>

## Related

<CardGroup cols={3}>
  <Card title="Loyalty Nudges" icon="bell" href="/onsite-widgets/loyalty-nudges">
    Pinned strip + drawer on every page — your booster promotion surface.
  </Card>

  <Card title="Product Page Earn" icon="bag-shopping" href="/onsite-widgets/product-page-earn">
    Show points earnable on product detail pages.
  </Card>

  <Card title="Cart Earn" icon="cart-plus" href="/onsite-widgets/cart-earn">
    Show total earnable points in cart.
  </Card>

  <Card title="Cart Redeem" icon="gift" href="/onsite-widgets/cart-redeem">
    Surface points balance and rewards in cart.
  </Card>

  <Card title="Checkout Earn" icon="cash-register" href="/onsite-widgets/checkout-earn">
    Show earnable points inside Shopify Checkout.
  </Card>

  <Card title="Checkout Redeem" icon="ticket" href="/onsite-widgets/checkout-redeem">
    Apply rewards inside Shopify Checkout.
  </Card>

  <Card title="Order Status Earn" icon="circle-check" href="/onsite-widgets/order-status-earn">
    Confirm earned points on the thank-you page.
  </Card>

  <Card title="Order List Balance" icon="receipt" href="/onsite-widgets/order-list-balance">
    Show points balance on the order history page.
  </Card>

  <Card title="Customer Profile Balance" icon="id-badge" href="/onsite-widgets/customer-profile-balance">
    Show balance on the customer profile.
  </Card>

  <Card title="Customer Account Page" icon="user" href="/onsite-widgets/customer-account-page">
    Loyalty hub inside Shopify customer accounts.
  </Card>

  <Card title="Rewards Landing Page" icon="window-maximize" href="/onsite-widgets/rewards-landing-page">
    Standalone loyalty page for your storefront.
  </Card>

  <Card title="Floating Launcher" icon="circle-arrow-up" href="/onsite-widgets/floating-launcher">
    Persistent loyalty panel on every page.
  </Card>

  <Card title="Branding & Locale" icon="palette" href="/onsite-widgets/branding-and-locale">
    Cross-widget styling, icons and language.
  </Card>
</CardGroup>

<CardGroup cols={2}>
  <Card title="Theme App Embed" icon="plug" href="/installation-and-setup/theme-app-embed">
    Required to render any storefront widget.
  </Card>

  <Card title="Checkout UI Extension" icon="cart-shopping" href="/installation-and-setup/checkout-ui-extension">
    Show points and rewards inside Shopify checkout.
  </Card>

  <Card title="Customer Account Extension" icon="user" href="/installation-and-setup/customer-account-extension">
    Add the loyalty hub inside Shopify customer accounts.
  </Card>

  <Card title="Verify Your Setup" icon="circle-check" href="/installation-and-setup/verify-setup">
    Confirm widgets render correctly on the live storefront.
  </Card>
</CardGroup>

<CardGroup cols={2}>
  <Card title="Book a Free Setup Call" icon="phone" href="https://cal.com/rameshelamathi/yuko-demo">
    Talk to our team for personalised setup help.

    **Time:** 30 minutes
  </Card>

  <Card title="Contact Support" icon="life-ring" href="https://yuko.so/support/">
    Visit our support hub for help articles, live chat and ticket submission.
  </Card>

  <Card title="Browse the Guides" icon="book" href="/getting-started/welcome">
    Documentation across loyalty, referrals, memberships and more.
  </Card>

  <Card title="Install Yuko" icon="shop" href="https://apps.shopify.com/yuko">
    Add Yuko to your Shopify store from the Shopify App Store.
  </Card>
</CardGroup>