Articles on: Branded Tracking Page

Learn About the Order Lookup Widget (Track Button)

Plans: All plans Platforms: All platforms


You can now add an order lookup widget to your eCommerce store in just a few minutes and easily customize the settings enabling customers to track their orders in a few clicks.

Set up order lookup widget

Go to Tracking pages > Widget in your AfterShip Tracking admin

Configure the following settings before embedding the widget to your eCommerce store.

Lookup options

You can enable shoppers to track shipments with

Tracking number: Only tracking number is required to track order
Order number and email: Ecommerce platform's order number and customer's email with which the order is placed are required to track order
Both: By default, both the aforementioned options will be enabled and required to track order

Tracking numberOrder number and emailBoth

Landing page URL

Add where you want users to land and track their orders once they add their lookup details. You can direct users to

Universal URL: The customers will be taken to your default tracking page to track orders
Specific page variation: The customers will be taken to the page variation you select amongst your active tracking page variations to track orders that may differ based in layout, style, and segmentation

Widget style

Customize the widget in step with your brand and deliver a completely branded tracking experience to shoppers.

Label: it is the text displayed on the Track button (default value: Track). It must be less than 20 characters.
Color: You can change the text and background color of the track button. It must be a 6-digit HEX number.

- Default track button text color: #ffffff,
- Default track button background-color: #f9a31a

Icon: You can remove the AfterShip logo from the track button by enabling the “Hide icon” option.
Size: Change the track button width. AfterShip provides you with three options small, medium, and large (default).
Align: Set the alignment of the track button on the page. You only get to centrally align the track button.
AfterShip branding: Select the checkbox to remove AfterShip branding.

AfterShip branding removal is available on Premium and Enterprise plans

Additional features

All you need to do is add a few lines of codes, and you can customize the track button with various other features.

Pre-input tracking number: Specify the field “data-tracking-number” and shoppers will be able to track orders in 1-click. It’s applicable only if the lookup option is “Tracking number”.
Hide tracking number: Specify the field “data-hide-tracking-number”. It’s applicable only if you have enabled the pre-input tracking number option.
Modify track button width: Mention the width of the track button in px using the “data-width” field. Applicable only if “data-responsive” is false.

Additional parameters

You can specify other parameters as well to customize the order lookup widget settings tailored to your needs.

data-look-up-optionStringLookup method of the widget. Can be tracking-number (default), order-number-and-email, or both.
data-domainStringWebsite domain of the tracking page. Can be (default), or custom domain. Learn about setting up your custom domain L.
data-btn-labelStringText displayed on the Track button, which must be less than 20 characters. Default is Track
data-btn-bg-colorStringBackground color of the Track button, which must be a 6-digit HEX number. Default is #f9a31a
data-btn-text-colorStringText color of the Track button, which must be a 6-digit HEX number. Default is #ffffff
data-hide-iconBooleanSpecifies whether to hide the AfterShip's icon, true or false (default).
data-sizeStringThe Track button is available in 3 sizes: small, medium, and large (default).
data-responsiveStringSpecifies whether to make the order lookup widget mobile responsible, true (default) or false
data-widthNumberThe width of the track button in px (applicable only if data-responsive is false), e.g. 300px
data-slugStringSpecifies a carrier code in the AfterShip system. If this parameter does not exist (default), AfterShip will detect the carrier automatically.
data-tracking-numberStringPre-input tracking number so customers can track order in one click. Applicable only if the lookup option is tracking-number.
data-hide-tracking-numberBooleanSpecifies whether to hide the tracking number. Applicable only if you have a pre-input tracking number.
data-centerBooleanSpecifies whether to center, true or false (default).

Add track button code to your store

You can create a new page on your store, or just choose one of the existing pages to add the AfterShip order lookup widget.

Go to your store admin (e.g. Shopify) > Select a web page to add the track button
Copy the code from the Order lookup widget page

Paste code 1 as well as code 2 on the required web page in your store admin

Save changes

This how the widget would look like.

Updated on: 06/03/2024

Was this article helpful?

Share your feedback


Thank you!