If you're ready to pop some style into your templates, you've come to the right place.
The article has two main points. We'll help you create a template to use, and we'll teach you some basic styling and image storage techniques so you may create a template with some style.
Before we begin
Before we begin, remember that we have third party email providers Mail Chimp and Campaign Monitor waiting for you to use!
Click here to learn more about Mail Chimp
Click here to learn more about Campaign Monitor
We'd encourage you to make use of these wonderful platforms.
The benefit of using one of our third party email marketing add-ons is that they are specifically designed to handle large volumes of emails. The Simple Salon Email Marketing is great if you want to send up to 1,000 emails at one time. If you need to send more than 1,000 emails in one go, then connect with one of our email marketing add-ons and away you go. Additionally, Mail Chimp and Campaign Monitor have lots of cool extra features.
If you'd like to go ahead
Don't worry if it doesn't make any sense to you initially. The more you have a play around with the template, the easier this will become.
Preparing images for use in email templates
When you create a template, it's likely that you'll want to include some pictures. Part of this process most likely involves wondering where on earth you can store these pictures.
Well, the great news is that you can store them in Simple Salon. Every client has a place to store files or images, and we're going to utilise this feature to help you get some rocking pics:
Once you've found pictures you want to use:
1) In Simple Salon visit the client search and click the 'Add New Client' link
2) In the right-side panel create a new client (which we've called 'Email Images')
Let's load up our client with some images shall we:
In Email Images' client profile click 'Actions' > 'Images/Files'
So now we can see the images and files that Email Images has recorded:
This is a great opportunity to upload your photos. To do this click on the cloud icon 
in the 'IMAGES' section
Upload as many images as you would like in the following window:
Click the 'X' when you've finished.
We need to learn how to copy the links to the images so that we can copy and use them later:
On a MAC:
1) Hold down the control button then click inside one of the images then click 'Copy Link Address'
On a PC:
1) Right click inside the picture and click 'Copy link address' or 'Copy link location'
Preparing an email template
The next section will likely be tricky to get working, but if you follow our steps below, you're well on your way to preparing an email template.
Those fancy email templates you see across your everyday travels are not beyond your reach! We're always learning, and this is another opportunity:
What makes up our templates?
Templates are made up of HTML and CSS components.
HTML is the content. For example, the text and images you may want to include in a template.
CSS is for styling. For example, deciding what colour you may want the background to be.
Using an example template
Pop over to 'Admin' > 'Lists' > 'SMS & Email Templates'
Click the 'New Email Template' link to get started:
So we now find ourselves in the following view - design view:
Now let's see what our HTML looks like - click 'HTML'...
Copy and paste the following template into the 'Message' field:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body style="background-color: black; opacity: 0.8; text-align: center;">
<article id="bImage">
<img alt="" src="https://res.cloudinary.com/simpleworld/image/private/s--b2DCWVR9--/v1561013373/salon/20440/3048366/BagEdit_x4awe4.png" width="100%" height="5%" />
</article>
<article id="appDets" style="text-align: center; color: white; font-family: calibri; opacity: 0.9;">
<p style="font-family: calibri; font-size: 40px;">Sunnies, phone, keys, jacket. Is there something you're forgetting?</p>
<h1>Appointment Reminder</h1>
<h2>Woohoo #ClientName#! Your appointment is coming up</h2>
<p>Get ready lovely 'cause we've got you booked in to come say hello and get a little something done!</p>
<p>Here are the details:</p>
Location: #CompanyName#<br />
Date/Time: #AppointmentDate# at #AppointmentTime#</article>
<article id="goodbye" style="color: white; font-size: 30px; font-family: "comic sans";">
<p id="cuthen" style="font-family: calibri; font-size: 40px; font-weight: lighter;">See you then!
</p>
<p id="webAddress" style="font-family: calibri; font-size: 40px; font-weight: lighter;">www.simplesalon.com</p>
<p id="physicalAddress" style="font-family: calibri; font-size: 25px; font-weight: lighter;" class="footer">The Salon, 5 the place, placeton. Ph: #CompanyTelephone#</p>
</article>
<article style="background-color: white;">
<img alt="" src="https://res.cloudinary.com/simpleworld/image/private/s--oMrBOQFJ--/v1561013935/salon/20440/3048366/End_jvfzvg.jpg" width="100%" height=" />
</article>
</body>
</html>
Your page should look something like the screen below:
Next in the 'Send a Preview to yourself' box, enter in your email address, then click 'Send' and check out the preview:
The email isn't too advanced, but we can see there is some styling, and an image which keeps the reminder interesting.
Let's change the background colour
Feel free to click here if you would like to be provided with a list of colours and their names which you can use.
Go back to your template in Simple Salon and click 'HTML':
Scroll all the way to the top:
Look for the following line:
<body style="background-color: black; opacity: 0.8; text-align: center;">
Change the word 'black' to any colour that you would like:
And change the colour of the text:
Changing the colour of the text
Click on the 'Design' link
Highlight the text that you would like to change the colour of and change the colour by selecting the 'A' drop down and choosing a colour:
Why didn't all of the text change different colours?
Similar to changing different sections of text to different sizes, different sections of text can have different colours.
If you want to change the rest of the colours, look through the template and change the colour as you need.
Changing the font size
If you want to change font or text size you can pop back into 'Design' view, select the text, and change the font or text size:
Changing the font
Change the font by selecting the font from the following drop box:
Changing the font-size
Change the font-size by selecting the font size from the following drop down:
You're more than welcome to try out using the other links in 'Design' view too.
Sick of using our test pictures?
To change to your own pictures:
Switch to 'HTML' view and look for image tags:
The actual link to the picture is stored in the src="" section
Insert Images
Remember how we showed you how to upload then copy images? You'll now need to copy and paste the image into your template.
Copy and paste your image link to replace the above link. You must paste the link inside the " ".
For example, src="https://mynewimagelink.jpg".
You can also switch to 'Design' view and follow the following article to insert an image without looking at the code:
https://help.simplesalon.com/hc/en-us/articles/221041048-Inserting-an-image-into-an-email
Your picture should now be displaying! You can add in as many pictures as you'd like, or make any changes you'd like.
We've covered the basics, and you should be able to use this template for reminders, promotional emails, or other content you're interested in sending emails with.
They key take away is to have a play around, try different colours, fonts and sizes, images, and see how it all goes. It will probably take some time and patience.
PS. Remember to click 'Save' to keep your changes.
Adjust the sizing of Images
You can crop images outside of Simple Salon using programs such as paint, or by cropping the images in the 'Photos' app on the MAC. These images can then be uploaded to Simple Salon.
If your image is too stretched you can adjust the image in Simple Salon by:
1. Clicking on 'Design' view
2. Clicking on the image
3. Click on the image link
4. Change the width and height to sizes which suit you best
5. Click 'OK' to save the changes
Is this not what you're after?
If this isn't what you're after, or there's more you'd like to get done with emails, the next step is to try one of our third party email providers, Mail Chimp and Campaign Monitor.
Click here to learn more about Mail Chimp
Click here to learn more about Campaign Monitor
Comments