Cart Membership Upsell Widget

Where to find this: Shopify admin → Apps → Yuko Loyalty → Membership → Widgets → Cart membership upsell

Introduction

The Cart membership upsell widget shows a membership offer in the cart drawer or on the cart page, so customers can add the plan to their cart before checkout.

What problem this solves

The cart is the highest-intent moment on your storefront. Showing the membership offer there turns one-time buyers into members just before they pay.

Where it appears

The cart drawer and the cart page.
It’s placed automatically through the Yuko App embed. You can also place it yourself with the Yuko: Member Cart Upsell theme app block, or point it at a specific element with a CSS selector.

Overview

Promotes the plan chosen in Membership → Plans → Membership Settings → Membership to upsell.
Configuration and Styles tabs.
Hidden from customers who already have a membership, and when the cart is empty.

Before you start

At least one plan exists in Membership → Plans.

A plan is selected in Membership to upsell (in Membership Settings on the Plans tab).

The Yuko App embed is turned on in your theme. See Theme App Embed.

Setup guide

Open the widget

Go to Membership → Widgets and click Customize on Cart membership upsell.

Edit the text

Field	Default
Title	`Save with membership`
Description	`Save on all your future orders by becoming a member`
Monthly interval label	`month` (as in “$9.99/month”)
Yearly interval label	`year` (as in “$99/year”)

Set the placement (optional)

Under App embed placement, enter a CSS Selector for the element the upsell should appear above, for example .cart__footer. Leave it empty to use the default placement.

Style it

On the Styles tab, set Border color, Background color, Title text color, Description text color, Padding and optional Custom CSS.

Save and enable

Click Save. If the Yuko App embed isn’t on yet, click Enable Theme Extension to open the theme editor with the embed ready to turn on. Then switch the widget on with the toggle on its card in Membership → Widgets.

2. Place the block manually (optional)

To control exactly where the upsell appears, add the theme app block:

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.

Open the Theme Editor

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

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

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

Position and save

Drag the block to your preferred position and click Save.

Open the Cart template and add Yuko: Member Cart Upsell. The block has no theme-editor settings; text and styles come from Yuko.

3. Verify

As a logged-out customer (or one without a membership), add a product to the cart and open the cart. The upsell should appear with your plan’s price.

How it works

When the cart changes, the Yuko App embed checks that memberships and the widget are on, the customer has no membership, a plan is set to upsell, and the cart isn’t empty.
If all checks pass, the widget shows the upsell plan with its price and billing interval.
The customer adds the plan to the cart and becomes a member once they complete checkout.

Limitations

The widget promotes one plan: the Membership to upsell.
Customers have to check out with the plan to start their membership.

Best practices

Quote a concrete saving in the description, for example “Members save 10% on every order”.

Test in your cart drawer on mobile. Space is tight there, so use the CSS selector if the default spot doesn’t work.

FAQs

What if the customer is already a member?

The widget hides itself.

How do I choose which plan is shown?

Set Membership to upsell in Membership → Plans → Membership Settings. The same plan is used by the checkout upsell, the rewards landing page and the Floating Rewards launcher.

The upsell appears in the wrong place

Enter a CSS Selector under App embed placement, or add the Yuko: Member Cart Upsell block exactly where you want it.