Accessing the Settings Tab
Open the Mage Loyalty app from your Shopify admin.
Click Account Sidebar in the left menu.
Click the Settings tab.
Position ~ Left or Right
In the Settings tab, find the Position dropdown.
Select Left or Right depending on which side you want the sidebar to slide in from.
Click Save.
✅ Tip
Right is the most common placement — it aligns naturally with where most themes position the cart and account icons. Left works well if your theme has important navigation elements on the right side that you do not want the sidebar to cover.
Width and Z-Index
Width
The Width field sets how wide the sidebar panel is in pixels. The default is 450px, which works well for most themes.
Increase width if your sidebar feels cramped or if you have a lot of blocks enabled
Decrease width if the sidebar is covering too much of your storefront content, especially on smaller screens
Check the Preview panel after adjusting — it reflects the current width setting
Z-Index
The Z-Index controls the sidebar's stack position relative to other elements on the page. If parts of your theme - navigation menus, sticky headers, chat widgets- appear on top of the sidebar, increase the Z-Index value.
ℹ️ Note
The default Z-Index of 999999 is high enough to sit above most theme elements. Only change this if you are experiencing a specific layering conflict with another element on your store.
Floating Sidebar
When Floating Sidebar is enabled, the sidebar has margin around it and rounded corners on desktop, giving it a card-like, elevated appearance rather than filling the full screen edge to edge.
On desktop: the sidebar floats with a margin and rounded corners
On mobile: the sidebar always displays full-screen, regardless of this setting
✅ Tip
Floating sidebar tends to feel more premium and modern. Full-edge (floating off) can feel more native to the browser and suits stores with a minimal aesthetic. Use the Preview panel to compare both before deciding.
Animations
When enabled, the sidebar slides in and out smoothly when customers open and close it. The animation style is currently Slide.
Toggle Enable animations on or off to control whether the sidebar animates
The current animation applies CSS classes ms-animate-slide-in and ms-animate-slide-out — these can be targeted with custom CSS for further control
🛠️ For Developers
If you want to customise the animation behaviour, target the ms-animate-slide-in and ms-animate-slide-out CSS classes in the Custom CSS editor under the Design tab.
Custom Font
By default, the sidebar inherits the font from your Shopify theme. Enable Google Fonts to load a different typeface for the sidebar specifically.
In the Settings tab, scroll to the Custom Font section.
Check the Enable Google Fonts checkbox.
Enter the name of the Google Font you want to use.
Click Save.
ℹ️ Note
The font name must match exactly how it appears on Google Fonts. For example, "DM Sans" or "Inter". You can find the correct name at fonts.google.com.
✅ Tip
If your theme already uses a Google Font that suits the sidebar, leave this setting off. Enabling a custom font loads an additional font file which adds a small amount of page weight. Only use it if the sidebar font needs to be different from your theme font.
Settings Reference
Setting | What It Does | Default |
Position | Controls which side of the screen the sidebar slides in from. Choose Left or Right. | Left |
Width (px) | The width of the sidebar panel in pixels. | 450 |
Z-Index | Controls the stack order of the sidebar relative to other elements on your theme. Increase this if other elements appear on top of the sidebar. | 999999 |
Floating Sidebar | Adds margin and rounded corners to the sidebar on desktop. On mobile, the sidebar always displays full-screen regardless of this setting. | On |
Enable Animations | Animates the sidebar when it opens and closes. | On |
Animation Style | The animation used when the sidebar opens and closes. Currently: Slide. | Slide |
Enable Google Fonts | Loads a custom font from Google Fonts instead of inheriting your theme's default font. | Off |
Common Mistakes to Avoid
⚠️ Common Mistake
Setting the width too wide on mobile: a very wide sidebar can overflow on smaller screens. Always check the sidebar on a mobile device or use browser dev tools to simulate mobile after changing the width.
⚠️ Common Mistake
Increasing Z-Index without checking for conflicts: a very high Z-Index can cause the sidebar to appear on top of elements it should sit behind, like cookie banners or modals. Test on your live storefront after changing.
⚠️ Common Mistake
Entering an incorrect Google Font name: font names are case-sensitive and must match exactly. If the font is not loading, double-check the spelling at fonts.google.com.
Troubleshooting
The sidebar is appearing behind other elements on my theme
Increase the Z-Index value in Settings. Try incrementally higher values until the sidebar appears above the conflicting element.
Common culprits are sticky navigation headers, chat widgets, and cookie consent banners. These often have high z-index values set by their own code.
The sidebar is too wide or too narrow on mobile
On mobile, the sidebar ignores the Width setting and always displays full-screen. If the content inside the sidebar looks cramped on mobile, this is a block content or design issue rather than a width setting issue.
Review your block content and consider using the Compact card style for the Loyalty Program block on stores where the sidebar feels busy.
The Google Font is not loading
Confirm the font name is spelled exactly as it appears on fonts.google.com, including capitalisation and spaces.
Check that Enable Google Fonts is checked and that you clicked Save.
Test in an incognito window to rule out browser caching.
The animation is not working
Confirm Enable animations is checked in Settings.
Some browser settings or accessibility modes disable animations at the OS level. Test in a standard browser window without accessibility overrides.
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.