The Design tab controls how the sidebar looks: your logo, colours, size and animation, plus custom CSS for full control.
Accessing the Design Tab
From your Shopify admin, open the Mage Loyalty app.
In the left menu, click Account Sidebar.
Click the Design tab at the top of the page.
Tip
Use the Preview panel on the right side of the page while working in the Design tab. It updates in real time as you make changes so you can see exactly how the sidebar will look before saving.
Logo
To upload a logo:
In the Design tab, find the Branding section.
Click Upload and select your logo file from your computer.
A thumbnail preview will appear once the upload is complete.
Click Save.
Supported formats: PNG, JPG, SVG
Recommended: PNG with transparent background so the logo sits cleanly against any sidebar background colour
To remove the logo, click Remove below the thumbnail
The logo appears at the top of the sidebar header and is the first thing customers see when the sidebar opens. Uploading your brand logo makes the sidebar feel immediately recognisable as yours.
Colors
The Colors section sets the sidebar's colour palette. Pick a colour for each item below and the Preview panel updates as you go.
Colour | What It Colours |
Primary | Text and headings |
Secondary | Subtitles and muted text |
Accent | Highlights and focus |
Background | The sidebar background |
Primary Button | The fill of primary buttons |
Primary Button Text | The text on primary buttons |
Card Background | Card surfaces |
Card Border | Card outlines |
Border | Dividers and separators |
Note
The switch next to Colors is on by default. Turn it off if you want your custom CSS or your theme to control the colours instead. The colour pickers are hidden while it is off.
Sizing
The Sizing section sets the sidebar's width, its Z-Index and whether it floats.
Width
The Width field sets how wide the sidebar panel is in pixels. The default is 450px, which works well for most themes. It can be set between 300 and 600px.
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, such as navigation menus, sticky headers or 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 checked, 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. It is off by default.
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 Enable animations is checked, the sidebar animates when customers open and close it. Animations are on by default.
Check or uncheck Enable animations to control whether the sidebar animates
Choose the Animation style: Slide (the default) or Fade
For Developers
Slide applies the CSS classes ms-animate-slide-in and ms-animate-slide-out. Fade applies ms-animate-fade-in and ms-animate-fade-out. Target them in the Custom CSS editor to customise the animation.
Custom CSS
The Custom CSS editor gives you full control over the sidebar's visual styling. You can target any element in the sidebar using dedicated CSS classes that Mage Loyalty provides.
The editor includes syntax highlighting, a Format button to tidy your code, and an Expand button to open it full-screen for easier editing.
For Developers
Custom CSS is intended for developers or technically confident merchants. If you are not comfortable writing CSS, the Colors settings cover most common customisation needs without requiring any code.
CSS Variables
The fastest way to customise colours via CSS is to override the built-in CSS variables. These variables control the core colour values throughout the entire sidebar, changing one variable updates every element that uses it.
CSS Variable | What It Controls |
--mage-sidebar-primary | Primary brand colour: buttons, highlights, and key interactive elements |
--mage-sidebar-secondary | Secondary colour: supporting text and secondary UI elements |
--mage-sidebar-accent | Accent colour: badges, tags, and emphasis elements |
--mage-sidebar-bg | Main sidebar background colour |
--mage-sidebar-card-bg | Background colour of cards and panels within the sidebar |
--mage-sidebar-card-border | Border colour of cards and panels |
--mage-sidebar-border | General border colour used throughout the sidebar |
--mage-sidebar-width | Width of the sidebar panel |
--mage-sidebar-z-index | Stack order of the sidebar relative to other page elements |
Example — overriding colours using CSS variables:
:root { --mage-sidebar-primary: #531005; --mage-sidebar-secondary: #9d6256; --mage-sidebar-accent: #ff4114; --mage-sidebar-bg: #fffaf7; --mage-sidebar-border: #f0e0d8; } |
Targeting Sidebar Elements with CSS Classes
Every element in the sidebar has a dedicated CSS class you can target for more specific styling. Classes follow the .mage-sidebar naming convention.
Common classes:
/* Overall sidebar shell */ .mage-sidebar { } .mage-sidebar__header { } .mage-sidebar__content { }
/* Loyalty program block */ .mage-sidebar-loyalty-program { } .mage-sidebar-loyalty-program__points-card { } .mage-sidebar-loyalty-program__tier-card { }
/* VIP tiers */ .mage-sidebar-vip-tiers__badge { }
/* Referral block */ .mage-sidebar-referral__code { }
/* Welcome back section */ .mage-sidebar-welcome-back__points { } .mage-sidebar-welcome-back__tier-badge { } |
ℹ️ Note
The full list of available CSS classes is accessible directly in the Custom CSS editor. Type .mage-sidebar and the editor will show autocomplete suggestions for all available classes.
Common Mistakes to Avoid
Common Mistake
Uploading a logo without a transparent background: a logo with a white or coloured background will show a visible box around it if the sidebar background is a different colour. Use a PNG with a transparent background for the cleanest result.
Common Mistake
Writing CSS without checking the Preview: always use the Preview panel to check your CSS changes look correct before saving. CSS errors or unintended overrides can break the sidebar layout.
Common Mistake
Forgetting to save after making design changes: colour changes, logo uploads, and CSS edits are all lost if you navigate away without clicking Save.
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.
Troubleshooting
My colour changes are not appearing on the storefront
Confirm you clicked Save after making changes.
Open the storefront in an incognito browser window to rule out browser caching showing an outdated version.
If you are using Custom CSS with colour overrides, check that the CSS variable names are spelled correctly. A typo in a variable name means the override will not apply.
The logo is showing with a white box around it
This happens when the logo file has a white or solid background. Re-export your logo as a PNG with a transparent background and re-upload it.
Custom CSS is breaking the sidebar layout
Click Format in the CSS editor to check for obvious syntax errors.
Comment out sections of your CSS one at a time to identify which rule is causing the problem.
If you need help identifying a CSS issue, reach out via our live chat support. The founders are technical and can help directly.
The sidebar is appearing behind other elements on my theme
Increase the Z-Index value on the Design tab. 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 Balance Bar style for the Loyalty Program block on stores where the sidebar feels busy.
The animation is not working
Confirm Enable animations is checked on the Design tab.
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.