Templates: Add a Logo

Background

You can add a logo to an existing template (invoice, packing slip, email notification) using HTML in the ShipWorks Template Editor.

First Things First

These instructions assume that you do not know html. All you need to know is the exact location of the logo image you want to use. It'll be a .jpg or .png file, and can either be stored on your computer, on your network, or on the internet.

The location of the image will look something like this: http://www.mypictures.com/brand/mylogo.jpg or c:\marketing\brandimages\mylogo.jpg or h:\shared\branding\final\mylogo.png. Once you have the image location, you can follow the step by step instructions below.

If you don't feel comfortable making these changes or need help identifying the location of the logo image, your resident IT person should be able to give you a hand very easily.

The Process

For this article we will be using the Standard Packing Slip template.

2. Select the template you want to modify. Right-click and select Copy to make a copy of this template so that you have a backup in case you want to revert to the original default template.

3. Select the original template, right-click on it and click Edit.

4. Copy the below code and paste it into the Template Editor. Typically you will want to paste the code right after the line of code that begins with such as in our example.

Code to copy and paste: <img src="imagelocation"></img>

Replace "imagelocation" with the actual location of your logo image:
- If your logo is on your computer's hard drive the code would like similar to this: <img src="C:\Users\Pictures/logoimage.jpg"></img>
- If your logo is stored on the internet, the code would look similar to this:
  
  <img src="http://www.pictureexample.com/logoimage.jpg"></img>
- NOTE: If you use an image stored online and the URL includes any characters like &,=, or !, you might get an error. The template editor is an XSLT editor and processes these characters differently than an HTML editor. If you run into an error because a special character is in a URL, go to http://tinyurl.com/ and generate a URL without these characters and try again.

In this example, the code is entered after thetag. Note that yourtag might also have a style specification like in the below example, so it might look likeNote that the logo is placed toward the left by default.