Plans: All plans, Platforms: PrestaShop
Overview
PrestaShop is an open-source eCommerce solution. You can add the AfterShip track button to your store in just a few clicks and delight customers with a streamlined order tracking experience.
Important considerations
If you receive “The content field (English (English)) is invalid” error while adding the track button, please install the standard TinyMCE
Insert track button to a new page
Edit Theme File (header.tpl)
Go to the start menu > FTP > Select your FTP location > Theme folder > Search for header.tpl file
Insert the below-mentioned code after tag
{literal} <div id="as-root"> </div><script>(function(e,t,n){var r,i=e.getElementsByTagName(t)[0];if(e.getElementById(n))return;r=e.createElement(t);r.id=n;r.src="//button.aftership.com/all.js";i.parentNode.insertBefore(r,i)})(document,"script","aftership-jssdk")</script> {/literal}
Add a new web page
Go to the PrestaShop admin panel > Preferences > CMS > Add a new page.
Enter meta title, description, keywords, and URL.
Save the changes.
Insert the track button code
Go to the PrestaShop admin panel > Preferences > CMS > Select a web page to add track button > HTML editor
Copy the code below:
<div class="as-track-button" data-domain="track.aftership.com" data-size="large"></div>
Paste it in the HTML editor > Save changes.
You can also replace data-domain="track.aftership.com" with your AfterShip username or custom domain and apply active courier settings
Insert track button to the order history page
Edit theme file (order-detail.tpl)
Go to the start menu > FTP > Select your FTP location > Theme folder > Search for order-detail.tpl file
Search for the code mentioned below:
<span id="shipping_number_show">{if $line.tracking_number}{if $line.url && $line.tracking_number}<a href="{$line.url|replace:'@':$line.tracking_number}">{$line.tracking_number}</a>{else}{$line.tracking_number}{/if}{else}-{/if}</span>
Replace it with the below-mentioned code snippet and save changes:
<span id="shipping_number_show">{if $line.tracking_number}{literal}<div id="as-root"></div><script>(function(e,t,n){var r,i=e.getElementsByTagName(t)[0];if(e.getElementById(n)){aftership.buttonCreator.create();return;}r=e.createElement(t);r.id=n;r.src="//button.aftership.com/all.js";i.parentNode.insertBefore(r,i)})(document,"script","aftership-jssdk")</script>{/literal}<div class="as-track-button" data-domain="track.aftership.com" data-size="small"data-tracking-number="{$line.tracking_number}" ></div>{else}-{/if}</span>Please note: some themes use span class ="shipping_number_show".