All Collections
Email Campaigns
Adding Custom CSS to your Loyalty emails
Adding Custom CSS to your Loyalty emails

Add unique style or fonts to your emails to make sure they always look on brand

James Dohm avatar
Written by James Dohm
Updated over a week ago

✨ This feature is available on the Premium and Enterprise plans

Getting started with CSS

  1. If you have the Custom CSS enabled you should see it under the Custom CSS heading

  2. Add styles to your email – this will apply to emails unless specified

To apply CSS to only a specific template

Use the template preset to specify styles toward a specific template

Example:

 .rivo-preset-loyalty-points-earned .email_title { font-size:50px; }

To import a font

Use the @import or @font-face method to import a custom font.

@font-face {
font-family: "your-font";
src: url('https://cdn.shopify.com/s/files/1/1761/2711/t/248/assets/yourfont-Medium.woff') format('woff')
}

CSS class name examples

Tip: Inspect element on the email design page to get the variable names.

/* The title of the email */
.email_title {
font-family: 'Cormorant Garamond', serif !important;
font-size:40px !important;
}

/* The subtitle of the email */
.email_subtitle {
font-family: "Avenir Next", sans-serif !important;
font-size:20px !important;
}

/* The border of the email */
td div {
border: 0 !important;
font-family: "Avenir Next", sans-serif !important;

}

/* The body of the email */
tbody div {
font-family: "Avenir Next", sans-serif !important;
font-weight:500 !important;
background: #F2E8C6 !important;

}

/* The code display part of the email */
tr td {
background: #FEFCF2 !important;
font-family: "Avenir Next", sans-serif !important;

}

/* The button in the email */
.primary_cta {
color: #000!important;
background: #dbbc5e !important;
font-size: 14px !important;
min-width: 150px !important;
padding: 10px 25px!important;
text-transform: uppercase !important;
letter-spacing: 2px !important;
font-family: "Avenir Next", sans-serif !important;
}

/* The footer subtext in the email */
.email_subtext {
background:#FEFCF2 !important;
font-family: "Avenir Next", sans-serif !important;
}

/* The footer in the email */
.email_footer {
font-family: "Avenir Next", sans-serif !important;
line-height:10px !important;
}

/* Any href links in the email */
a {
color: #000 !important;
font-family: "Avenir Next", sans-serif !important;
font-weight: 300 !important;
}

/* Hover effect on those hrefs */
a:hover {
color: #D6BD6D !important;
}

Did this answer your question?