If you're ready to pop some style into your templates, you've come to the right place.
This 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 can create a template with some flare.
Before we begin - remember that we have third party email providers Mailchimp and Campaign Monitor waiting for you to use!
Click here to learn more about Mailchimp.
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, Mailchimp 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. 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:
Search for the 'Email Images' client profile, then click Actions > Images/Files.
From here 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 image's link address so that we can copy and use them later -
On a MAC:
1) Hold down the Control button, 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 might be a little 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:
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:
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 from one of the font's in the drop down menu:
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 this 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 a 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, Mailchimp and Campaign Monitor.
Click here to learn more about Mailchimp.
Click here to learn more about Campaign Monitor.
If you have any questions, please send them to us via the Submit a Request option in your Help & Support page.
Comments