To see which plans include LoyaltyLion emails please see our pricing page. If you would like to add LoyaltyLion emails to your account, please contact support@loyaltylion.com
In this article:
About LoyaltyLion emails
Our emails are fully customizable so you can make them look on brand! You're not a developer? Don't worry! We want to share with you some simple customization that you will be able to perform without the developer's help.
You can edit the text content, or, if preferred, the HTML content of any email advanced: the email layout/templates use the Liquid template engine, so you can do advanced things like if statements and other logic.
Basic customization is also possible, e.g. changing the colors in the default template or the icon at the top of the email.
To customize your emails, follow these steps:
Click on Emails
Click on Edit on an email
Click Design (here you can amend the main color and contrast)
Go to the bottom Email HTML and change to Custom - then design how you would like the email to look.
Use templates to customize your emails
1. In the Design tab move to Create a new template. This is where you'll be able to create a new CSS/HTML template that will be visible throughout all your emails
2. Add the template's name and decide if you want to copy the template or start from scratch.
3. This will enable the Template HTML where you can access the HTML <head> and CSS of the email.
Please note, that this template needs to include {{ inner_html }} in the body, or the below Email HTML won't display.
Round the buttons
1. In the Template HTML find the button class. Below you can see our default button CSS:
2. In order to round the corners of the buttons, change the border-radius property. In order to create a round button, set it to 50px.
border-radius: 50px;
Create a gradient
1. To your CSS big-button class add a background-image(linear-gradient) property. This will allow you to set the gradient using two or more colors.
background-image: linear-gradient(to right, #colour 0%, #colour 51%, #colour 100%);
2. I'm using LoyaltyLion colors, but feel free to select any colors that work with your color palette:
background-image: linear-gradient(to right, #633E98 0%, #40C5DC 51%, #633E98 100%);
3. This is the finished gradient button:
Make gradient change on hover
1. You can make the gradient move on hover, which means that each time a customer hovers over the button, the colors will move. In order to do that, we need to add a :hover to our .big-button class
.big-button:hover {}
2. To add "the movement" to the button, add background-position property and decide on the value. I'm going to use "right center"
.big-button:hover {
background-position: right center;
}
Add transition to your gradient
1. You can add a transition to your buttons to make it appear animated. This will give us a smooth transition of colors on hover. In order to achieve this, add transition property to your big-button class
.big-button {
...
transition:
}
2. You can decide on the length of the transition, type, etc. Below, we're linking resources, so you can learn more.
.big-button {
...
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}
Final code used:
.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);
transition: 0.5s;
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:
1. Change the image to URL format (you can do this using an image hosting site - for example, imgur.com
The Header image field only accept images, so you need to:
open Imgur and upload your image
right click on the image
select: Copy image location
paste into Header image field
2. You would then place the URL in the header image box at the base of the content page of the email setup.
3. In order to change your header image using HTML Editor, scroll down on the coding panel to line 12. Delete the line of code on this section and replace this with the following code: <img src="png image address you want to use" width="60" >
The header image dimension is 60px - however, this can be changed under the design tab using HTML (usually on line 12).
Change the font of your emails
You can change the font of your emails using Google fonts:
Go to your LoyaltyLion Emails
Click on Edit for the email that you want to edit
Click on Design
Click on Create a new template. Using the Simple template, give your new template a name and then click Create
5. Find the Google fonts API URL for the font you want, e.g. https://fonts.googleapis.com/css?family=Supermercado+One, making sure that your URL is a working URL. In the Template HTML box, under the line <head> (usually line 5), add this element (making sure you swap in the google font URL you want):
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Supermercado+One">
6. Next, in the Design section of the Template HTML Box (the section starting with the line <style type='text/css'> find the HTML element you want to edit. For example, if you wanted to edit the message, find the message element and simply add this line to the CSS class:
.message{<br>font-family: 'Supermercado One';
font-size= 16px;
}
Your message will now look like this:
If you want to edit an element that already has a font-family, like the td element then all you need to do is add Supermercado One to the front of this list.
td {
font-family: Arial, sans-serif;
border: 0;
margin: 0;
padding: 0;
}
Embedded email commands available to use:
Information / Merge Field
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
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 }}
Customer's points expiry: {{customer.point_expiry_date}}
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 points expiry: {{customer.point_expiry_date}}
Insert hyperlinks into emails
Go to your LoyaltyLion Emails
Click on Edit for the email that you want to edit
Click on Design
Select Custom on the drop down menu under Email HTML.
To insert a link, use the <a> tag with the href attribute to indicate the address of the target page. Example: <a href="http://www.your-url.com"> The link </a> .
Need help from an email expert? Hire one here!
FAQ
Q. Why an image does not appear in LL?
LoyaltyLion does not support all file types, an SVG image will not appear in your emails.
Instead, we recommend uploading .png file onto your emails, this is supported on all emails and will not cause any problems.
Please note, that even though we give you all options to customize your loyalty panel, we do not specialize in customizing loyalty programs for individual clients.
Don’t have a developer? Hire one here!)