How to add your logo to your order confirmation email

From Spiffy Stores Knowledge Base

You can add your logo to your order confirmation email and other email templates by following the tutorial below. Please note that this really only works if your logo is in landscape format.

Step One

Get a copy of your logo and re-size it so that it's no more than 90px high. Make sure you name it "email_logo.png" or "email_logo.gif" or "email_logo.jpg"

Upload it to your Themes assets. This can be found in the "Design & Assets -> Theme editor -> Theme Assets" section of your toolbox.

Step Two

Go to the "Design & Assets -> Email templates" section of your Toolbox, and click on the "Order Confirmation" liquid file. The text version of your order confirmation email should be displayed in a pop-up window. Click on the link at the top of this pop-up that says "Edit Html Version". You should now be able to see the HTML/Liquid code that make ups this email template.

Step Three

Click the "Reload Template Defaults" link at the top of the page. This will load in a simple grey version of the template.

You can either make your edits in this popup, or you can copy the HTML into a web/text editor of your choice. Scroll down to the area where you see the following code...

.header {
  width: 530px;
  height: 61px;
  background-color: #666;
}

If your logo is a transparent png reversed out of a dark background, you can safely leave this line the same. If your logo is on a white background however, you should change it to the following...

.header {
  width: 530px;
  height: 61px;
  background-color: #FFF;
}

Now, scroll down to where you see the following piece of code...

<div class="title"> {{ shop_name }}</div>

Replace this code with the following, ensuring that you update the name of your logo file to exactly the same as it appears in your theme editor. You will also need to ensure that you change the dimensions (width="xxx" and height="xxx") to the correct dimensions of your logo file...

<div class="title"> <img src="{{ 'email_logo.png' | asset_url }}" alt="{{ store.name }}" width=“270” height=“90”></div>

Step Four

When you have done this, click the link that says "Send a test copy to xxx@xxx.com", and wait until you receive the test email to see if your edits are ok. If they are OK, you now just need to tick the box that says "Custom template is Enabled" at the top of the pop-up window, and then click the save button at the bottom of the page.