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

​
Introduction

The Cart redeem message shows the customer’s points balance in the cart with a Rewards button. The button opens a redeem modal where customers see their existing rewards, redeem points for new ones, check VIP tier progress and set their birthday. Rewards are applied to the cart in one click.

​
What problem this solves

Customers often forget they have points. Showing the balance at the cart, with a one-click way to redeem and apply a reward, turns that balance into a reason to check out now.

​
Where it appears

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

​
When to use

  • You want to drive redemption at the moment of purchase.
  • You want logged-out shoppers to see a prompt to log in and use their points.

​
Overview

  • Separate content for logged-in and logged-out customers.
  • A redeem modal with header, existing rewards, ways to redeem, VIP tiers and a birthday prompt.
  • Automatic placement above your theme’s cart footer, or a Custom placement selector.
  • Styles tab with four colours, padding, height and Custom CSS.
  • Edit the text per language with the Editing language picker.

​
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.
You’ve set up at least one Way to Redeem.

​
Setup guide

​
1. Configure the widget in Yuko

Go to Loyalty → Widgets, find Cart redeem message under Shopping Cart, and click Customize. The Configuration tab is split into the cards below.
1

Cart drawer/cart page (logged in)

  • Point balance in cart: default You have: [point_balance] [points_label]
  • Reward button: default Rewards
  • Customize cart reward icon: Default, or Custom to upload your own (JPG, PNG, GIF or WEBP, under 1 MB)
  • Custom placement: leave empty to place the widget above your theme’s cart footer automatically, or enter a CSS selector (for example .cart__footer). Yuko inserts the widget just before each matching element.
2

Cart drawer/cart page (logged out)

  • Hide for logged out customers: off by default
  • Log in to redeem points: default Log in to redeem your [points_label] for rewards.
  • Log in button: default Log In
3

Modal header

  • Heading title: default Redeem rewards. Shown when the customer has no first name on file.
  • Greeting: default Hey [first_name],. Shown instead of the heading title when the customer is logged in.
  • Available balance label: default Available Balance
  • Set birthday button: default Set birthday
4

Existing rewards list

  • Existing rewards title: default Existing Rewards
  • Apply button: default Apply
  • Expiration date label: default Expires on [expiration_date]. Hidden automatically when a reward has no expiry.
5

Ways to redeem list

  • Ways to redeem title: default Ways to Redeem
  • Insufficient points label: default Needs [points_needed] more [points_label]
  • Load more button label: default Load more
  • Redeem button: default Redeem
6

VIP tiers page

  • Next tier: default Next tier: [next_tier]
  • Progress to next tier: default Earn [points] [points_label] to reach [tier_name]
  • Maximum tier reached: default You have reached the maximum tier
  • Benefits title: default Benefits
  • Tiers title: default Upcoming Tiers
  • Tier entry threshold: default Earn [tier_entry_amount] [points_label]
  • Points multiplier benefit text: default [multiplier_value]x multiplier. Shown as the first benefit when the tier’s multiplier is above 1.
7

Birthday prompt

  • Title: default Birthday Reward. Used when your Birthday earn rule has no name.
  • Description: default Tell us your birthday and earn special rewards!. Used when your Birthday earn rule has no description.
  • Save date button: default Save date
  • Day label, Month label, Year label: defaults Day, Month, Year
8

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

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 Redeem Message. The block has no theme editor settings; all text and styling come from Yuko.

​
3. Verify

1

Test as a logged-in customer

Log in as a customer with points. Check the balance message, open the modal and redeem a reward.
2

Test as a logged-out shopper

Open the cart in a private window. You should see the login prompt, or nothing if Hide for logged out customers is on.
3

Test applying a reward

Click Apply on an existing reward and check that the discount shows in the cart and at checkout.

​
Custom login trigger

By default, the Log In button sends logged-out shoppers to Shopify’s account login page. If your store uses its own login (a popup, a drawer or a third-party login app), set a Custom login trigger in Loyalty → Settings:
  • Use a CSS element: enter a Login element selector (for example #login-button). Yuko clicks that element to start your login flow.
  • Use a link: enter a Login link to send the shopper to that URL.
The same setting is used by the Floating Rewards launcher and Loyalty Nudges.

​
Available placeholders

​
How it works

  1. When the cart loads or changes, Yuko renders the balance message in the block and in the automatically placed spot.
  2. Logged-out shoppers see the login prompt, unless Hide for logged out customers is on.
  3. Logged-in customers with a zero balance don’t see the widget.
  4. Clicking the Rewards button opens the redeem modal.
  5. Redeem turns points into a discount code for that customer. Apply adds the code to the cart.

​
Limitations

  • Automatic placement depends on your theme’s cart markup. If the widget doesn’t appear, or appears in the wrong spot, use Custom placement or add the block.
  • The VIP tiers page needs VIP tiers to be set up.

​
Best practices

Pair with Cart Earn. Customers should see what they’ll earn and what they can spend.
Keep the logged-out prompt on. It doubles as a login and sign-up nudge.
Set a Custom login trigger if your theme uses a login popup, so shoppers don’t leave the cart to log in.

​
FAQs

The widget is hidden for logged-in customers with a zero balance. Check the customer’s balance in Customers.
The block and automatic placement both render the widget. Remove the Yuko: Cart Redeem Message block and use Custom placement to position the automatic one instead.
VIP tiers aren’t set up, or the customer hasn’t been placed in a tier yet.

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