> For the complete documentation index, see [llms.txt](https://docs.roadmap.so/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.roadmap.so/loyalty-and-rewards/membership-tiers-and-referrals/the-customer-rewards-storefront-redeeming-block.md). # The Customer Rewards storefront redeeming block Let customers see and redeem their tier rewards on the storefront: the block's states, how redemption behaves in the cart, and every setting explained. The **Customer Rewards** block is the storefront home for your tier rewards: the free gifts and discounts you configure under [Reward customers for reaching a tier](/loyalty-and-rewards/membership-tiers-and-referrals/reward-customers-for-reaching-a-tier.md). Customers see the rewards their tier has unlocked, the ones still locked ahead of them, and redeem straight into the cart.

### Add the block Add **Customer Rewards** to your theme like the other Roadmap loyalty blocks, through the app blocks in the theme editor: see [Customize the loyalty widgets](/loyalty-and-rewards/getting-started/customize-the-loyalty-widgets.md). Its styling controls mirror the Product Redeemer's, so the two sit naturally side by side.

### What customers see Each reward renders as a card, and the card's state follows the customer: * **Locked**: the reward's tier hasn't been reached yet, with your locked text, for example *Reach Platinum to unlock*. Rewards for **maintaining** a tier show a time-locked state once the tier is reached but the membership period isn't complete, with your available-after text.

* **Available**: the reward is redeemable, with a claim button, for example **Claim reward**. The badge can show the discount itself (free, a percentage, or an amount off) using the dynamic discount value, and the card shows the reward's minimum spend when one is set.

* **Sold out**: the reward's product is out of stock. The card keeps its badge and pricing, but the claim button is replaced with a greyed-out **Sold out** button until the product is back in stock.

* **Redeemed**: the reward is in the cart, with a **Remove** action, and optionally the discount code shown after claiming.

Redemption in the Customer Rewards block

* **Fully redeemed**: the customer has used their maximum redemptions for the reward.

The rewards appear in the same order as your admin list: drag them into position in **Customer Rewards** and the block follows. ### How redemption behaves in the cart Redemptions are coupon-based: redeeming adds the product to the cart and applies the reward's coupon. * **One reward at a time.** If a reward is already in the cart, redeeming another shows your *You already have a reward in your cart* message instead of stacking or replacing.

* **The discount stays on the chosen product.** Adding other eligible products or changing quantities doesn't move it, and extra units the customer adds beyond the redemption aren't discounted. * **Minimum spend is enforced.** Below the reward's minimum order value, redemption is blocked with your configured message. If the cart later drops below the minimum, the card swaps its Remove action for the minimum-spend message and the discount won't apply at checkout. * **Combinations**: tier-reward coupons can't stack with each other, since only one coupon applies at checkout. They can combine with automatic discounts (Roadmap and Shopify native) when the reward allows combinations. ### What each card displays The reward's **Target Selection** in the admin (*What can customers redeem?*) decides the card's contents: * **Specific Products**: up to 20 hand-picked products, browsable in the card's scroll view. * **Products from Collections**: the collections' products populate the card, up to 10 collections with 10 products shown per collection. * **Any Product in Store**: customers can redeem against any product in your inventory, so the block shows the reward on its own, without a product. #### Give Any Product rewards a Card Image

An *Any Product in Store* reward has no product image of its own, so by default its card renders as text only, which looks bare next to the product cards around it. The reward's **Card Image** setting fixes that: upload an image (under 500 KB; .png, .jpg, .jpeg, .svg, .gif, or .webp) and the card carries the same visual weight as its neighbours.

### The block settings The settings are grouped in the roadmap loyalty widget editor, top to bottom: * **Block headings**: the block's title and subtitle, with sizing. * **Card labels and text, by state**: locked and logged-out text, the time-locked available-after text, unlocked text, and redeemed text, plus **Show discount code after claiming**. * **Error messages and styling**: the already-have-a-reward, minimum-spend, and not-eligible messages in one place. * **Badge styles**: per-state badge text for locked and available (with the discount value as a dynamic insert), plus position and size. * **Card style**, **Typography**, and **Button styles**: matching the Product Redeemer's controls, including applied-state styling, text and hover colours, and the loading animation colour. * **Layout**: grid or carousel mode, card width, spacing, and the image ratio. ### Related guides * [Reward customers for reaching a tier](/loyalty-and-rewards/membership-tiers-and-referrals/reward-customers-for-reaching-a-tier.md): configuring the rewards the block displays * [Loyalty Tiers](/loyalty-and-rewards/membership-tiers-and-referrals/loyalty-tiers.md) * [Customize the loyalty widgets](/loyalty-and-rewards/getting-started/customize-the-loyalty-widgets.md) * [Ways to redeem points: overview](/loyalty-and-rewards/points-and-ways-to-earn/ways-to-redeem-points-overview.md) --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://docs.roadmap.so/loyalty-and-rewards/membership-tiers-and-referrals/the-customer-rewards-storefront-redeeming-block.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.