Skip to main content
Where to find this: Shopify admin → Apps → Yuko Loyalty → Loyalty → Widgets → Cart earn message

​
Introduction

The Cart earn message shows the points a customer will earn for the items currently in their cart. It updates as the cart changes.

​
What problem this solves

The cart is where customers decide whether to check out. Showing the points they’re about to earn gives them one more reason to complete the order, and to add one more item.

​
Where it appears

  • Cart page and cart drawer. It is placed automatically through the Yuko App embed, or wherever you add the Yuko: Cart Earn Message block.

​
When to use

  • You want a simple earn reminder at the cart.
  • You run spend-based earning, so the points grow as the cart grows.

​
Overview

  • One message field with placeholders, plus a default or custom icon.
  • Automatic placement above your theme’s cart footer, or a Custom placement selector.
  • Styles tab with four colours, padding, height and Custom CSS.
  • Updates when items are added, removed or changed.

​
Before you start

Yuko is installed on your Shopify store.
The program this widget belongs to is set up and enabled.
The widget is switched on with the toggle on its card in Yuko’s Widgets page (for loyalty widgets, Shopify admin → Apps → Yuko Loyalty → Loyalty → Widgets).
For storefront widgets, your active theme is an Online Store 2.0 theme that supports app embeds and app blocks.

​
Setup guide

​
1. Configure the widget in Yuko

1

Open the widget settings

Go to Loyalty → Widgets, find Cart earn message under Shopping Cart, and click Customize.
2

Edit the message

Cart earn message. Default: You'll earn [points_value] [points_label] on this purchase!
3

Choose an icon

Under Customize cart earn message icon, keep Default or choose Custom to upload your own icon (JPG, PNG, GIF or WEBP, under 1 MB).
4

Set a custom placement (optional)

Leave Custom placement empty to let Yuko place the message above your theme’s cart footer. To put it somewhere else, enter a CSS selector, for example .cart__footer. Yuko inserts the message just before each matching element.
5

Adjust styles (optional)

On the Styles tab, set:
  • Color Configuration: Primary color, Secondary color, Text color and Body description color.
  • Widget Style: Padding (px, default 10) and Height (px, leave empty for automatic).
  • Custom CSS: add your own CSS rules for this widget.
6

Save and enable

Click Save. Back on Loyalty → Widgets, switch the widget’s toggle on.

​
2. Make sure it can render on your theme

Automatic placement needs the Yuko App embed. If it’s off, the widget editor shows an Enable Theme Extension button that opens the theme editor so you can switch it on. See Theme App Embed. To control the exact position yourself, add the block instead:
1

Turn on the Yuko App embed

Theme blocks get their content from Yuko’s storefront script, which loads through the Yuko App app embed. If you haven’t already, enable it in Online Store → Themes → Customize → App embeds. See Theme App Embed.
2

Open the Theme Editor

In your Shopify admin, go to Online Store → Themes, find your active theme, and click Customize.
3

Pick the right template

Use the template selector at the top to open the page where this widget should appear (Product, Cart, a page template, and so on).
4

Add the Yuko app block

Click Add block in the section where you want the widget. Under Apps, select the Yuko block named for this widget (block names start with Yuko:).
5

Position and save

Drag the block to your preferred position and click Save.
Pick the Cart template and add Yuko: Cart Earn Message. The block has no theme editor settings; all text and styling come from Yuko.

​
3. Verify

Add a product to the cart on your live store. Check that the message shows on the cart page and in the cart drawer, and that it updates when you change quantities.

​
Available placeholders

​
How it works

  1. When the cart loads or changes, Yuko recalculates the points for the cart contents.
  2. The message renders inside the block (if you added one) and in the automatically placed spot from the Yuko App embed.
  3. Automatic placement uses your Custom placement selector if set; otherwise it uses common cart-footer positions in Shopify themes.

​
Limitations

  • The message is hidden when the cart earns 0 points (for example, an empty cart or excluded products).
  • Automatic placement depends on your theme’s cart markup. If the message doesn’t appear, or appears in the wrong spot, use Custom placement or add the block.

​
Best practices

Pair with Cart Redeem. Customers should see what they’ll earn and what they can spend.
Test your Custom placement selector on both the cart page and the cart drawer, since themes often use different markup for each.

​
FAQs

Check that the Yuko App embed is on. If it is, your theme’s drawer may use markup Yuko doesn’t recognise; enter a selector for an element inside your drawer in Custom placement.
The block and automatic placement both render the message. If you added the Yuko: Cart Earn Message block and the embed also places it, remove the block and use Custom placement to position the automatic message instead.

​
Full placeholder reference

Placeholders are written in square brackets, for example [points_label]. Each text field’s help text in the widget editor lists the placeholders that field supports. Available in every storefront widget text Widget-specific placeholders

Floating Rewards

Floating button and loyalty panel on every page.

Rewards Landing Page

A dedicated loyalty page built from seven theme blocks.

Loyalty Nudges

Pinned strip and drawer on every page, ideal for boosters.

Product Page Earn

Show points to earn on product pages.

Cart Earn

Show points to earn on the cart.

Cart Redeem

Let customers redeem points and apply rewards in the cart.

Checkout Earn

Show points to earn in Shopify Checkout (Shopify Plus).

Checkout Redeem

Redeem points and apply rewards in Shopify Checkout (Shopify Plus).

Order Status Earn

Show points earned on the order status page in customer accounts.

Order List Balance

Show the points balance on the Orders page in customer accounts.

Customer Profile Balance

Show loyalty details on the Profile page in customer accounts.

Customer Account Page

A full loyalty page inside Shopify customer accounts.

Branding & Locale

Colour palettes for all widgets, and per-language widget text.

Theme App Embed

The Yuko App embed that powers Floating Rewards, Loyalty Nudges and the theme blocks.

Checkout UI Extension

Add the earn and redeem blocks to Shopify Checkout (Shopify Plus).

Customer Account Extension

Add the loyalty blocks and full loyalty page to 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.