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

# Checkout Earn Widget

> Show customers the points they'll earn for this order, inside Shopify Checkout.

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

## Introduction

The Checkout Earn widget surfaces the points the customer will earn on this exact order, rendered natively inside Shopify Checkout via the Checkout UI extension.

## What problem this solves

Shopify Checkout is locked down — no theme code, no scripts. Without a Checkout UI extension, your loyalty value disappears at the moment customers reach for their wallet.

## Where it appears

* Shopify Checkout (information, shipping, payment pages).

## When to use

* You're on Shopify Plus or a plan with Checkout Extensibility.
* You want loyalty visibility through to payment, not just at cart.

## Overview

* Renders inside Shopify Checkout via the Checkout UI extension.
* Calculates earnable points for the current order.
* Customisable title and message.
* Plan-gated by Shopify.

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

<Check>Your Shopify plan supports Checkout Extensibility.</Check>
<Check>The Checkout UI extension has been activated — see [Activate the Checkout UI Extension](/installation-and-setup/checkout-ui-extension).</Check>

## Setup guide

### 1. Configure in Yuko

<Steps>
  <Step title="Open the widget settings">
    Go to **Apps → Yuko Loyalty → Loyalty → Widgets → Checkout Earn**.
  </Step>

  <Step title="Configure the title">
    Default: *“Earn `[points_label]`”*.
  </Step>

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

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

### 2. Add the widget in Shopify Checkout

<Steps>
  <Step title="Open the Checkout Editor">
    In your Shopify admin, go to **Settings → Checkout → Customize**.
  </Step>

  <Step title="Add the Yuko Checkout extension">
    In the editor, click **Add app block** in the section where you want the widget. Choose the relevant Yuko Checkout extension.
  </Step>

  <Step title="Position and save">
    Drag the block to its final position in the checkout and click **Save**.
  </Step>
</Steps>

<Info>
  Checkout UI extensions require **Shopify Plus** or a checkout-eligible plan. See [Theme compatibility & requirements](/getting-started/theme-compatibility).
</Info>

When choosing the placement, put the widget near the order summary or just above the payment section.

### 3. Verify

Proceed to a test checkout 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. Shopify renders the Yuko Checkout Earn extension at checkout.
2. The extension calls Yuko's API to fetch the customer's earning rate.
3. The earnable points for the current cart are calculated and displayed.

### Decision guidance

* **Place near the order summary** for visibility.
* **Place near payment** for last-second conversion.

### Limitations

* Requires Checkout Extensibility (Shopify Plus / eligible plans).
* Visual customisation is constrained by Shopify's extension surface.
* Guest checkouts may show a generic message until a customer record is created.

## Examples

* *"Earn 200 Stars for this purchase!"* placed above the payment section on a Plus checkout.

## Best practices

<Tip>**Test in a real checkout preview.** Shopify caches checkout layouts heavily; staging confirmations are unreliable.</Tip>

## FAQs

<AccordionGroup>
  <Accordion title="My checkout doesn't show the widget">
    Confirm Checkout Extensibility is enabled and the extension is added in the Checkout Editor. See [Activate the Checkout UI Extension](/installation-and-setup/checkout-ui-extension).
  </Accordion>

  <Accordion title="What about the Order Status / Thank-you page?">
    See [Order Status Earn Widget](/onsite-widgets/order-status-earn) — it's a separate widget that works on more plans.
  </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>