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 → Checkout Earn

​
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

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.
Your Shopify plan supports Checkout Extensibility.
The Checkout UI extension has been activated — see Activate the Checkout UI Extension.

​
Setup guide

​
1. Configure in Yuko

1

Open the widget settings

Go to Apps → Yuko Loyalty → Loyalty → Widgets → Checkout Earn.
2

Configure the title

Default: “Earn [points_label]”.
3

Configure the message

Default: “You’ll earn [points_value] [points_label] for this purchase!”.
4

Activate

Toggle the widget Active.

​
2. Add the widget in Shopify Checkout

1

Open the Checkout Editor

In your Shopify admin, go to Settings → Checkout → Customize.
2

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

Position and save

Drag the block to its final position in the checkout and click Save.
Checkout UI extensions require Shopify Plus or a checkout-eligible plan. See Theme compatibility & requirements.
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

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

Test in a real checkout preview. Shopify caches checkout layouts heavily; staging confirmations are unreliable.

​
FAQs

Confirm Checkout Extensibility is enabled and the extension is added in the Checkout Editor. See Activate the Checkout UI Extension.
See Order Status Earn Widget — it’s a separate widget that works on more plans.

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.