The Flexible Redemption section adds a slider to your loyalty landing page. Customers drag the slider to choose how many points to spend, see the discount value update as they go, and then redeem those points for a discount code.
To edit it, go to Loyalty Pages in Mage Loyalty. Under Storefront, find Landing Page and click Customise. Then select Flexible Redemption 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.
Before you start: set up a flexible reward
This section needs an active reward that customers can redeem for a flexible amount. If you do not have one, the editor shows a warning: No active flexible reward found, with a Create reward button.
Create the reward. Create a Fixed reward and choose the Flexible amount redemption type. The Create reward button takes you straight there. For more on rewards, see Ways to Redeem: Overview and Managing Rewards.
Check the rate. Once the reward is active, a banner at the top of the section shows its conversion rate, for example 100 points = $1.00.
The rate and the lowest and highest amounts a customer can redeem all come from the reward itself, not from this section.
Settings
Setting | What it does |
Title | The heading at the top of the section. Defaults to Exchange Points. |
Subtitle | A short line under the title. The editor fills this in for you, and it appears on your store once you save the section. Leave it blank to hide it. |
Balance message | Tells customers how many points they have. Use |
Redeem button label | The text on the redeem button. Defaults to Redeem. |
Hide block for logged-out customers | Ticked by default, so only logged-in customers see the section. Untick it to show it to everyone. |
Signed-out message | Only appears when the box above is unticked. The message shown to visitors who are not logged in. Defaults to Log in to redeem your points. |
No reward available message | Shown when no active flexible reward is set up. Defaults to No flexible reward is available right now. |
If your store uses store credit instead of points, use {store_credit} in the balance message. The defaults change to store credit wording, for example Spend Store Credit and You have {store_credit} available.
Apply to subscription (optional)
Setting | What it does |
Show 'Apply to subscription' button | Unticked by default. When ticked, customers with an active subscription can choose one and have the discount applied to their next order. |
Apply to subscription button label | Only appears when the box above is ticked. The text on the subscription button. Defaults to Apply to subscription. |
The subscription button only shows on your store when a subscription app is connected to Mage Loyalty and your flexible reward's purchase type is Subscription or Both. Otherwise customers see the normal redeem button.
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 Flexible Redemption 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.
How the slider works
The range comes from your reward. The slider starts at the reward's minimum and goes up to its maximum, or to the customer's balance if that is lower.
The value updates live. As the customer moves the slider, the discount amount changes using your reward's rate.
Redeeming gives a code. After redeeming, the customer gets a discount code to use at checkout.
Theme editor settings
Colours and spacing are set on the Mage Flexible Redemption block in your Shopify theme editor.
Setting | What it does |
Section Colors | Background, section title and section description colours. |
Slider | Slider track, fill and thumb colours, and the Discount Amount Color. |
Buttons | Button background and text colours. |
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 Flexible redemption 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 Flexible Redemption block is on your loyalty page. If it is not, add it, then click Save in the theme editor.
Common Mistakes to Avoid
Adding the section before creating a flexible reward. Without an active flexible reward, customers only see your No reward available message. Create the reward first.
Checking your store while logged out. With Hide block for logged-out customers ticked, the section is hidden from visitors who are not logged in, even though you can see it in the theme editor. Log in as a customer to test it.
Showing the same reward twice. If the Ways to Redeem section is on the same page, tick Hide flexible rewards there so the flexible reward only shows here.