Articles on: Branded Tracking Page

Add Track Button to Magento 1 Store

Overview


Magento is one of the most popular eCommerce systems, written in PHP. You can insert the AfterShip Track Button to your store by embedding just a few lines of code.


Add a new web page


  1. Login to Magento admin dashboard > CMS > Pages (top navigation) > Add New Page.
  2. Enter title (e.g. Track Your Order) > Enter URL Key (e.g. track-your-order).
  3. Set status Enabled.
  4. Save changes.


Insert track button


  1. Login to Magento admin dashboard > CMS > Pages (top navigation).
  2. Select a web page to add Track Button.
  3. Go to Content menu > Show/Hide editor.
  4. Copy below-mentioned code and paste in the editor.


<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>
<div class="as-track-button" data-domain="track.aftership.com" data-size="large"></div>


  1. Save page


You can also replace data-domain="track.aftership.com" with AfterShip username or custom domain and apply your carrier settings.


Insert track button to order history page


  1. Access FTP and open folder: ` app/design/frontend/base/xxxxxx/template/shipping/tracking/ `
  2. Edit popup.html theme
  3. Search for below-mentioned code


 <?php $_results = $this->getTrackingInfo(); ?>


Insert below code snippet after it


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


  1. Search for below-mentioned code


<td class="value">
<?php echo $this->escapeHtml($track->getTracking()); ?>
</td>


Replace with below code


<td class="value">
<div class="as-track-button" data-size="small"data-tracking-number="<?php echo $this->escapeHtml($track->getTracking()); ?>" data-domain="track.aftership.com"></div>
</td>


  1. Search for below-mentioned code


<td class="value">
<?php echo (isset($track['number']) ? $this->escapeHtml($track['number']) : ''); ?>
</td>


Replace with below code:


<td class="value">
<div class="as-track-button" data-size="small" data-tracking-number="<?php echo (isset($track['number']) ? $this->escapeHtml($track['number']) : ''); ?>" data-domain="track.aftership.com"></div>
</td>


You can also replace data-domain="track.aftership.com" with AfterShip username or custom domain and apply your carrier settings.


Key takeaways


  • You can enhance the post-purchase experience by embedding the AfterShip Track Button on the Order History Page.
  • Changes must be made in the order-detail.tpl file via FTP.
  • Clear cache and recompile templates in PrestaShop after code updates.
  • The button can be customized with your own AfterShip domain.
  • Track button visibility depends on valid tracking numbers being available.

Updated on: 10/06/2025