Introduction

Maintain a consistent brand image by adding a touch of uniqueness to your emails through CSS.

✨ 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 emails unless specified
Save changes.

CSS class name examples

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

Title

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

Subtitle

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

Border

/* The border of the email */
td div {
  border: 1px !important;
}

Body

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

Code display

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

Button

/* 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;
}

Subtext

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

Footer

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

Links

/* 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;
}

Applying CSS to only a specific template

Let's say you want to edit the title in the Points Earned email notification only. If you use the code below, you will only edit the title in the Points Earned email.

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

In case you want to edit other emails, replace points-earned with the name of your other templates.

points-redeemed
birthday
referral-completed
reward-expiry-warning
reward-expiry-last-chance
points-expiry-warning
points-expiry-last-chance
vip-tiers

You can also edit multiple emails at the same time by separating the class selectors with a comma.

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

Importing fonts

Use the @font-face method instead if the font already exists in your Shopify theme. For example:

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

Once imported, you can customize class selectors with the fonts imported. For example:

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

/* Title */
.email_title {
  font-family: 'Your Font';
}