Use the Custom CSS editor to change how your referral campaign looks beyond the colours and layout options on the Design tab. This article lists every class the campaign uses, the snippets built into the editor, and the developer tools in the campaign preview.
Referral Campaigns are available on the Growth plan and above.
Where to Add Custom CSS
In Mage Loyalty, click Referrals in the left menu and open Referral Campaigns.
Find your campaign in the list, open its actions menu and click Edit.
In the campaign editor, open the Advanced tab.
Type your CSS into the Custom CSS box. The preview on the right updates as you type.
Save your changes.
Use Format to tidy your CSS and Expand to give the editor more room while you work.
Your custom CSS applies everywhere the campaign appears: the campaign block on your storefront page and the site-wide popup. You do not need to add it twice.
Design Settings and Custom CSS
Colours and sizes from the Design tab are applied as inline styles on elements such as the card, title, subtitle, inputs, buttons, URL box and footer. Inline styles win over normal CSS rules, so a rule like .mage-referral-campaign__button { background-color: red; } will not change a button that already has a colour set on the Design tab.
You have two options:
Add
!importantto the properties you want to override.Tick Disable inline styling at the bottom of the Design tab. The design colours and sizes are then no longer applied, and your CSS controls the look completely.
Autocomplete and Snippets
Type a full stop followed by a few letters, for example .mage, and the editor suggests matching campaign classes.
Snippets insert a ready-made block of CSS with placeholder values. Type the snippet name on an empty line (not inside a rule) and pick it from the list. Press Tab to move between the placeholder values.
Snippet | What it inserts |
| Background colour, border radius and padding for |
| Font size, weight and colour for |
| Background colour, text colour, border colour and border radius for |
| Background colour, border colour, border radius and text colour for |
| Border radius and padding for |
| Background, border colour and border radius for |
| Background, border colour and border radius for |
| Font size, colour and opacity for |
| Padding and background colour for |
| Backdrop colour for |
| Rules for the older email dialog classes ( |
| Border radius, padding, font size and weight for |
The email-dialog snippet and the __email-dialog-* suggestions in autocomplete target classes that no longer exist on the page, so rules written with them have no effect. To style the email share form, use the __overlay-* classes listed under Email Share and Referral Stats Overlays below.
Inspecting Classes in the Preview
The campaign preview has built-in developer tools for finding class names. Click the Developer button in the top-left corner of the preview to show them.
Developer mode
In the Developer menu, click the first button (Developer mode) to turn it on.
Hover over any part of the campaign to see its campaign classes.
Click an element to pin it. Press Esc to unpin, or press it again to turn Developer mode off.
Press C to copy an empty CSS rule that targets the selected element, ready to paste into the editor.
Press a number key from 1 to 9 to copy that class from the list, or click a class to copy it.
Classes in view
In the Developer menu, click the second button (Classes in view) to see every campaign class on the current preview, grouped by component. Click a class to scroll to it in the preview, or use the copy button to copy its selector.
Use the page state tabs above the preview (Advocate Signup, Advocate Share, Friend Claim, Friend Reward) to inspect each view. On Advocate Share, click the email button or the referrals link inside the preview to open the email share form or the referral stats.
Page States
The campaign shows one of four views depending on who is visiting. Each view uses a different set of classes inside the card.
Page state | What it shows |
Advocate Signup | The sign-up or log-in form: |
Advocate Share | The advocate's referral link and share buttons, wrapped in |
Friend Claim | The friend's email form: |
Friend Reward | The friend's discount code, wrapped in |
Every class in this table starts with .mage-referral-campaign, for example .mage-referral-campaign__share.
CSS Class Reference
Block and layout
Class | What it styles |
| Root container of the campaign block |
| Root modifier when the card is aligned left (Card layout only) |
| Root modifier when the card is aligned right (Card layout only) |
| Root modifier when a background image is set (Card layout only) |
| Root modifier for the Two Columns layout (chosen under Layout on the Design tab) |
| Panel that shows the background image above the card on mobile. Hidden on larger screens. |
| Placeholder shown while the campaign loads |
| Content card that holds the title, form or share tools, and footer |
Card content
Class | What it styles |
| Heading |
| Text under the heading |
| Error message |
| Form wrapper on Advocate Signup and Friend Claim |
| Name and email inputs |
| Checkbox row for terms and email marketing opt-in |
| Terms and conditions link |
| Main action button |
| Footer text |
| Separator between the footer text and the referrals link |
| "View my referrals" link on Advocate Share. Only shown to logged-in customers. |
Advocate Share
Class | What it styles |
| Wrapper around the referral link and share buttons |
| Box that holds the referral link and copy button |
| Referral link text field |
| Copy button (also used for the discount code on Friend Reward) |
| Row of share buttons |
| Every share button |
| X (Twitter) button |
| Facebook button |
| WhatsApp button |
| Email button, which opens the email share form |
| SMS button |
Stack layout modifiers
Added on top of the normal classes when Share buttons layout is set to Stack on the Advocate Share page.
Class | What it styles |
| Share wrapper in stack layout |
| Referral link box in stack layout |
| Share buttons arranged in a column |
| Full-width pill-shaped share buttons |
In Stack layout, target the copy button with .mage-referral-campaign__url-box--stack .mage-referral-campaign__copy-btn.
Friend Reward
Class | What it styles |
| Wrapper around the discount code and shop button |
| Box that holds the discount code and copy button |
| Discount code text |
Two Columns layout
Class | What it styles |
| Wrapper around the two columns |
| Left column that holds the card |
| Right column that shows the image or column colour |
Email Share and Referral Stats Overlays
The email share form and the referral stats open inside the campaign. In the Card layout they replace the card content. In the Two Columns layout they open as a panel over the image column. Both use a fixed white background and dark text, and only pick up the button colour from the Design tab.
Class | What it styles |
| White container for the overlay in the Card layout |
| Added to the container while it fades out |
| Panel for the overlay in the Two Columns layout |
| Added to the panel while it fades out |
| Overlay content wrapper |
| Close button |
| Overlay heading |
| Label and input pair in the email form |
| Field label |
| To and subject inputs |
| Additional note field |
| Send button (also has |
| Error message |
| Success message |
Referral stats
Class | What it styles |
| Loading message |
| Row showing the referred and completed totals |
| Each total |
| Message shown when there are no referrals yet |
| List of referrals |
| Each referral |
| Email and date group |
| Friend email |
| Referral date |
| Status text |
| Status modifier for Invited |
| Status modifier for Pending |
| Status modifier for Completed |
The status modifiers have no styling by default, so you can use them to build your own status badges:
.mage-referral-campaign__stats-status--completed { color: #16a34a;}.mage-referral-campaign__stats-status--pending { color: #d97706;}Site-wide popup
Class | What it styles |
| Full-screen dark backdrop behind the popup |
| Popup content area that holds the campaign |
| Round close button in the top-right corner |
Inside the popup the campaign root loses its minimum height and padding, so target .mage-referral-popup__content .mage-referral-campaign for popup-only changes.
Mobile Layout
Below 768px wide:
The Two Columns layout stacks. The image column moves to the top (at least 250px tall) and the form column sits below it.
In the Card layout with a background image, the image is removed from behind the card and shown in
.mage-referral-campaign__mobile-mediaabove it instead, and the card loses its rounded corners.The email share and referral stats panel in the Two Columns layout covers the whole block instead of just the image column.
To target the same screens in your own CSS:
@media (max-width: 767px) { .mage-referral-campaign__title { font-size: 24px; }}Common Mistakes to Avoid
Your CSS has no effect on colours. The Design tab colours are inline styles. Add !important to your rule, or tick Disable inline styling on the Design tab.
Styling the email form with the old email-dialog classes. Those classes are no longer on the page. Use the __overlay-* classes instead.
Writing selectors that are too broad. Custom CSS is added to the whole page, so a rule like button { } also changes your theme's buttons. Always start selectors with a campaign class such as .mage-referral-campaign.
Troubleshooting
My CSS shows in the preview but not on my store
Check that you saved the campaign after editing.
Refresh the storefront page, and check it in a private window in case your browser is showing an old version.
Use your browser tools to check whether a theme rule with a stronger selector is overriding yours.
I cannot find a class for an element
Click Developer in the preview, turn on Developer mode, and hover over the element.
Switch to the right page state tab first. Share buttons only appear on Advocate Share, and the discount code only appears on Friend Reward.
Share buttons only appear for the sharing options that are turned on for your store.
The popup looks different from the campaign page
The popup removes the block's minimum height and padding. Use
.mage-referral-popup__content .mage-referral-campaignfor popup-only rules.