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.
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.
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.
3. On the Code tab, navigate toward the bottom of the document, right above the tag.
4. Copy and paste the following code into the Template Editor before the tag:
<table border="0" cellspacing="5" cellpadding="1">
<td align="center"> <a href="https://www.facebook.com/YourFacebookName">
<td align="center"> <a href="https://www.twitter.com/YourTwitterName">
It should look like this:
5. Make the following modifications (if applicable):
A. Change the Facebook address URL to your store's address.
B. Change the Twitter name to your store's Twitter name.
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:
If the image is on your hard drive:
img src="http://fourtencreative.com/wp-content/uploads/like-us-on-facebook-tiny.jpg"img to wherever the image is stored on your computer, like:
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.
If you want to move the icons down a bit, to the document, add a
If you want to center the icons, add a
tag before the code (beginning with) and a
tag after the code (ending in ).
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".
Still Need Help?
Please feel free to reach out to one of our awesome Technical Support Representatives in St. Louis. We are happy to help.
Have a comment to share about this article? We'd love to hear from you. You must be logged in to your Support Portal account to leave a comment.