Articles on: Tracking Page

Add Track Button to PrestaShop Store

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. Point to consider:

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 <body> tag

{literal} <div id="as-root">&nbsp;</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 PrestaShop admin panel > Preferences > CMS > Add a new page
Enter Meta title, description, keywords, and URL > Save changes

Insert Track Button Code



Go to PrestaShop admin panel > Preferences > CMS > Select a web page to add track button > HTML editor
Copy the below-mentioned code

<div class="as-track-button" data-domain="track.aftership.com" data-size="large"></div>

Paste it in 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 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 below-mentioned code

<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".

Updated on: 07/10/2022

Was this article helpful?

Share your feedback

Cancel

Thank you!