Skip to content
Charm Charm Charm

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

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

Placement options

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.

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.

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

SelectorElement
.charm-cart-redeem__nudgeThe nudge line in the cart (pill or inline layout)
.charm-cart-redeem__nudge-linkThe “redeem for a discount” link inside the nudge
.charm-cart-redeem__nudge-signinThe guest “sign in and earn” link variant
.charm-cart-redeem__popupFull-screen overlay behind the popup
.charm-cart-redeem__dialogThe popup card itself
.charm-cart-redeem__titlePopup title
.charm-cart-redeem__closeClose (✕) button
.charm-cart-redeem__balancePoints-balance line under the title
.charm-cart-redeem__listContainer holding all reward groups and rows
.charm-cart-redeem__group-titleGroup heading (Discounts / Shipping / Product rewards)
.charm-cart-redeem__rowOne reward row
.charm-cart-redeem__row-imageReward thumbnail tile
.charm-cart-redeem__row-nameReward name
.charm-cart-redeem__row-costPoints-cost line under the name
.charm-cart-redeem__stepperQuantity stepper (stackable amount-off rewards)
.charm-cart-redeem__stepper-buttonThe − and + stepper buttons
.charm-cart-redeem__stepper-countThe quantity number between them
.charm-cart-redeem__buttonThe Redeem / Apply button on a row
.charm-cart-redeem__noteReassurance footnote at the bottom of the popup
.charm-cart-redeem__empty”Add a little more to your cart” message
.charm-cart-redeem__successThe “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.