TABLE OF CONTENTS

Background
First Things First
The Process
Need More Help?


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.


1. In ShipWorks, go to Manage > Templates.





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 <body such as  <body style="{$pageFont}"> 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\JohnDoe\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 the <body> tag. Note that your <body> tag might also have a style specification like in the below example, so it might look like <body style="xxxx")"> Note that the logo is placed toward the left by default.


 


 Align the logo to the right:


If you'd like to have the logo on the right, you can by adding some simple code (see the screenshot below:


Modified Code:  <p align="right"><img src="C:\Users\JohnDoe\Pictures\ShipWorks.jpg"></img></p>





Center the logo:


If you want the logo in the center, you could use: 


<p align="center"><img src="C:\Users\JohnDoe\Pictures\ShipWorks.jpg"></img></p>


 


5. When finished, click Save and Close.


Still Need Help?

Need more help? Ask us a question and one of our customer support people in St. Louis will get back to you.