Introduction

Maintain a consistent brand image by adding a touch of uniqueness to your emails through CSS. Customize colors, fonts, spacing, and layout to match your brand perfectly.

✨ This feature is available on the Scale and Plus plans. See pricing →

Getting started with CSS

Follow the instructions below to customize all emails sent by Rivo using CSS.

From the Rivo Dashboard, go to Settings
Click Emails and scroll down to Advanced
You should see the feature enabled under the Custom CSS heading
Add styles to your email – this will apply to all emails unless you target specific templates
Save changes and test your emails to see the styling applied

CSS class reference

You can copy these class selectors to customize your email templates or inspect elements on the email design page to get the names.

Email Content

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

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

/* The main body text and content area */.email_subtext {  background: #FEFCF2 !important;  font-family: 'Avenir Next', sans-serif !important;  color: #637381 !important;  font-size: 14px !important;}

Buttons and Links

/* The primary call-to-action button */.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;  border-radius: 25px !important;}

/* Any links in the email */a {  color: #000 !important;  font-family: 'Avenir Next', sans-serif !important;  font-weight: 300 !important;  text-decoration: none !important;}/* Hover effect on links */a:hover {  color: #D6BD6D !important;}

Footer

/* The footer text and links */.email_footer {  font-family: 'Avenir Next', sans-serif !important;  line-height: 15px !important;  color: #637381 !important;  font-size: 11px !important;}

Special Content Areas

/* Coupon codes and discount codes */.coupon-code {  border: 2px dotted #ccc !important;  background: #fff !important;  border-radius: 8px !important;  font-weight: 800 !important;  font-size: 18px !important;  letter-spacing: 2px !important;  padding: 20px !important;  text-align: center !important;}

/* Referral links display */.advocate-referral-link {  border: 1px dashed #000000 !important;  background: #fff !important;  border-radius: 8px !important;  letter-spacing: 1px !important;  padding: 20px !important;  text-align: center !important;}

/* Gift card notes */.gift-card-note {  border: 1px dashed #000000 !important;  background: #fff !important;  border-radius: 8px !important;  padding: 20px !important;  text-align: center !important;}

Layout and Structure

/* Main email container */.rivo-container {  max-width: 600px !important;  margin: 0 auto !important;}

/* Email content wrapper */.content {  max-width: 500px !important;  margin: 15px auto !important;  background: #fff !important;  border-radius: 3px !important;  border: 1px solid #eee !important;}

/* Main tables in email */.rivo-table {  width: 100% !important;}

/* Text alignment classes */.align-center { text-align: center !important; }.align-left { text-align: left !important; }.align-right { text-align: right !important; }

Logo and Images

/* Email logo container */.email-logo-container {  padding: 0 !important;}

/* Main logo holder */.main-email-logo-holder.logo img {  max-height: 144px !important;  max-width: 400px !important;}

/* Banner image holder */.main-email-logo-holder.banner img {  max-height: 480px !important;}

Targeting specific email templates

Each email template has a unique CSS class that allows you to style specific emails differently. Use the format .rivo-preset-loyalty-[template-name] to target individual templates.

Example: Styling only Points Earned emails

.rivo-preset-loyalty-points-earned .email_title {  font-size: 50px !important;  color: #ff6b35 !important;}

Complete list of email templates

Replace [template-name] with any of these template names:

points-earned - When customers earn points
points-redeemed - When customers redeem points for rewards
invite-friend - Referral invitation emails
advocate-signup - When someone joins through referral
advocate-stats - Referral performance updates
referred-signup - Confirmation for referred customers
referral-ineligible - When referral doesn't qualify
referrer-reward - Reward for successful referral
referrer-delayed-reward - Delayed referral rewards
birthday - Birthday reward emails
anniversary - Anniversary celebration emails
reward-expiry-warning - First expiration warning
reward-expiry-last-chance - Final expiration warning
points-expiry-warning - Points expiration warning
points-expiry-last-chance - Final points expiration notice
vip-tiers - VIP tier advancement notifications
membership-signup - Paid membership welcome
membership-payment-failure - Payment failed notifications
membership-cancellation - Membership cancellation
membership-rebill - Membership renewal notices
gift-card - Gift card delivery emails
gift-card-reminder - Gift card usage reminders

Styling multiple templates

You can style multiple email templates at once by separating the selectors with commas:

.rivo-preset-loyalty-points-earned .email_title,.rivo-preset-loyalty-points-redeemed .email_title,.rivo-preset-loyalty-birthday .email_title {  font-size: 50px !important;  color: #ff6b35 !important;}

Importing custom fonts

You can import custom fonts using the @import or @font-face methods. Only fonts from trusted sources are allowed for security.

Allowed font sources

fonts.googleapis.com - Google Fonts
use.typekit.net - Adobe Fonts
cloud.typography.com - Typography.com
cdn.shopify.com - Your Shopify theme fonts

Using Google Fonts

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap');.email_title {  font-family: 'Roboto', sans-serif !important;  font-weight: 700 !important;}

Using fonts from your Shopify theme

@font-face {  font-family: 'Your Custom Font';  src: url('https://cdn.shopify.com/s/files/1/1761/2711/t/248/assets/yourfont.woff') format('woff');}.email_title {  font-family: 'Your Custom Font', Arial, sans-serif !important;}

Email CSS best practices

Follow these guidelines to ensure your custom CSS works across all email clients.

Use !important declarations

Email clients often have their own default styles. Use !important to ensure your styles take precedence:

.email_title {  color: #ff6b35 !important;  font-size: 32px !important;}

Stick to email-safe CSS properties

Some CSS properties work better in emails than others. Focus on:

Colors: color, background-color
Typography: font-family, font-size, font-weight, text-align
Spacing: padding, margin
Borders: border, border-radius
Layout: width, max-width, text-align

Consider mobile devices

Many customers read emails on mobile devices. Use relative units and test your designs:

/* Use relative font sizes */.email_title {  font-size: 28px !important;}/* Ensure buttons are touch-friendly */.primary_cta {  padding: 15px 25px !important;  min-width: 120px !important;}

Maintain good color contrast

Ensure your text is readable by maintaining sufficient contrast between text and background colors:

/* Good contrast example */.email_title {  color: #2c3e50 !important;  background-color: #ffffff !important;}

Troubleshooting

Common issues and solutions when working with custom email CSS.

My styles aren't applying

Add !important: Email clients have strong default styles
Check specificity: Use more specific selectors like .rivo-preset-loyalty-points-earned .email_title
Verify class names: Make sure you're using the correct CSS class names
Test in different email clients: Some clients may strip certain styles

Custom fonts aren't loading

Check the font source: Only fonts from approved sources will load
Provide fallbacks: Always include fallback fonts like Arial, sans-serif
Use web-safe fonts: Consider using system fonts for better compatibility

Testing your changes

Send test emails: Use the email preview and send test emails to yourself
Check multiple devices: Test on both desktop and mobile email clients
Use email testing tools: Consider tools like Litmus or Email on Acid for comprehensive testing