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

# Onsite Widgets

> Show points, rewards and VIP status across product pages, cart, checkout, customer accounts and a dedicated loyalty hub.

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

## What are onsite widgets

Onsite widgets are the customer-facing surfaces for your loyalty program. They show points balances, earnable rewards, VIP status and redemption options across the customer journey — without requiring a single line of theme code.

Widgets render via three Shopify mechanisms:

* **Theme App Embed** — for storefront widgets (product, cart, account, landing, launcher).
* **Checkout UI Extension** — for points and redemption inside Shopify Checkout.
* **Customer Account Extension** — for the loyalty hub inside the new Shopify customer accounts.

## Where each widget appears

| Widget                   | Surface                              | Extension type             |
| ------------------------ | ------------------------------------ | -------------------------- |
| Product Page Earn        | Product detail page                  | Theme app block            |
| Cart Earn                | Cart page / drawer                   | Theme app block            |
| Cart Redeem              | Cart page / drawer                   | Theme app block            |
| Checkout Earn            | Shopify Checkout                     | Checkout UI extension      |
| Checkout Redeem          | Shopify Checkout                     | Checkout UI extension      |
| Order Status Earn        | Thank-you / order status page        | Theme app block            |
| Order List Balance       | Order history page                   | Theme app block            |
| Customer Profile Balance | Customer profile page                | Theme app block            |
| Customer Account Page    | New Shopify customer accounts        | Customer Account extension |
| Rewards Landing Page     | A page on your storefront (your URL) | Theme app block            |
| Floating Launcher        | All pages (persistent)               | Theme app embed (auto)     |

## All widgets

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

## Decision guidance

* **Start with three:** Cart Earn, Cart Redeem and the Floating Launcher. They cover discovery, redemption and persistent access.
* **Add Checkout widgets** if you're on Shopify Plus or Checkout Extensibility — visibility at checkout lifts redemption rate.
* **Add the Customer Account Page** so the loyalty hub lives where customers manage their account.
* **Use the Rewards Landing Page** as a destination for marketing emails and ads about your loyalty program.

## Best practices

<Tip>**Less is more.** A storefront stuffed with five loyalty widgets dilutes attention. Pick the surfaces that matter.</Tip>
<Tip>**Keep widget copy short.** Don't over-explain mechanics in the widget — link to the rewards landing page if customers want detail.</Tip>
<Tip>**Always test on mobile.** Most loyalty interactions happen on phones; verify rendering and tap targets.</Tip>

## Related

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