The Mage Loyalty app embed must be enabled on your live Shopify theme before the Rewards Widget will appear on your storefront. If you have not done this yet, see: How to Enable the Mage Loyalty App Embed.
The Rewards Widget is a small button that sits in the corner of every page of your store. When a customer clicks it, a panel opens with everything about your loyalty program in one place.
It is the easiest way to make your program visible. Shoppers can join, check their points and redeem rewards without leaving the page they are on.
What is the Rewards Widget?
The Rewards Widget has two parts:
The launcher: a button labelled Rewards that floats in the bottom corner of every page.
The panel: the window that opens when a customer clicks the launcher.
Inside the panel, logged in customers can:
See their points balance and recent activity.
Browse the ways they can earn points (your Ways to Earn rules).
Redeem their points for rewards (your Ways to Redeem rewards) and see the rewards they already have.
See your VIP tiers and their progress to the next tier, if VIP tiers are turned on.
Refer a friend, if your referral program is turned on.
Read answers to common questions in the FAQ.
Visitors who are not logged in see a join prompt at the top of the panel, with a button to create an account and a link to sign in. They can still browse how to earn and what they can redeem, which is a good nudge to sign up.
The widget always shows your live program. When you add an earning rule, a reward or a VIP tier, it appears in the widget automatically.
How to Enable the Rewards Widget
In the Mage Loyalty app, click Rewards Widget in the left menu.
At the top of the settings panel, switch on the Rewards widget toggle.
Click Save in the save bar at the top of the screen.
You will see a Rewards widget saved message. Visit your store to see the launcher in the corner of the page.
If the app embed is turned off on your live theme, a banner appears at the top of the settings panel to let you know. Follow How to Enable the Mage Loyalty App Embed to switch it on.
Customising the Rewards Widget
The settings panel on the left has four tabs. The preview on the right updates as you make changes.
Tab | What you can change |
Text | The welcome text in the header and the wording visitors see before they log in. |
Design | Corner styles, icons, colours, a banner image or logo, and the Powered by Mage line. |
Launcher | The launcher button colours, where it sits on the screen, and whether it shows on mobile. |
FAQ | The questions and answers shown on the FAQ page of the widget. |
Changes are not live until you click Save. To undo everything since your last save, click Discard.
Text Tab
Header
Setting | What it does |
Header subtitle | The small line at the top of the panel. The default is "Welcome to". |
Header title | The large line under the subtitle. The default is your store name followed by "Rewards". |
Account creation (logged out view)
These fields control the join prompt that visitors see when they are not logged in.
Setting | What it does |
Title | The heading of the join prompt. The default is "Become a member". |
Description | A short line explaining why they should join. |
Create account button | The text on the button that takes visitors to create an account. The default is "Create Account". |
Already registered | The text next to the sign in link for existing customers. The default is "Already a member?". |
To go back to the original wording, click Reset all text to defaults at the bottom of the tab. This only resets the text. Your colours and images stay as they are.
Design Tab
Appearance
Setting | What it does |
Panel corner radius | How rounded the corners of the panel are. 0px gives square corners. |
Card & button corner radius | How rounded the cards, buttons and tabs inside the panel are. |
Icon weight | How thick the icons look: Thin, Light or Regular. |
Show icon circles | Places a soft coloured circle behind each icon. |
Icon circle color | The colour of those circles. Only shown when Show icon circles is ticked. The icon itself switches to black or white so it stays easy to see. |
Colors
Setting | What it does |
Header background | The background colour of the panel header. |
Header text | The colour of the text in the header. |
Primary button | The colour of the main buttons in the widget. |
Secondary button | The colour of the less important buttons. |
Icon color | The colour of the icons. Only shown when Show icon circles is unticked. |
You do not need to pick a text colour for buttons. Button text switches between black and white automatically so it is always readable.
Header images
Setting | What it does |
Banner | An image shown across the top of the panel header. Up to 2MB. |
Logo | Your logo, shown in place of the welcome text. Up to 2MB. |
Branding
Setting | What it does |
Show "Powered by Mage" branding | Shows a small Powered by Mage line in the widget. Untick it to remove the line. |
Launcher Tab
When you open this tab, the preview switches to show the launcher button on its own.
Launcher button
Setting | What it does |
Button color | The background colour of the launcher button. |
Text color | The colour of the Rewards text on the button. |
Show accent dot | Shows a small dot next to the Rewards text. |
Dot color | The colour of the dot. Only shown when Show accent dot is ticked. It matches the text colour until you change it. |
Position
Setting | What it does |
Screen position | Choose Bottom right (recommended) or Bottom left. Bottom right is the default. |
Bottom offset (desktop) | How far the launcher sits above the bottom of the screen on computers, from 0px to 100px. The default is 20px. |
Bottom offset (mobile) | The same setting for phones. The default is 20px. |
If the launcher overlaps another button on your store, such as a live chat bubble, raise the bottom offset or move the launcher to the other side.
Visibility
Setting | What it does |
Hide on mobile | Hides the launcher and the widget on phones and other small screens (narrower than 640px). |
Z-index | Controls whether the widget sits in front of or behind other parts of your site. Raise this if your theme menu, header or another element covers the widget. The default is 1000. |
Z-index controls whether the widget sits in front of or behind other parts of your site, like your menu or header. A higher number brings the widget further to the front. If the open widget appears behind your store menu or header, especially on mobile, raise the Z-index to a high number such as 99999, click Save, then check again on your phone.
FAQ Tab
The widget has its own FAQ page. When you open this tab, the preview jumps to that page so you can see it as you edit.
Automatic FAQ
By default, Auto-generate FAQ is ticked. Mage writes the questions and answers for you from your program setup, such as how to earn, how to redeem, VIP tiers, referrals and points expiry. When you change your program, the FAQ updates by itself.
The tab shows a read only copy of the current questions so you can check them.
Editing the FAQ
Untick Auto-generate FAQ. The current questions are copied in so you can edit them instead of starting from scratch.
Edit any question or answer. Use the up and down arrows to change the order, or the bin icon to remove a question.
Click Add question to add a new one. You can have up to 20 questions.
Click Save.
Each new line in an answer shows as its own line in the widget. To make a list, start each line with •. Rows with no question and no answer are removed when you save.
Once you edit the FAQ yourself, it no longer updates when your program changes. Remember to update it if you change your earning rules, rewards or tiers.
Going back to the automatic FAQ
Tick Auto-generate FAQ again and click Save. Your edited questions are removed and the automatic FAQ comes back.
Previewing Your Widget
The preview on the right uses your real earning rules, rewards and VIP tiers, so it looks just like the widget on your store. Use the bar above the preview to check different views.
Control | What it does |
Logged out / Logged in | Switch between what a visitor sees before logging in and what a logged in customer sees. |
Desktop and mobile icons | Preview the widget on a computer screen or a phone screen. |
Zoom (- and +) | Zoom the preview out to see more of it, from 50% to 100%. |
Common Mistakes to Avoid
Leaving the app embed turned off. The widget cannot show on your store until the Mage Loyalty app embed is enabled on your live theme. Look for the banner at the top of the settings panel and follow the steps to switch it on.
Forgetting to switch on the Rewards widget toggle. The widget is off until you switch on Rewards widget at the top of the settings panel and save.
Not clicking Save. Nothing changes on your store until you click Save in the save bar. If you try to leave with unsaved changes, the app will warn you first.
Leaving Hide on mobile ticked by mistake. If you cannot see the widget on your phone, check the Launcher tab. When Hide on mobile is ticked, the widget is hidden on small screens.
Leaving the Z-index too low for your theme. On some themes, especially on mobile, the store menu or header sits in front of the open widget and covers it. Go to the Launcher tab, raise Z-index to a high number such as 99999, save, and test the widget on your phone.
Editing the FAQ and then changing your program. Once Auto-generate FAQ is unticked, your FAQ does not update by itself. Update it by hand, or tick Auto-generate FAQ again to go back to the automatic version.
Ticking Auto-generate FAQ again to see what it looks like. This removes your edited questions as soon as you save. If you do not want to lose them, click Discard instead of Save.
Troubleshooting
The widget is not showing on my store
Check the Mage Loyalty app embed is enabled on your live theme. See How to Enable the Mage Loyalty App Embed.
Check the Rewards widget toggle is switched on and that you clicked Save.
If you are checking on a phone, make sure Hide on mobile is unticked on the Launcher tab.
Refresh your store page after saving.
The widget opens behind my menu or header on mobile
This is the most common widget issue. Your theme menu or header is sitting in front of the widget. You can fix it with the Z-index setting, which controls whether the widget sits in front of or behind other parts of your site.
In the Mage Loyalty app, click Rewards Widget in the left menu.
Open the Launcher tab and find Z-index under Visibility.
Change the number to a high value such as 99999. The default is 1000.
Click Save.
Open your store on your phone, refresh the page and open the widget again. It should now sit in front of your menu and header.
If it is still covered, raise the number again (for example to 999999) and save.
Another part of my theme is covering the launcher button
On the Launcher tab, raise the Z-index (for example to 99999) and save.
If a chat button or cookie banner sits in the same spot, raise the bottom offset or move the launcher to Bottom left.
My FAQ does not match my program
Open the FAQ tab. If Auto-generate FAQ is unticked, your FAQ is not updating by itself.
Tick Auto-generate FAQ and save to go back to the automatic version, or edit the answers by hand.
My changes are not showing on my store
Make sure you clicked Save and saw the Rewards widget saved message.
Refresh your store page. If the widget was already open, close it and open it again.