How to Customize Shopify Notification Email Templates

by emailpaws in Knowledgebase on July 11, 2020

Hi, thank you for purchasing our theme if you may need to read this guide before beginning using our notification email template on shopify.

File Structure

As you can see it has 5 folders and 1 zip file. The file that you are going to upload to Shopify is inside “Style 1”, “Style”, “General Style” and “Dummy-images”.

The Pure HTML folder is non-shopify file you may need this file if you’re not using shopify and want to make the template to be compatible with other app.

Getting Started

First you have to unzip dummy-images file and then open the folder. Now you have to replace few images with your own please look at the screenshot, there we have image called : “notif_pr3.jpg”, “notif_pr4.jpg”, “notif_pr5.jpg”, “notif_logo2.png”, “notif_banner” all you have to do is replacing those images with your own image. Please do not modify the image name or it may not showing up in your shopify store.

You can replace all of the images with your own image but make sure keep the image name and it’s file type.

Once you’re done, now you can upload those image to your shopify store. Inside your shopify store click on settings > Files > Upload Files.

Importing Email Template to Shopify

Inside shopify settings panel click on notification > Customize there put your store logo and and change it’s width, we recommend to set the width less than 200 pixels.

Skip this step if you already have image logo set up in your notification email, but you may still need to change it’s width. If you’re done just click on Save.

Now go back to Notification click on the notification email you want to change, for example in this case we’re going to import order confirmation email. Click on Order confirmation then remove all of the code.

Now we will going back to file structure there we have few folders, in this case we will use style two, open the folder and find the order confirmation template file you can open it with text editor such as notepad, and then copy the whole code and paste it in order confirmation HTML forms.

Customization

To customize the text, colors and links is pretty easy, inside HTML forms scroll down there’ll you find lots of code tags which easy to be replaced. See screenshot

When you’re done, click on preview to see the changes you have made and click save when you think it’s been what you expected. See this video tutorial if you prefer video guides.

Categories: Knowledgebase

Share Your Valuable Opinions