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
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
Go to PrestaShop admin panel > Preferences > CMS > Add a new page
Enter Meta title, description, keywords, and URL > Save changes
Go to PrestaShop admin panel > Preferences > CMS > Select a web page to add track button > HTML editor
Copy the below-mentioned code
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
Go to the start menu > FTP > Select your FTP location > Theme folder > Search for order-detail.tpl file
Search for the below-mentioned code
Replace it with the below-mentioned code snippet and save changes
Please note: some themes use span class ="shipping_number_show".
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"> </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
Thank you!