Articles on: Branded Tracking Page

Add Track Button to PrestaShop Store

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