Articles on: Branded Tracking Page

Add Track Button to 3dcart Store

Overview


You can add the AfterShip Track Button to your 3dcart store to let customers track shipments directly from your website. This guide walks you through adding the Track Button to custom pages and the order history page.


Add a new web page


  1. Log in to your 3dcart store > Content > Site content > Footer Extra Pages > Edit
  2. Add a new page by clicking the β€œ+” button > Enter required details
  3. Save the changes


Insert track button


  1. Log in to your 3dcart store > Content > Site content > Footer Extra Pages > Edit
  2. Select the page to add Track Button > Settings action button > Content > View source code
  3. Click β€œ<>” action button to edit code (under page-content)
  4. Copy the 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 data-domain="track.aftership.com" data-size="large" class="as-track-button"></div>


  1. Save the changes


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. Log in to your 3dcart store > Settings > Design > Themes & Styles > More
  2. Edit template (HTML) > Settings action button
  3. Go to folder templates/common-core > Edit order-history-view.html
  4. Search for the below-mentioned code


<a href="shiptracking.asp?trackingnumber=[trackingcode]" target="new">[trackingcode]</a>


Replace it with the below code snippet


<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 data-domain="track.aftership.com" data-size="small"data-tracking-number="[trackingcode]" class="as-track-button"></div>


  1. Save the changes


Key takeaways


  • The AfterShip Track Button allows 3dcart customers to check tracking updates directly on-site.
  • You can insert the button on custom pages or replace the tracking code on the order history page.
  • The button supports size and domain customization to match your brand.

Updated on: 05/06/2025