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

# Cart Earn Widget

> Show customers the total points they'll earn for the items in their cart — visible at the moment they decide to check out.

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

## Introduction

Display the cumulative points a customer will earn for the items currently in their cart — right next to the cart total.

## What problem this solves

The cart is the highest-intent screen on your storefront. A customer staring at a \$200 cart is far more likely to complete checkout if they see *“200 points earned on this order”* attached to it.

## Where it appears

* Cart page or cart drawer (theme-dependent).

## When to use

* You want to lift cart-to-checkout conversion.
* You want to remind customers of the loyalty value before they leave the cart.

## Overview

* Calculates total earnable points based on cart contents.
* Updates dynamically as the cart changes.
* Customisable message and icon.
* Optional custom placement.

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

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

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

  <Step title="Customise icon">
    Pick the icon shown alongside the message.
  </Step>

  <Step title="Set custom placement (optional)">
    Use the placement option to control where in the cart the widget renders.
  </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>

Pick the **Cart** template (and the cart drawer if your theme uses one). Place the widget near the checkout button or cart total.

### 3. Verify

Add products to your live cart and confirm the widget renders with the correct total.

## 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 adds products to cart.
2. The widget reads the cart contents and applies active earning rules.
3. The total earnable points are rendered.
4. The widget refreshes whenever the cart changes (add, remove, quantity).

### Decision guidance

* **Place near the checkout button** for conversion.
* **Place near the total** for visibility.
* **Use both cart page and drawer** if your theme supports both.

### Limitations

* Cart drawer support depends on your theme. Some themes need additional setup.
* The widget displays the calculation at the moment of render — expired session data may show briefly.

## Examples

* *"You'll earn 80 Stars on this purchase!"* with a star icon next to the checkout button.

## Best practices

<Tip>**Always pair Cart Earn with Cart Redeem.** Earning visibility is half the story; redemption visibility is the other half.</Tip>
<Tip>**Keep the message tight.** Cart real estate is limited.</Tip>

## FAQs

<AccordionGroup>
  <Accordion title="Why doesn't my cart drawer show the widget?">
    Theme-dependent. Some themes require enabling app blocks in the drawer or using the [Floating Launcher](/onsite-widgets/floating-launcher) instead.
  </Accordion>

  <Accordion title="What does the value show for guest customers?">
    The base earning rate without any VIP multiplier.
  </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>