Custom CSS lets you go further than the logo, banner and colour settings. You can load your own brand fonts, change text sizes and spacing, and style individual emails differently. It is available on every plan.

If you only need a logo, a banner and your brand colours, you do not need CSS. See How to Apply Your Branding and Design instead.

Where to Add Custom CSS

From your Shopify admin, open the Mage Loyalty app.
In the left menu, click Email Templates.
In the sidebar, under Settings, click Email Design.
Scroll to the Custom CSS card and type or paste your CSS.
Click Save.

The Live Preview updates as you type, so you can see the result before saving. Your CSS applies to every loyalty email unless you target a specific one.

The Classes You Can Target

Every part of a Mage email has a class name. Start typing a class in the editor and it will autocomplete for you.

Class	What it targets
`.mage-email__title`	The main heading (Heading 1 in the email body)
`.mage-email__heading`	Smaller headings (Heading 2 and Heading 3)
`.mage-email__text`	Paragraph text in the email body
`.mage-email__link`	Links inside the body text
`.mage-email__body`	The whole body area. Set a font here and the headings and text inherit it
`.mage-email__logo`	Your logo image, or your store name if no logo is uploaded
`.mage-email__banner`	The banner image
`.mage-email__button`	The call to action button
`.mage-email__card`	The white card that holds the email content
`.mage-email__footer`	The footer area underneath the card
`.mage-email__unsubscribe`	The unsubscribe line in the footer
`.mage-email__footer-text`	The "Sent as part of our loyalty program" line

If a change does not seem to apply, add !important to the end of the line, before the semicolon. For example: color: #333333 !important;

Recipe: Add a Font from Google Fonts

Go to fonts.google.com and choose your font.
Note the exact family name, for example Roboto.
Paste the CSS below into the Custom CSS editor and replace Roboto with your font name in both places.
Click Save.

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

.mage-email__body {
  font-family: 'Roboto', Arial, sans-serif;
}

Setting the font on .mage-email__body covers your headings, paragraphs and button text in one go.

The footer keeps the default font because it sits outside the body. To match it up, add this as well:

.mage-email__logo,
.mage-email__unsubscribe,
.mage-email__footer-text,
.mage-email__powered-by {
  font-family: 'Roboto', Arial, sans-serif !important;
}

Recipe: One Font for Headings, Another for Body Text

This is the most common brand setup. The example below loads two Google Fonts and uses one for headings and one for paragraphs.

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Lato:wght@400;700&display=swap');

.mage-email__title,
.mage-email__heading {
  font-family: 'Playfair Display', Georgia, serif;
}

.mage-email__text,
.mage-email__button {
  font-family: 'Lato', Arial, sans-serif;
}

Replace Playfair Display with your heading font and Lato with your body font. Keep the fallback (Georgia, serif or Arial, sans-serif) at the end of each line.

Recipe: Use a Font from Your Shopify Theme

If your brand font is not on Google Fonts, you can use the font file your theme already uses.

Step 1: find the font file address

In your Shopify admin, go to Content then Files.
Find your font file. It usually ends in .woff2. If it is not there, upload it, or ask your theme developer for the link.
Click the copy link icon next to the file to copy its address. It will start with https://cdn.shopify.com.

Step 2: add it to your emails

Paste the CSS below, replacing the family name and the address with your own.

