TABLE OF CONTENTS

Background
First Things First
Resources
The Process
Need More Help?


Background

You can add social medialinks/icons to your templates using HTML tags. This is most beneficial for templates that you email to customers (like the "Shipment Notification" template), but can be used on any template. 


First Things First

You will need thumbnail pictures of what you want to appear on your template. 


Resources

For Facebook logos, browse here..

For Twitter logos, browse here.

For Instagram logos, browse here.

 

You may need to use photo editing software to resize logos to ensure consistency if you have more than one. 


The Process


1. In ShipWorks, navigate to Manage > Templates.  


 

2. Select your template and click 'Edit". In this example, we will be modifying the "Email Notification" template. 


email_notification_edit.png


3. On the Code tab, navigate toward the bottom of the document, right above the </body> tag. 



4. Copy and paste the following code into the Template Editor before the </body> tag:

<table border="0" cellspacing="5" cellpadding="1">

<tr>

<td align="center"> <href="https://www.facebook.com/YourFacebookName">

<img src="http://fourtencreative.com/wp-content/uploads/like-us-on-facebook-tiny.jpg"></img></a></td>

 <td align="center"> <href="https://www.twitter.com/YourTwitterName">

<img src="http://fourtencreative.com/wp-content/uploads/follow-us-on-twitter-tiny.jpg"></img></a></td>

</tr>

</table>


It should look like this:

  

5. Make the following modifications (if applicable): 


A. Change the Facebook address URL to your store's address.

For example, <href="https://www.facebook.com/YourFacebookName">   becomes <href="https://www.facebook.com/ShipWorks">


B. Change the Twitter name to your store's Twitter name.

For example, <href="https://www.twitter.com/YourTwitterName">   becomes <href="https://www.twitter.com/ShipWorks">


You can choose to keep the thumbnail pictures as-is or link to different ones. The process is a little different depending if the image is stored on the internet or on your computer's hard drive.

If the image is on the internet:

 <img src="http://fourtencreative.com/wp-content/uploads/like-us-on-facebook-tiny.jpg"></img> to whatever the address is for your new image, like:

<img src="https://www.facebookbrand.com/img/assets/asst.f.logo.lg.phg"></img>


If the image is on your hard drive:

          <img src="http://fourtencreative.com/wp-content/uploads/like-us-on-facebook-tiny.jpg"></imgto wherever the image is stored on your computer, like:

     <img src="C:\Users\JohnDoe\Pictures\logo.jpg"></img>


Please note: The ShipWorks "Template Editor" is an XSLT editor and processes certain characters (like &, =, !) differently than an HTML editor. If you have one of these characters in a URL, it will likely prompt an error (saying that an unexpected value has occurred). If you run into this error because a special character is in a URL, go to http://tinyurl.com/ and generate a URL without these characters and try again. 


Other Modifications

If you want to move the icons down a bit, to the document, add a <br /> tag.

If you want to center the icons, add a <center> tag before the code (beginning with <table>) and a </center> tag after the code (ending in  </table>).


6.  Use the "Preview" tab to view your changes and test your links.  When you're satisfied with the changes you've made, click "Save" and "Close".




Need More Help?