Add Track Button to PrestaShop Store
Plans: All plans Platforms: PrestaShop
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.
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 the PrestaShop admin panel > Preferences > CMS > Add a new page
Enter meta title, description, keywords, and URL
Save the changes
Go to the PrestaShop admin panel > Preferences > CMS > Select a web page to add track button > HTML editor
Copy the below-mentioned code
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
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".
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 <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 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 below-mentioned code
<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 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: 05/05/2024
Thank you!