Cart redemption

The cart redemption block lets customers apply a gift card to their order from the cart page, before they reach the checkout.

It exists for one reason: checkout extensions require Shopify Plus, and merchants on other plans need some way for customers to redeem a gift card online. Cart redemption is that fallback.

Limitations

Because cart redemption has to work within what a Shopify cart page allows, it comes with constraints you need to check against your theme before relying on it.

It uses the cart's discount field

To carry the applied gift card through into the checkout, the block writes to the cart's discount field.

That field is the only mechanism available for this, which has two consequences:

• It conflicts with discount code entry on the cart page. If your theme also lets customers enter a discount code at the cart step, the two features compete for the same field, and applying one will displace the other. You'll need to remove the theme's discount code input from the cart page, or accept that customers can use one or the other but not both.
• Only one gift card can be applied at a time. There is a single field, so there is a single card. A customer holding two cards that together cover their order can't use both - they'll need to redeem one, complete the order, and use the other separately.

Many themes bypass the cart page

Modern themes increasingly move customers straight from an Ajax slide-out cart or cart drawer to the checkout, without ever rendering the cart page.

Where that happens, a block placed on the cart page is simply never seen. Before committing to cart redemption, walk your store's actual purchase path and confirm customers reach a page where the block renders. Adding the block to your cart drawer section, where your theme supports it, can help - but not every theme's drawer is capable of hosting it.

In summary

Cart redemption is a workable fallback for a straightforward store on a non-Plus plan, where customers reach a real cart page and only ever redeem one card at a time.

If your store doesn't fit that description, the honest answer is that upgrading to Shopify Plus and using checkout extensions is the better path. Get in touch if you'd like to talk it through.

How it works

The block renders a collapsed disclosure on your cart page. Expanding it reveals a form where the customer enters their gift card number and, if required, a PIN.

When a card is applied, Cardigan:

1. checks the card's balance and status with your external provider;
2. mirrors the card into Shopify as a native gift card carrying the same balance;
3. places a hold on the external card for the available balance, where your provider supports it;
4. writes the resulting Shopify gift card code to the cart's discount field, so it carries through into the checkout.

The form then switches to show the applied card along with a Remove button, letting the customer change their mind before checking out. Removing the card releases the hold on the external card.

Whether the PIN field appears - and whether it's mandatory - follows your store's PIN behaviour setting.

Where to put it

Add the block to your cart page section, wherever the discount code input appears in your theme. Placing it directly above or below that input is usually the most intuitive spot for customers - bearing in mind the conflict described above if that input remains in place.

Settings

Theme preset

Applies CSS classes matched to your theme so the disclosure and form inherit your existing styling. Choose Custom to set the classes yourself.

See Theme presets and styling for how presets work.

CSS classes

When the theme preset is set to Custom, you can specify the classes applied to the wrapper, the component itself, the disclosure toggle and its content, the form, the result message, each field, inputs, labels, the applied card display and the buttons.

The disclosure toggle and applied card are specific to this block, so if you're styling it by hand these are the two elements worth checking first.

Translating the form

Field labels, the apply and remove buttons, and the status messages are all editable through Shopify's theme content editor, under Online Store > Themes > ... > Edit default theme content.

Don't use both

If your store has access to checkout extensions, use those instead of this block.

Running both gives customers two different places to enter a gift card, with different behaviour in each, and a card applied in one won't be reflected in the other. Pick one.