1. Home
  2. Postcards
  3. Integrations
  4. How to Upload an Email Template in Shopify

How to Upload an Email Template in Shopify

In this tutorial, we’ll be customizing the order confirmation email in Shopify by using a Postcards template.

Prerequisites

  • A Designmodo account
  • A Shopify account
  • Ability to edit HTML code

Steps

1. Create and export a Postcards template

The first thing we need is a Postcards template to work with.

Since this is an ecommerce email, let’s use a transactional template.

In the Postcards app, I’ve created a template that consists of a “Transactional 7” piece, it looks like this:

How to Upload an Email Template in Shopify

This is all we need so now let’s export it.

Press the “Export” button in the top-right corner and then press “Download as zip.” Make sure you have the “Host images online” option selected so you don’t have to manually upload each image.

Your screen should look like:

Create and export a Postcards template

Download and extract the index.html file into a folder you can work with. It should look something like this:

Download and extract the index.html file

If you open this file in your browser, you should see the template you just created.

2. Check which parts of the template you need to update

We want to take the Postcards template and update the content while keeping the layout and styles the same.

If we look at the template, we can see where we need to update the content.

If you open this file in your browser

All the sections highlighted in yellow need to be sourced from Shopify.

We do this by replacing the hard coded text values with Shopify’s liquid syntax.

3. Prepare to edit your Shopify email notification

Go to your Shopify store’s admin dashboard, then go to the settings page, then click “Notifications.”

Prepare to edit your Shopify email notification

That will take you to the notifications page where you can find email notifications to edit.

The one we will be updating is the “Order confirmation” notification.

Order confirmation

Click the name and that will take you to the page where you can edit the code for this email notification.

Click the name

If you press the “Preview’ button you’ll be able to see what the code looks like when it gets sent through email.

We’ll be editing the Postcards template file in a text editor and then pasting that code into Shopify’s editor to make the changes.

4. Begin editing the Postcards template code

Open your index.html file in a text editor. I’m using Visual Studio Code so my file looks like:

Begin editing the Postcards template code

Next, copy all the code in the Shopify order confirmation editor and open it in another window. It should look like:

Shopify order confirmation

This is just to see the code easier.

We’ll be updating the content in the index.html file with Shopify template variables.

5. Add the title tag to the template

The first thing we can add is the title tag.

In the Shopify template, the tag looks like:

Add the title tag to the template

This is liquid syntax and when it gets rendered, that tag gets replaced with whatever content the tag represents.

We want to copy this tag and place it in the index.html title tag.

Before:

Before

After:

After

Save your file and this step is complete.

We’ll be replicating this process for the rest of the template.

6. Update the order number

The next part that needs to be updated is the order number.

In the index.html file, it’s located on line 222:

Update the order number

In the Shopify template, the tag is located on line 48:

Shopify email template

Replace the hard-coded order value with this liquid tag:

Replace the hard-coded order value

7. Check how the code looks

We made a few changes and now we can see how it looks in the preview.

In the Order confirmation HTML editor, copy and paste all the code from the Postcards template. It should look like:

Check how the code looks

Next, press the preview button at the top. You should see something like this:

Press the preview button

As you can see, the order value was changed from the hard-coded value to a dynamic one from Shopify.

This is how to check for changes in this email notification, simply copy and paste the updated code into the text editor and then press “preview.”

8. Update the view order URL

There’s a button to view the order and in the Postcards template it’s located on line 260:

Update the view order URL

The href value needs to be changed to a liquid tag.

In the Shopify template, the view order URL tag is located on line 82:

Shopify template

Copy and paste this href tag into the Postcards template:

Postcards template

9. Update the order number and order date

Next up are the order details.

The order number and order date values are located on lines 301 and 331.

Update the order number and order date

For the order number, we already used this tag so we can use the same one again.

Update line 301 to:

Update line 301

The order date is on line 331:

The order date

The Shopify example doesn’t use the date but the tag we want to use looks like this:

Shopify email example

10. Update the shipping and billing address

The shipping and billing addresses are defined on lines 375 and 405.

Update the shipping and billing address

If you search for “address” in the email variables page, you can see that the billing and shipping address tags look like:

billing_address

shipping_address

We can replace the existing addresses with those tags. We also need to add “| format_address” to the tag to make it print out nicely.

Billing address

Shipping address

11. Update the order items list

Next is the table of order items.

Each row item is defined within the order table and each order item has its own <tr> tag that has an image, a name, a quantity, and a price.

On line 452 of the Postcards template, the rows begin so here we want to create a loop that runs for every item in the order and print out the item details.

On line 450, add a liquid loop for every order item. It looks like:

Update the order items list

Since we are creating a <tr> for every item, we can delete the other rows beneath it.

The first thing we can update is the image.

We want to check if the image exists so we need an if statement and then update the image source with the image URL.

Before:

Before

After:

After

Next is the name. We want to add an if statement here as well because not every Shopify store will use the same format.

Line 493 is where my item name is defined and here is where I’ll be updating the value.

Before:

Before

After:

After

We also need to change the width of the div containing the product title name to make it fit in the same line as the image.

In the first <div> element above than the <td> tag that defines the product title text, change the max-width property from 250px to 220px.

Before:

Before

After:

After

Also, make sure to change the value for the commented out line above it as well.

Shopify doesn’t have a description tag so we can delete the entire <tbody> which holds the item description content.

Delete the code that looks like:

Delete the code

Next are the quantity and price values.

Before:

Before

After:

After

After the </tr> tag below the price, you can end your for loop.

12. Update the price section

The last section that needs to be updated is the price section.

This begins where the “Subtotal:” text is found:

Update the price section

The subtotal value can be replaced with the subtotal price tag:

Subtotal price tag

Next is the gift code or the discounts section. It looks like:

Next is the gift code

We want to first check if there are discounts, then print out the discounts if they exist. We also want to change the text from “Gift Code” to “Discounts” because that is what Shopify calls it. This section now looks like:

Gift Code

Next is shipping. We don’t have to check if this value exists because it’ll always exist, we just have to update the value.

Before:

Before

After:

After

Next are duties. We want to copy the shipping row and paste it in under that row to add a new row with the same layout as the shipping row but with different values.

We also want to check if this part exists and then print it out. Under your shipping row, you should have a new row that looks like:

Email templates Shopify

Next is tips. We want to replicate what we did with duties, create a new row and check if we need to print it.

Under the duties row, you should have a new row that looks like:

New row

Next is the tax and we just have to replace the hard-coded value with the tax tag:

TAX

Lastly, we just need to update the total value to the total value tag.

Before:

Before

After:

Before

And now we’re done with editing the code!

The final code can be found here.

Copy and paste everything into the Shopify HTML editor and send yourself a test email using the button beside the preview button.

I sent myself a test email and it looks like:

Copy and paste everything into the Shopify HTML editor

What we covered

  1. How to create and export a Postcards template.
  2. How to change the code in a Shopify email notification.
  3. How to customize the Postcards HTML file to use Shopify liquid syntax to change the contents dynamically.
Updated on April 17, 2020

Was this article helpful?

Related Articles