Skip to main content
All CollectionsAdvanced Design
Make Custom Changes in Order Confirmation E-mails ๐ŸŽจ
Make Custom Changes in Order Confirmation E-mails ๐ŸŽจ

Customize the template - with some simple coding :)

Liam Cadle avatar
Written by Liam Cadle
Updated over a week ago

Would you like to change the color, shape or font of your header, body or footer blocks in your order confirmation emails? ย This article will show you the way! ๐Ÿค—

Let's take an example; changing the background color of our header.ย 

At the moment, blue is the default color for all order emails. Naturally, these should look like this:

As you can see, the color is blue. To change the background color of the header, go to admin screen ย Email > Templates > New Order > Edit.

In the box that appears, search for the element
โ€‹ย  ย  ย  ย  ย <td align="center" valign="top" style="font-size:0; padding: 35px 10px;" bgcolor="#317cc5">

You can search an element by keying in CTRL + F. At this point, a small box will appear at the top right of the screen, where you can type in your search. Click Enter. You will see that the element will be highlighted in orange.ย 

Once you have found this, change the hex code #317cc5 to whatever color you wish. Let's replace this for maroon, which is #800000, and click on Save. The result will be:

๐Ÿ‘๐Ÿ‘๐Ÿ‘๐Ÿ‘ Sorted!

Should you wish to make other changes:

You will need to search for the element in the code. This is very easy. Simply open a test order email in your inbox, right click on the email and select Inspect. The code will appear in a large box at the right of your screen.

By hovering over different parts of the code, you will see these being matched up with various elements of your email. Usually, there will be keywords which will facilitate your search, such as bgcolor (background color).

When you find the part of the code you want to change, return to your Evo X admin screen and search for it in the order confirmation email template, following the same process as above. Apply the changes and save.ย 

Naturally, this process will involve trial and error, but rest assured that we will be here to help if you do not understand something.

Now you are ready to apply your own feel to your email!


Did this answer your question?