How to Install Email Templates in Shopify

Once you have purchased and downloaded an email template collection, the next step is installing the HTML files into Shopify's notification email editor. This guide walks you through the full process.

Before You Begin

Make sure you have:

Downloaded the template zip file from the Iconic Sections app (see How to Purchase and Download Email Templates)
Extracted (unzipped) the zip file on your computer — right-click the file and choose "Extract All" on Windows, or double-click on Mac

After extracting, you will see a folder containing HTML files — one for each email type in the collection (for example: order-confirmation.html, shipping-confirmation.html, etc.).

How to Install Each Template

Repeat these steps for each notification email you want to update:

Open your Shopify admin and go to Settings > Notifications.
Find the notification you want to update — for example, click Order confirmation under the Orders section.
On the notification detail page, scroll down to the Email body section.
Click Edit code (or switch to HTML view if you see that option instead).
Select all the existing code in the editor and delete it.
Open the matching HTML file from your extracted template folder in any plain text editor (Notepad, TextEdit, VS Code, etc.).
Select all the text in the HTML file (Ctrl+A / Cmd+A) and copy it.
Paste the copied HTML into Shopify's email body editor.
Click Save.

Your notification email now uses the new template design.

Customizing Your Brand Details

After pasting the template, you will want to update a few elements to match your store:

Logo — replace the placeholder logo image with your store's logo URL
Brand colors — if the template uses color variables, update them to your brand palette
Contact details — update any placeholder phone numbers, email addresses, or social media links
Store name — confirm your store name appears correctly throughout

These elements are usually clearly marked in the HTML with comments like  to make them easy to find.

Use Ctrl+F (Find) in your text editor to search for "placeholder", "logo", or "YOUR" to quickly locate all areas that need your store's details filled in.

Sending a Test Email

Before considering the installation complete, always send a test email:

On the notification detail page in Shopify, click Send test notification (at the top of the page).
Shopify sends a preview of the email to your store's account email address.
Check your inbox and review how the email looks in a real email client.
Confirm that images load, links work, and the layout displays correctly on both desktop and mobile.

If something looks off, return to the HTML editor and make adjustments before the template goes live to real customers.

Different email clients (Gmail, Outlook, Apple Mail) can render HTML emails differently. Testing in the email client your customers are most likely to use is good practice.

Frequently asked questions

Can I use one template design across multiple notification types?

Each HTML file in the collection is designed for a specific notification type. You should use the correct file for each notification — for example, use order-confirmation.html for the Order Confirmation notification, not for Shipping Confirmation. While the design style is consistent across all templates in a collection, the content and structure of each file is tailored to that specific notification's purpose.

Do I need coding knowledge to install email templates?

Basic familiarity with HTML helps when customizing brand details like your logo and colors, but it is not required to complete the installation. The copy-and-paste process does not require writing any code. The HTML files are ready to use as-is — customizing your logo and store name involves finding the right lines and replacing placeholder text, which most store owners can manage with the help of the HTML comments in the file.

Will email templates work with Shopify's drag-and-drop email editor?

The templates are designed for Shopify's HTML code editor, not the visual drag-and-drop editor. When you paste the HTML into the code editor, it replaces the visual editor's content. Shopify may warn you that switching to the code editor disables the visual editor for that notification — that is expected. The HTML templates give you a fully designed layout that does not need the drag-and-drop builder.