✨ This feature is available on the Premium and Enterprise plans
Getting started with CSS
If you have the Custom CSS enabled you should see it under the Custom CSS heading
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
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;
}