@font-face {
  font-family: 'My Brand Font';
  src: url('https://cdn.shopify.com/s/files/1/0000/0000/files/MyBrandFont.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

.mage-email__body {
  font-family: 'My Brand Font', Arial, sans-serif;
}

If your theme code shows an address starting with //cdn.shopify.com, you can paste it as is. We will convert it to https:// automatically when you save.

Adding bold and italic versions

Each weight and style needs its own block, all using the same family name. Then bold and italic text in your emails will use the right file automatically.

@font-face {
  font-family: 'My Brand Font';
  src: url('https://cdn.shopify.com/s/files/1/0000/0000/files/MyBrandFont-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'My Brand Font';
  src: url('https://cdn.shopify.com/s/files/1/0000/0000/files/MyBrandFont-Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
}

Which Email Apps Show Custom Fonts

Custom fonts work in Apple Mail, the iPhone and iPad Mail apps, Samsung Mail and most other mobile email apps.

Gmail and Outlook do not load custom fonts. Customers reading in those apps will see the fallback font instead. This is a limitation of those apps and applies to every email platform, not just Mage.

Always list a fallback after your font name so those readers still see something close to your brand. Use a serif fallback (Georgia, serif) for a serif brand font, and a sans-serif fallback (Arial, sans-serif) for a sans-serif one.

Style a Single Email

Each email has its own class, so you can style one without affecting the rest.

To find the name, open the email from Email Templates and look at the end of the web address. For example, if the address ends in /app/email-templates/points-earned, the name is points-earned and the class is .mage-email--points-earned.

.mage-email--points-earned .mage-email__title {
  font-size: 32px;
}

Put the email class first, then a space, then the part you want to change.

Style a Group of Emails

You can also style every email in a category at once.

Category	Class
Points and Rewards	`.mage-email--category-points-rewards`
Points Expiry	`.mage-email--category-expiry`
VIP Tiers	`.mage-email--category-vip-tiers`
Referrals	`.mage-email--category-referrals`
Memberships	`.mage-email--category-memberships`
Wishlist	`.mage-email--category-wishlist`
Cashback	`.mage-email--category-cashback`
AI Receipts	`.mage-email--category-ai-receipts`
Photo Challenges	`.mage-email--category-photo-challenges`

.mage-email--category-referrals .mage-email__button {
  border-radius: 0 !important;
}

Styling the Wishlist Product Grid

Wishlist reminder, back in stock and price drop emails include a grid of product cards. These have their own classes.

Class	What it targets
`.mage-wishlist-grid`	The whole product grid
`.mage-wishlist-cell__image`	The product image
`.mage-wishlist-cell__name`	The product name
`.mage-wishlist-cell__variant`	The variant line, such as size or colour
`.mage-wishlist-cell__price`	The price
`.mage-wishlist-cell__old-price`	The crossed out price on price drop emails
`.mage-wishlist-cell__new-price`	The reduced price on price drop emails
`.mage-wishlist-cell__discount`	The "25% off" line

These parts have built in styling, so add !important when changing colours or sizes.

.mage-wishlist-cell__name {
  font-size: 16px !important;
  text-transform: uppercase !important;
}

Limits and Rules

Fonts and files can only be loaded from trusted sources. These are allowed:

fonts.googleapis.com and fonts.gstatic.com (Google Fonts)
use.typekit.net and p.typekit.net (Adobe Fonts)
cloud.typography.com
cdn.shopify.com (your Shopify files and theme assets)

Addresses must start with https://. If you paste something from another source, saving will fail with a message telling you which address was rejected.

The button colours cannot be changed with CSS. Use the Button color and Button text pickers in the Design and Colors card instead. Everything else about the button, including its font, padding and corner radius, can be styled with CSS.

Your CSS must be under 20KB. This is far more than most stores need.

Tips

Preview a real email. In the Live Preview, click the template name at the top right to preview any email you have enabled, not just the generic example.
Send yourself a test. Open any email from Email Templates and click Send test email. Check it on your phone as well as your computer.
Keep it simple. Email apps support far less styling than websites do. Fonts, colours, sizes, spacing and borders are safe. Animations, shadows and layout changes are not reliable.

Troubleshooting

My font is not showing

Check whether you are reading the email in Gmail or Outlook. Neither of those loads custom fonts.
Make sure the font name in your rule matches the name in the @import or @font-face block exactly, including capital letters.
Make sure the address is from one of the allowed sources listed above.

My change is not applying

Add !important before the semicolon, for example font-size: 20px !important;
Check you are targeting the right part. Paragraph text is .mage-email__text, not .mage-email__body.

Saving fails with an error

The message names the problem, usually an address that is not from an allowed source, or one that is not https://. Fix that line and save again.

I want to start over

Clear the Custom CSS box and click Save. Your emails go back to the standard design, and your logo, banner and colour settings are unaffected.

Advanced Email Customisation