The Ways to Redeem section shows customers how they can spend their points. It shows one card for each reward you offer, so shoppers can see what is available and redeem it straight from your loyalty page.
You do not add these cards by hand. The section pulls in the rewards you have already set up in Mage Loyalty, so it always matches your current offers. To manage the rewards themselves, see Ways to Redeem: Overview and Managing Rewards.
To edit it, go to Loyalty Pages in Mage Loyalty. Under Storefront, find Landing Page and click Customise. Then select Ways to Redeem in the Sections list on the left.
This section lives on your loyalty landing page. If you have not set that page up yet, follow the loyalty page step in the Quick Start Guide first.
Settings
Setting | What it does |
Title | The heading above your reward cards. Leave it blank to show no heading. |
Subtitle | An optional line under the title. Leave it blank to hide it. |
Display | Grid (the default) wraps cards across rows. Carousel shows a single row of cards that scrolls sideways. |
Hide flexible rewards | Hides flexible-amount rewards from this list. Useful when the Flexible Redemption section is on the same page, so the reward is not shown twice. |
Show locked VIP tier rewards | When off (the default), VIP tier rewards only show to customers in that tier. When on, everyone sees them, and customers below the tier see a locked button reading Reach [tier name] to unlock. |
Show progress bar | When a logged-in customer cannot afford a reward yet, shows a progress bar towards its cost instead of the greyed-out button. |
Show 'Apply to subscription' button | Lets customers apply a reward to their subscription instead of getting a checkout code. See below. |
Apply to subscription
When Show 'Apply to subscription' button is ticked, customers can apply a fixed, percentage or free shipping reward directly to their Loop or Stay.ai subscription. The button only appears when both of these are true:
A Loop or Stay.ai subscription integration is connected to Mage Loyalty.
The reward's purchase type is set to Subscription or Both.
Ticking the box also shows two text fields:
Setting | What it does |
Apply to subscription button label | The text on the button. Defaults to Apply to subscription. |
Apply to subscription success message | The message shown after a customer applies the reward. Defaults to We'll apply this to your next subscription order. |
Below the main card is an Advanced Settings card. Click View to open it and add Custom CSS for this section. The editor suggests the Ways to Redeem class names as you type, and a counter shows how close you are to the 64 KB limit. Your CSS is saved with the rest of the section.
What customers see
Each card shows the reward name, its cost and a button. Flexible rewards show their points rate instead of a fixed cost. VIP tier rewards carry a VIP badge with the tier name.
Customer | Button |
Not logged in | Log in to redeem |
Logged in, enough points | Redeem Reward |
Logged in, not enough points | A greyed-out Not enough points button, or a progress bar if Show progress bar is ticked. |
Logged in, below the reward's VIP tier | A locked Reach [tier name] to unlock button (only when Show locked VIP tier rewards is ticked). |
If you have no rewards set up, the section shows No rewards available at the moment.
If your store uses store credit instead of points, costs show as money and the button reads Not enough credit.
Theme editor settings
Colours and spacing are set on the Mage Ways To Redeem block in your Shopify theme editor.
Setting | What it does |
Section Colors | Background, section title and section description colours. |
Card Colors | Card background, card title and card description colours. |
Button Colors | Background, text and border colours for the button, plus separate colours for the greyed-out button. |
Custom vertical padding | Turn on to set your own Top padding and Bottom padding. |
Disable Customizer Styles | Removes the colours above so the block is styled only by your own CSS. |
Saving and going live
Save your changes. As soon as you edit a field, a save bar appears at the top of the screen. Click Save in the save bar, or use the Save button at the bottom of the card.
Check the confirmation. A message saying Ways to redeem content saved successfully appears once the save is done.
Discard if needed. Click Discard in the save bar to go back to your last saved version.
Make sure the block is on the page. Click Customise page in Shopify Theme Editor at the top right of the Landing Page editor. Check that the Mage Ways To Redeem block is on your loyalty page. If it is not, add it, then click Save in the theme editor.
Common Mistakes to Avoid
Showing the same flexible reward twice. If the Flexible Redemption section is also on your page, tick Hide flexible rewards here.
Expecting the Apply to subscription button on every reward. It only shows on fixed, percentage and free shipping rewards with a purchase type of Subscription or Both, and only when Loop or Stay.ai is connected.