Styling Your Wishlist Dialog
The wishlist dialog ships with a clean default design that looks great in most themes. When you need it to match your brand precisely, you can override any part of it with custom CSS.
All classes follow BEM naming conventions with the mage-wishlist__* prefix.
How Custom CSS Works
You can add custom CSS via:
Custom CSS field in the wishlist builder (Advanced tab)
Your Shopify theme stylesheet — target
.mage-wishlist__*classes directly
We recommend using the code editor in the Advanced tab. The code editor features code autocomplete, code snippets and formatting.
Start typing .mage or --mage for autocomplete, and use snippets like card, header, signal-price-drop, or theme-vars to drop in pre-built blocks you can tweak.
CSS Variables (Theming)
The dialog uses 16 CSS custom properties. Override these to restyle the whole widget without touching individual classes.
Variable | Default | Controls |
|
| Main dialog background, input backgrounds |
|
| Subtle fills — variant dropdown background, card image placeholder, hovers |
|
| Primary text — titles, prices, body copy |
|
| Secondary text — availability info, captions, eyebrow labels |
|
| Hairlines, input borders, divider under the header |
|
| Primary button background (Add to cart, Bulk add) |
|
| Primary button text color |
|
| Price drop badge + sale-price text |
|
| "Only N left" badge text color |
|
| Sold-out badge background |
|
| Sold-out badge text |
|
| Base corner radius for cards, inputs, buttons |
|
| Display font for the dialog title, empty-state headings |
| system sans-serif stack | Body and UI font |
| inherits | Uppercase eyebrow labels ("3 ITEMS SAVED", signal badges, section headings) |
|
| Stacking order — raise if a fixed theme widget is sitting on top |
Override variables in :root or scope to .mage-wishlist for higher specificity.
Shell & Layout
Class | Description |
| Root wrapper (present on the backdrop element) |
| Full-screen overlay behind the dialog |
| Dialog panel (centered, rounded, max-width 960px) |
Header
Class | Description |
| Top bar (padding, bottom border) |
| Left block — eyebrow + title wrapper |
| "N ITEMS SAVED" label (uppercase, tracked) |
| Clickable breadcrumb variant on the collection view |
| Main title (display font, 32px) |
| Close button (rounded, bordered) |
Body
Class | Description |
| Scrollable content area under the header (padding, gap) |
Toolbar (Availability + Add-All-to-Cart)
Shown on the home view above the items grid when there are items to show.
Class | Description |
| Toolbar row (flex, space-between) |
| "N of M available" availability text |
| "Add all to cart" button (pill, bordered) |
| Icon wrapper inside the bulk-add button |
Section Headers
Used for "Items" and "Collections" section titles.
Class | Description |
| Section header row (flex, baseline alignment) |
| Section label (uppercase, tracked, muted) |
| Trailing action link (e.g. "View all") |
Items Grid
Class | Description |
| Items section container |
| Product grid (auto-fill columns, 184px min card width) |
| "Load more" button wrapper |
Product Card
Class | Description |
| Card wrapper (flex column, stretched to row height) |
| Image frame (square, rounded, clipped) |
| Link wrapping the image |
| Product image (object-cover) |
| Heart button overlay (top-right of the image) |
| Sold-out veil over the image |
| Title + price block |
| Product title (clamped to 2 lines) |
| Price row (current + compare-at) |
| Price modifier when the product is not purchasable |
| Current price |
| Current price when on sale (usually red) |
| Compare-at price (strikethrough) |
| Variant dropdown wrapper (shown only for multi-variant) |
| Action row (Add-to-cart + more-menu button) |
Signal Badges
Small pills that overlay the card image to highlight a state.
Class | Description |
| Base badge (frosted background, rounded, uppercase) |
| Price drop modifier (uses |
| "Only N left" modifier (uses |
| Sold-out modifier (uses |
| Leading status dot |
Buttons
Class | Description |
| Base button styles (font, cursor, transitions) |
| Primary add-to-cart CTA (flex-1, filled) |
| Disabled back-in-stock notify state |
| Square more-menu button (three-dots) |
| Primary button (logged-out CTA, rename save) |
| Subtle button (muted fill — cancel, secondary actions) |
| Destructive text button (for inline delete) |
| Inline destructive toolbar action (trash + label) |
| Solid danger button (delete-confirm sheet) |
Inputs
Class | Description |
| Variant dropdown (custom chevron, rounded) |
| Text input (rename, create collection, share URL) |
Empty / Logged-Out / Loading States
Class | Description |
| Empty-wishlist container (centered, padded) |
| Empty-state heading (display font, 20px) |
| Empty-state body copy (muted) |
| Logged-out CTA container (centered) |
| Sign-in heading (display font, 22px) |
| Sign-in body copy (muted) |
| Loading state container (centered) |
| Loading spinner (28px, border animation) |
Collections (Tiles)
Shown on the home view under the items grid.
Class | Description |
| Collections section container |
| Tile row (flex, wraps on desktop, scrolls on mobile) |
| Tile button (pill shape, hover lifts) |
| Cover stack wrapper (holds 1 or 2 product thumbnails) |
| Individual cover circle |
| Name + count stack to the right of the covers |
| Collection name |
| "N items" subtitle |
Collection Page
Class | Description |
| Toolbar on the collection page (share / rename / delete) |
Rename Sheet
Class | Description |
| Sheet body for rename form |
Share Drawer
Class | Description |
| Body wrapper |
| Helper copy above the link |
| Input + Copy button row |
Delete Confirm
Class | Description |
| Confirmation sheet body |
| Collection name in the confirmation |
| Destructive-action explanation copy |
| Button row (Cancel + Delete) |
Bottom Sheet (Action Sheet)
Shown when the shopper taps the three-dots button on a card.
Class | Description |
| Dim backdrop behind the sheet |
| Sheet container (bottom on mobile) |
| Sheet header (product name + close) |
| Product title in the sheet header |
| Close button |
| Action list container |
| Individual action row |
| Destructive action (red text) |
Collection Picker
Shown when the shopper adds an item to a collection from the action sheet.
Class | Description |
| Collections list |
| Collection row (clickable) |
| "Create new collection" option |
| Collection name |
| Item count on the right |
| Inline create-collection form |
| Create form button row |
Common Recipes
Match your brand colors in one shot
:root { --mage-wishlist-surface: #ffffff; --mage-wishlist-text: #0f172a; --mage-wishlist-text-muted: #64748b; --mage-wishlist-border: #e2e8f0; --mage-wishlist-button-bg: #4f46e5; --mage-wishlist-button-text: #ffffff; --mage-wishlist-radius: 12px; }Swap the dialog title font
:root { --mage-wishlist-font-display: 'Playfair Display', Georgia, serif; }Replace the price-drop accent
:root { --mage-wishlist-price-drop: #16a34a; }Raise the dialog above a sticky theme header
:root { --mage-wishlist-z-index: 2147483000; }Tighten the card grid
.mage-wishlist__grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 32px 24px; }Reorder sections on the home view
The home view lays out .mage-wishlist__toolbar, .mage-wishlist__items, and .mage-wishlist__collections as flex children — use order to rearrange them without markup changes:
.mage-wishlist__items { order: 0; } .mage-wishlist__toolbar { order: 1; } .mage-wishlist__collections { order: 2; }Need help?
If you're trying to match a specific pattern from your theme and can't work out the right selector, reach out and we'll help.