In-Cart Rewards are available on Shopify, from the Advanced plan up. Installing them means adding code to your theme, so this guide is written for a developer.
In this article:
Overview
In-Cart Rewards put a widget on your cart page so a shopper can spend their points on a product and have it added to the cart without leaving that page. There is no voucher code and no trip to the loyalty page.
The widget surfaces rewards you have already created. It is a second place to claim them, not a separate reward type.
Before you start
In-cart rewards display Seamless Free Product rewards, so you need at least one of those set up before the widget has anything to show. The reward's own settings, including its inventory limit, checkout limit and minimum purchase requirements, are configured on the reward and apply wherever a shopper claims it.
How shoppers claim a reward
There are two routes, and you can offer both:
The loyalty page. Available with no extra work. Your shopper claims the reward and we add the product to their cart
The In-Cart Rewards widget. A few lines of code in your cart page template, covered below
Installing in-cart rewards
Installing In-Cart Rewards means editing your Shopify theme. Our reference theme on GitHub carries the markup and the SDK calls, and the Developer Portal documents the SDK itself.
There are two components you can place:
The widget lists every seamless free product a shopper can claim. This is the one you put on your cart page
The single-product button takes a product id, so you can put a claim button against one product, on a product page for example
If you are not comfortable editing your theme, involve a developer. Changes to a cart template can affect checkout across your whole store.
Keeping the cart in a valid state
By default a seamless free product requires at least one paid item in the cart. Once the last paid item is removed, a full page reload takes the reward out of the cart as well.
That clean-up runs after our script has loaded. We check the cart for invalid items and remove them through the Shopify Ajax API, which is usually fast but is never instant. So this sequence can let a shopper reach the checkout holding only a free item:
The shopper has a paid item in the cart
They claim a free product reward
On the cart page, they remove the paid item
They navigate to the checkout before our script has loaded
This is a Shopify limitation. Guarding against it further would mean delaying the checkout, which is a worse trade for your shoppers.
If your store uses an AJAX cart, or any enhancement that updates the cart without reloading the page, you need to keep the cart in step yourself. The reference theme covers this in Usage with AJAX carts.
What the button shows a shopper
The claim button renders one of these, so style and test against all of them:
Buy with X points when the shopper can claim it
Out of stock when the reward has no inventory left
Already redeemed when they have hit a lifetime redemption limit
Wait 5 months, counting down, when they have hit a limit that will reset
FAQ
What happens when a reward product is removed from the cart?
We return the points to the shopper straight away, so they can spend them on something else.
What happens if a shopper abandons a cart with a reward in it?
The claim expires at the end of the reward's checkout window, which is 2 hours by default and can be set as low as 15 minutes on each reward. We then return the points and remove the product from the cart.
What if the reward product has several variants?
The shopper picks the variant before claiming the reward.