How To Edit Template On Shopify

How to customize your Shopify email templates

Concluding updated January 11, 2021

In this commodity we volition larn how to use custom HTML email templates with Shopify.

When you set up a Shopify store they automatically ship a scattering of emails out of the box for orders, shipping, customer support and notifications. The default email templates that Shopify provide look pretty good. Although at that place are a number of reasons yous're going to desire to customize these.

To match your brand
To be consequent with other emails y'all're sending from other ESPs
To amend the blueprint and UX of the default templates
To customize the content that is displayed in the emails
To take reward of marketing or conversion opportunities in these transactional emails

Hold upwards. Before we continue, be sure to get your copy of our x responsive HTML email templates. Including welcome email, newsletter, onboarding, and more than.

Run across the email templates

How to utilize custom HTML email templates for Shopify emailing

Yous've merely got yourself some new HTML email templates. You're going to use templates that have inlined CSS so y'all know they work across all major email clients. They contain some images like your logo or social media icons.

1. Choose an email template to edit

Go to Settings -> Notifications
Click on the email y'all want to modify, lets practice Order confirmation equally an example
Copy/paste the HTML into your favorite code editor - you can also edit it here in the browser if you prefer but I recommend using your editor
Open up upward your new email template (lets apply receipt-inlined.html every bit an example) in your favorite editor as well so you accept this side by side with the Shopify template for reference

2. Upload the files that you need

Shopify provides a files feature where you tin can upload images. This is your CDN and where all your files will be hosted.

Upload your logo
Upload your social media icons
Upload any other images you want to include in your templates
Open your new e-mail receipt template and supersede whatever paradigm references with the Shopify URLs
e.grand. img/logo.png becomes something like //cdn.shopify.com/files/1234/logo.png

3. Customize your template and insert the Shopify liquid variables into your template

This is going to be the bulk of the chore. Referencing the original Shopify template you lot're going to copy/paste the various liquid variables and logic over to your new e-mail template.

Alter preheader text
Remove unsubscribe link
Update social icon links
Update content
Supplant all the user and shop specific variables with liquid variables e.grand. { { order_name } }
Use a for statement for your listing of items { % for line in line_items % }

Hither are some code samples.

                          {% for line in line_items %}              <tr>              <td              fashion=              "font-family: sans-serif; font-size: 14px; vertical-align: top; edge-bottom: 1px solid #eee; margin: 0; padding: 5px;"              valign=              "top"              >              {{ line.product.title }}              </td>              <td              class=              "receipt-figure"              fashion=              "font-family: sans-serif; font-size: 14px; vertical-marshal: top; edge-bottom: 1px solid #eee; margin: 0; padding: 5px; text-align: correct;"              valign=              "top"              align=              "correct"              >              {{ line.line_price | money }}              </td>              </tr>              {% endfor %}

                          {% for line in tax_lines %}              <tr              class=              "receipt-subtle"              fashion=              "color: #aaa;"              >              <td              style=              "font-family: sans-serif; font-size: 14px; vertical-align: tiptop; border-lesser: 1px solid #eee; margin: 0; padding: 5px;"              valign=              "top"              >              {{ line.title }}              </td>              <td              class=              "receipt-effigy"              fashion=              "font-family: sans-serif; font-size: 14px; vertical-align: top; border-bottom: 1px solid #eee; margin: 0; padding: 5px; text-align: right;"              valign=              "meridian"              marshal=              "correct"              >              {{ line.price | coin }}              </td>              </tr>              {% endfor %}

Some liquid variables you might want to use.

{ { order_name } }
{ { shop.url } }
{ { line.paradigm } }
{ { line.quantity } }
{ { discount_title } }
{ { subtotal_price } }
{ { stotal_price | money_with_currency } }
{ { shipping_address | format_address } }
{ { shop.electronic mail } }
{ { transaction.payment_details.credit_card_last_four_digits } }

4. Copy across your email template into Shopify

At this point copy/paste your email template code over to Shopify.

Like I mentioned before, you can edit the HTML in the Shopify course, although I have plant it much easier to manage this outside of Shopify using my own editor.

5. Test your Shopify emails

Shopify provides two testing methods. Preview in the browser and electronic mail yourself. Try both until it looks skilful.