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:
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:
Download and extract the index.html file into a folder you can work with. It should look something like this:
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.
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.”
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.
Click the name and that will take you to the page where you can edit the code for this email notification.
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:
Next, copy all the code in the Shopify order confirmation editor and open it in another window. It should look like:
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:
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:
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:
In the Shopify template, the tag is located on line 48:
Replace the hard-coded order value with this liquid tag:
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:
Next, press the preview button at the top. You should see something like this:
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:
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:
Copy and paste this href tag into the 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.
For the order number, we already used this tag so we can use the same one again.
Update line 301 to:
The order date is on line 331:
The Shopify example doesn’t use the date but the tag we want to use looks like this:
10. Update the shipping and billing address
The shipping and billing addresses are defined on lines 375 and 405.
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.
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:
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:
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:
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:
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:
Next are the quantity and price values.
Before:
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:
The subtotal value can be replaced with the subtotal price tag:
Next is the gift code or the discounts section. It looks like:
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:
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:
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:
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:
Next is the tax and we just have to replace the hard-coded value with the tax tag:
Lastly, we just need to update the total value to the total value tag.
Before:
After:
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:
What we covered
- How to create and export a Postcards template.
- How to change the code in a Shopify email notification.
- How to customize the Postcards HTML file to use Shopify liquid syntax to change the contents dynamically.