Customize the look and feel of your referral campaign block using the built-in CSS editor. You can find it in the Advanced tab when editing a referral campaign, under Custom CSS.
The editor provides autocomplete for all available CSS classes and ready-made snippets to get you started quickly.
How It Works
All referral campaign elements use CSS classes prefixed with .mage-referral-campaign. The popup overlay uses .mage-referral-popup.
Type any of these prefixes in the editor and autocomplete will suggest matching classes.
CSS Snippets Reference
The editor includes built-in snippets that insert pre-configured blocks of CSS with sensible defaults. Start typing a snippet name and select it from the dropdown to insert it.
Each snippet includes placeholder values you can tab through and edit.
Snippet | Description |
| Card background color, border-radius, and padding |
| Title and subtitle font size, weight, and color |
| Primary action button colors and border-radius |
| Text input background, border, and text color |
| Social share button colors for each platform (Twitter, Facebook, WhatsApp, Email, SMS) and shared shape |
| Referral URL container and copy button styling |
| Discount code display container and text size |
| Footer text size, color, and opacity |
| Form panel padding and media panel background settings for the two-column layout |
| Popup overlay backdrop color, content max-width, and close button styling |
| Email share dialog input fields and send button |
| Stack layout variant overrides for social and copy buttons (pill shape, larger padding) |
CSS Class Reference
Campaign Block
Class | Description |
| Root container (flex, min-height 500px, centered) |
| Left-aligned content |
| Right-aligned content |
| Has a background image set |
| Two-column layout variant |
| Loading skeleton (animate-pulse) |
| Content card (rounded-2xl, padded) |
| Heading (bold, tight tracking) |
| Subtitle (leading-relaxed) |
| Error message (red-400, red-tinted bg) |
| Sign-up form container |
| Text input (rounded-lg, border, outline-none) |
| Checkbox row (flex, items-center, gap) |
| Terms & conditions link (underlined) |
| Primary action button (full-width, semibold, border-2) |
| Referral URL container (flex, rounded-lg, border, semi-transparent bg) |
| URL text input (mono, transparent bg, no border) |
| Copy to clipboard button (rounded, semibold) |
| Social share buttons row (flex, gap) |
| Base social share button (flex-1, rounded-lg, white text) |
| Twitter/X button (black bg) |
| Facebook button (blue bg) |
| Email button (zinc-600 bg) |
| WhatsApp button (green bg) |
| SMS button (green bg) |
| Discount code container (flex, rounded-lg, border, semi-transparent bg) |
| Discount code text (mono, lg, semibold, tracked) |
| Footer text (mt-6, opacity-60) |
| Mobile background image panel (hidden by default, shown on mobile with bg image) |
Stack Layout Modifiers
Applied when the campaign uses the stack share layout.
Class | Description |
| Stack variant URL box |
| Stack variant social row (flex-col, gap-3) |
| Stack variant social button (rounded-full, py-4, bold, tracked) |
| Stack variant copy button (full-width, rounded-full, py-4, bold, tracked) |
Two-Column Layout
Class | Description |
| Two-column flex wrapper (min-height 500px, full-width) |
| Form column (w-1/2, centered, padded) |
| Media/image column (w-1/2, background-cover) |
On mobile (below 768px), the columns stack vertically — media on top, form below.
Email Share Dialog
Class | Description |
| Dialog form container (flex-col, gap-4) |
| Form field wrapper (flex-col, gap) |
| Field label (14px, semibold, gray-900) |
| Text input (rounded-lg, gray-200 border, white bg) |
| Message textarea (rounded-lg, gray-200 border, white bg, no-resize) |
| Send button (full-width, rounded-lg, gray-900 bg, white text) |
| Error banner (red-50 bg, red-600 text) |
| Success banner (green-50 bg, green-600 text) |
Popup
Class | Description |
| Fixed fullscreen backdrop (black/60, flex, centered, z-9999) |
| Popup content wrapper (max-w-4xl, max-h-90vh, overflow-y-auto) |
| Close button (absolute top-right, rounded-full, black/40 bg, white text) |
Tips
Start with a snippet, then refine. Insert the
cardorbuttonsnippet, adjust the placeholder values to match your brand, and preview the result.Use the class inspector in preview mode. When previewing your campaign in the editor, click the gear icon in the top-right corner to enable the class inspector. Hover over any element to see its CSS classes. Press C to copy them to your clipboard.
The popup inherits campaign styles. Any custom CSS you write for the campaign block also applies when the campaign is displayed as a popup. Use the
popupsnippet to customize the overlay and close button independently.Stack layout is a separate set of classes. If your campaign uses the stack share layout, the social buttons and copy button get additional
--stackmodifier classes. Use thestack-layoutsnippet to customize these independently from the default inline layout.Mobile responsive. The two-column layout automatically stacks on mobile (below 768px). The media column moves above the form column on small screens.