Introduction

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

Getting started with CSS

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

1. From the BrandLift Dashboard, go to Settings
2. Click Emails and scroll down to Advanced
3. You should see the feature enabled under the Custom CSS heading
4. Add styles to your email – this will apply to emails unless specified
5. 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.

.brandlift-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.

.brandlift-preset-loyalty-points-earned .email_title, .brandlift-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';}