Let customers redeem points in the cart

Show a redeem prompt right in the cart so shoppers can turn points into a discount before they head to checkout.

Steps

Go to Visibility → Storefront pages.
On the Redeem points at the cart card, click Set up (or Customize to edit placement, style, and wording).
Pick a Placement (see below) and Save. Automatic placement works for most themes out of the box.
Make sure the Charm loyalty widget app embed is enabled in the theme editor — the block won’t render without it.

Placement options

Automatic (recommended)

Charm injects the block into your cart drawer or cart page at a CSS selector. Leave the selector blank to use built-in defaults for popular themes, or enter your own (for example #CartDrawer .cart__footer) if the default spot doesn’t suit your layout. Each surface (drawer and cart page) also has an Insert position choice — place the block at the top or bottom of the matched element, handy for themes that keep totals or a shipping bar pinned in one spot.

Theme block — cart page

If your store sends shoppers to a full cart page, add the Charm redeem points block to the cart template — the Open theme editor button on the placement card opens the cart template with the block ready to drop in, exactly like the other theme app blocks. You control the position; no code needed.

Manual snippet — custom cart drawers

Shopify doesn’t allow app blocks inside cart drawers. If automatic placement doesn’t land where you want it, a developer can paste this snippet into the drawer’s Liquid template (Online Store → Themes → Edit code):

<div data-charm-cart-redeem></div>

The block renders exactly where the snippet sits, and a placed snippet always takes precedence over automatic placement.

Button or link

Under Call to action, choose how the prompt invites the shopper to act:

Button — a tappable button at the end of the row. Easier to hit on a phone and harder to scroll past; this is the default.
Link — underlined words inside the sentence, for a more understated look.

The two styles read your wording differently. Text you wrap in [square brackets] becomes the clickable part of the sentence when you pick Link; with Button, the bracketed text is dropped from the line altogether, because the button carries its own label.

Product rewards go straight into the cart

When a shopper redeems a reward for a specific product from the popup, Charm adds the product to the cart for them and applies the code, so there’s nothing left to find or type:

One variant (or a reward limited to a single variant): added straight away.
Several variants: a Choose an option window lists them, each with its own photo, or with the product photo once above the list when the variants have none. Sold-out variants can’t be picked.
Already in the cart: the reward attaches to the item that’s there instead of adding a second one.
Any product from a collection: nothing is added. The code is applied, and the discount kicks in once an item from that collection is in the cart.

For a specific product, the discount is tied to that cart item and covers one unit. If the product is sold out, no points are spent and the popup says “This option is currently sold out.” If it can’t be added for another reason, the points go back and the shopper sees “The gift could not be added to the cart. Nothing was deducted.”

The same happens when the reward is redeemed in the floating widget or on the loyalty landing page. Afterwards the reward’s code card there shows Added to cart with View cart, or Add to cart if the item has left the cart. If the shopper cancels the code, the product stays in the cart at its regular price and the points are refunded.

Checking the placement before launch

In the theme editor the block renders a localized sample line in your brand style, even while the program (or the nudge itself) is still off — so you can see exactly where it lands and style it before launch. It used to render nothing there, which made an empty cart section impossible to distinguish from a broken placement.

The sample is generic: it’s built from the cart total with default wording, and it never fetches a real point balance or reward estimate. On the live storefront nothing changes — the block stays silent until the program is on. See previewing blocks before the program is live.

Styling with custom CSS

The surface’s editor (Visibility → Redeem points at the cart → Advanced) has a Custom CSS field whose rules are injected on the storefront whenever the nudge is active. Target the charm-cart-redeem__* class names below — they are a stable styling API: they keep working across app updates, unlike the short internal class names you may also see in the markup (charm-widget__cn-*), which can change without notice.

.charm-cart-redeem__nudge {
  background: #fff7ed;
  border: 1px solid #fdba74;
}
.charm-cart-redeem__button {
  border-radius: 999px !important;
}

Stable selectors

Selector	Element
`.charm-cart-redeem__nudge`	The nudge line in the cart (pill or inline layout)
`.charm-cart-redeem__nudge-link`	The “redeem for a discount” link inside the nudge
`.charm-cart-redeem__nudge-signin`	The guest “sign in and earn” link variant
`.charm-cart-redeem__popup`	Full-screen overlay behind the popup
`.charm-cart-redeem__dialog`	The popup card itself
`.charm-cart-redeem__title`	Popup title
`.charm-cart-redeem__close`	Close (✕) button
`.charm-cart-redeem__balance`	Points-balance line under the title
`.charm-cart-redeem__list`	Container holding all reward groups and rows
`.charm-cart-redeem__group-title`	Group heading (Discounts / Shipping / Product rewards)
`.charm-cart-redeem__row`	One reward row
`.charm-cart-redeem__row-image`	Reward thumbnail tile
`.charm-cart-redeem__row-name`	Reward name
`.charm-cart-redeem__row-cost`	Points-cost line under the name
`.charm-cart-redeem__stepper`	Quantity stepper (stackable amount-off rewards)
`.charm-cart-redeem__stepper-button`	The − and + stepper buttons
`.charm-cart-redeem__stepper-count`	The quantity number between them
`.charm-cart-redeem__button`	The Redeem / Apply button on a row
`.charm-cart-redeem__note`	Reassurance footnote at the bottom of the popup
`.charm-cart-redeem__empty`	“Add a little more to your cart” message
`.charm-cart-redeem__success`	The “Discount applied” confirmation view

The most-used selectors are also shown as click-to-copy chips right under the Custom CSS field in the editor.

This field styles the cart prompt only. For rules that should reach every Charm surface at once, use the global Custom CSS field in Settings — the prompt’s own CSS is applied after it, so anything you put here still wins.