There are three layers of design control, from the simplest to the most advanced: preset colour themes, individual colour settings, and full custom CSS.
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 Logo 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.
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 colour theme and individual colour 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.
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.
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.