The Account Sidebar is the main customer-facing experience in Mage Loyalty. It is a slide-out panel that appears on your storefront, giving customers a central place to view their points balance, access rewards, track orders, and more - all without leaving your store.
📋 Before You Start
The Mage Loyalty app embed must be enabled on your live Shopify theme before the sidebar will appear on your storefront. If you have not done this yet, see: How to Enable the Mage Loyalty App Embed.
What is the Account Sidebar?
When a customer clicks the loyalty launcher on your storefront or visits your store's account page, the Account Sidebar slides in from the side of the screen. It is fully branded to match your store and replaces Shopify's default minimal account experience with a rich, loyalty-focused one.
The sidebar has three tabs that customers navigate between:
For You: personalised loyalty content: points balance, rewards, earning opportunities, and any configured blocks
Orders: recent order history and order status
Profile: customer account details
ℹ️ Note
Customers who are not logged in will see a sign-in prompt when the sidebar opens. The full loyalty experience: points balance, rewards, and personalised blocks. It is only visible to logged-in customers.
What Can the Sidebar Display?
The sidebar is made up of configurable blocks. You choose which blocks are enabled, what they display, and the order they appear in. Here is a summary of every available block:
Block | What It Shows Customers | Logged In Only? |
Loyalty Program | Points balance, VIP tier, lifetime points, and available rewards | Yes |
Wishlist | Customer's saved wishlist items with add-to-cart functionality | Yes |
Advertisement | A promotional banner with an image, title, description, and optional link | No |
Custom Links | Merchant-configured navigation links — e.g. Contact Us, Subscriptions | No |
Call to Action | A prominent button with custom label text linking to any page | No |
Featured Products | A curated product grid pulled from a selected collection | No |
Saved From Cart | A product grid showing items the customer removed from their cart. | Yes |
Recently Viewed | A product grid showing items the customer has recently viewed. | No |
Referral Code | A block displaying the customer’s personal referral code that they can share with others. | Yes |
✅ Tip
Blocks marked "Logged In Only" are only visible to customers who are signed in. All other blocks are visible to both logged-in and logged-out customers, useful for promotional content you want everyone to see.
How to Enable the Account Sidebar
From your Shopify admin, open the Mage Loyalty app.
In the left menu, click Account Sidebar.
At the top of the page, find the Enable Account Sidebar toggle.
Toggle it on.
Click Save.
The sidebar is now live on your storefront. Customers who visit your store and click the loyalty launcher or navigate to your account page will see it immediately.
✅ Tip
Use the Preview panel on the right side of the Account Sidebar page to check how the sidebar looks before and after making changes. You can toggle between the Logged Out and Logged In views to see exactly what different customers will see.
How Customers Access the Sidebar
There are two ways customers can open the Account Sidebar on your storefront:
Via the Rewards Widget: the floating launcher button on your storefront pages. Clicking it opens the sidebar from any page.
Via the account page URL: customers who visit your store's yourstore.com#mage URL will have the sidebar open automatically.
ℹ️ Note
The Rewards Widget and the Account Sidebar work together. The widget is the launcher, it opens the sidebar. If you want customers to be able to access the sidebar from anywhere on your store, make sure the Rewards Widget is also enabled.
Navigating the Account Sidebar Page
The Account Sidebar configuration page inside Mage Loyalty has three tabs. Each controls a different aspect of the sidebar:
Blocks
Configure which blocks appear in the sidebar, what each block displays, and the order they are shown in. You can enable or disable individual blocks and drag them to reorder. Each block has its own settings.
Design
Control the visual appearance of the sidebar: colours, logo, and custom CSS. Choose from preset colour themes or define your own using CSS variables. Full CSS customisation is available for developers who want complete control.
Settings
Control the sidebar's position (left or right), width, z-index, floating style, animation behaviour, and custom font. These settings affect how the sidebar is displayed and behaves on your storefront.
Common Mistakes to Avoid
⚠️ Common Mistake
Enabling the sidebar before the app embed is active: the sidebar will not appear on your storefront until the Mage Loyalty app embed is enabled on your live theme. Always complete the app embed step first.
⚠️ Common Mistake
Not clicking Save after toggling the sidebar on: the toggle alone does not save the change. Always click Save before leaving the page.
⚠️ Common Mistake
Expecting the sidebar to show content without any blocks enabled: if all blocks are toggled off, the sidebar will open but display nothing. Enable at least the Loyalty Program block to give customers something to interact with.
Troubleshooting
The sidebar is enabled but not appearing on my storefront
Confirm the Mage Loyalty app embed is enabled on your current live theme. This is the most common cause. See: How to Enable the Mage Loyalty App Embed.
Check that you clicked Save after enabling the toggle.
Open your storefront in an incognito browser window to rule out caching.
The sidebar opens but appears empty
Go to Account Sidebar > Blocks and confirm at least one block is toggled on.
If the Loyalty Program block is enabled but showing no data, confirm your loyalty program is enabled under Loyalty in the left menu.
Customers cannot find the sidebar
Make sure the Rewards Widget is enabled: this is the floating launcher button that gives customers access to the sidebar from any page.
You can also link customers directly to the sidebar by pointing them to yourstore.com#mage - for example, in an email or navigation link.
Related Articles
🗨️ Still need help or can’t find the answers you’re looking for? Reach out to the Mage Loyalty team through our live chat support.