LoyaltyLion emails are included on the Classic plan and above. On the Free plan, add the Customer Emails enhancement by clicking Get enhancement on your Emails page.

About LoyaltyLion emails

You can change the wording and design of every LoyaltyLion email to match your brand. Most of the changes below need no developer.

You can edit the text of any email, or its HTML. Email templates use the Liquid template language, so you can add logic such as if statements.
Simpler changes, such as the colors of the default template or the image at the top of the email, need no code.

To customize your emails, follow these steps:

Go to Emails.
Click Edit on an email.
Click the Design tab. With the Simple template, you can change Main color and Contrast color here.
To write your own HTML, set Email HTML to Custom.

Use templates to customize your emails

1. On the Design tab, click Create a new template.... A template holds the HTML and CSS around your email, and any of your emails can use it

2. Enter a Template name, and under Copy template choose an existing template to copy or Start from scratch. Then click Create.

3. The Template HTML box opens, with the HTML <head> and CSS of the email. Changes to a template apply to every email that uses it.

The template must include {{ inner_html }} in its body, which is where each email's own content goes. Without it, you can't save the template.

Round the buttons

1. In the Template HTML, find the big-button class. This is the default button CSS:

2. To round the corners of the buttons, change the border-radius property. For a fully rounded button, set it to 50px.

border-radius: 50px;

Create a gradient

1. Add a background-image property with a linear-gradient to the big-button class. A gradient takes 2 or more colors.

background-image: linear-gradient(to right, #color1 0%, #color2 51%, #color1 100%);

2. This example uses LoyaltyLion's colors. Use any colors that suit your brand:

background-image: linear-gradient(to right, #633E98 0%, #40C5DC 51%, #633E98 100%);

3. This is the finished gradient button:

Learn more about gradient here

Make gradient change on hover

1. To make the gradient move when a customer hovers over the button, add a :hover rule for the big-button class.

.big-button:hover {}

2. Add a background-position property to it. This example uses right center.

.big-button:hover { 
  background-position: right center; 
 }

Learn more about background-position property here

Add transition to your gradient

1. To make the colors change smoothly on hover, add a transition property to the big-button class.

.big-button {
 ...
  transition:
}

2. Set the length and timing of the transition. This example takes 0.3 seconds:

.big-button {
 ...
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}

Learn more about transition property here

The finished CSS:

.big-button {
        display: inline-block;
        background-color: rgb(50, 144, 218);
        color: #fff;
        text-decoration: none;
        padding: 14px 24px;
        border-radius: 50px;
        font-size: 22px;
        background-image: linear-gradient(to right, #633E98 0%, #40C5DC 51%, #633E98 100%);
        transition: all 0.3s cubic-bezier(.25,.8,.25,1);
        background-size: 200% auto;
        width: 200px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
      }
      
      .big-button:hover {
        background-position: right center;  
      }

Customize the header image in LoyaltyLion emails

To use your own image:

The Header image field on the Content tab takes the web address (URL) of an image. You can't upload a file there, so first put your image somewhere public, such as your store's file storage, Shopify content or an image host.

With Imgur, for example:

upload your image to Imgur
right click on the image
select Copy image address
paste it into the Header image field

The Header image field is at the bottom of the Content tab.

If you use custom Email HTML, you can set the image in the HTML instead. In the default HTML it is on line 12. Replace that line with: <img src="png image address you want to use" width="60" >

The header image is 60px wide by default. Change the width on the same line to make it larger or smaller.

Change the font of your emails

LoyaltyLion emails can’t load web fonts such as Google Fonts. We remove <link> tags, @import rules and font files from email HTML before it is sent. Instead, set a list of fonts in order of preference, ending with a generic family, so each email app uses the first font it has.

Go to your LoyaltyLion Emails.
Click Edit on the email you want to change.
Click the Design tab.
Click Create a new template..., copy the Simple template, give your new template a name and click Create.

In the Template HTML box, find the <style type='text/css'> section and the element you want to change. For example, to change the font of the message, add this to the .message class:

.message {
  font-family: Georgia, 'Times New Roman', serif;
}

If an element already has a font-family, like the td element, add your font to the front of its list:

td {
 font-family: Georgia, Arial, sans-serif;
 border: 0;
 margin: 0;
 padding: 0;
}

Variables you can use in emails

These variables work in every LoyaltyLion email:

Store Name: {{store_name}}
Program Name: {{program_name}}
Store URL: {{store_url}}
Store Link: {{store_link}} (only available in the Welcome email)
Referral URL: {{refer_url}} (opens the referral pop-up on your store)
Customer Full Name: {{customer.full_name}}
Customer First Name: {{customer.first_name}}
Customer's email address: {{customer.email}}
Customer's referral URL: {{customer.referral_url}}
Customer Loyalty tier name: {{ customer.loyalty_tier_name }}
Total points: {{customer.points_total}}
Approved points: {{customer.points_approved}}
Pending points: {{customer.points_pending}}
Spent points: {{customer.points_spent}}
Earned points this month: {{customer.points_this_month}}
Earned points in the last 30 days: {{customer.points_last_30_days}}
Customer's points expiry date: {{customer.point_expiry_date}}
Unsubscribe link: {{unsubscribe_url}}

Points expiring soon email only

Total points expiring: {{ customer.expiring_points_total }}
Total activities expiring: {{ customer.expiring_activities_count }}
Date that expiring points were earned on (per-activity expiration): {{ customer.expiring_points_earned_on }}

Reward emails only

Reward name (Reward available email): {{ reward_name }}
Claim link (Reward available email): {{ claim_reward_url }}
List of rewards (Monthly reward reminder): {{ rewards }}, a list to loop over with {% for reward in rewards %}, each with display_title, cost and claim_url

Insert hyperlinks into emails

Go to your LoyaltyLion Emails.
Click Edit on the email you want to change.
Click the Design tab.
Set Email HTML to Custom.
Add the link with an <a> tag, putting the web address in href. For example: <a href="https://www.your-url.com">The link</a>

For help with custom HTML, you can hire an expert from our partner directory.

FAQ

Why does my image not appear in my emails?

Many email apps don't display SVG images, so an SVG header image shows as missing:

Use a PNG or JPG image file instead.

Customizing LoyaltyLion emails