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)

  1. Go to the start menu > FTP > Select your FTP location > Theme folder > Search for header.tpl file
  2. 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

  1. Go to PrestaShop admin panel > Preferences CMS > Add a new page
  2. Enter Meta title, description, keywords, and URL > Save changes

Insert Track Button Code

  1. Go to PrestaShop admin panel > Preferences CMS > Select a web page to add track button > HTML editor
  2. Copy the below-mentioned code 
<div class="as-track-button" data-domain="track.aftership.com" data-size="large"></div>

     3. 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)

  1. Go to the start menu > FTP > Select your FTP location > Theme folder > Search for order-detail.tpl file
  2. 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".

Was this article helpful?
0 out of 1 found this helpful