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.
Go to Tracking pages > Widget in your AfterShip Tracking admin
Configure the following settings before embedding the widget to your eCommerce store.
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
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
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
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.
You can specify other parameters as well to customize the order lookup widget settings tailored to your needs.
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.
Overview
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 number | Order number and email | Both |
|---|---|---|
 |  |  |
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.
| Parameter | Type | Description |
|---|---|---|
| data-look-up-option | String | Lookup method of the widget. Can be tracking-number (default), order-number-and-email, or both. |
| data-domain | String | Website domain of the tracking page. Can be your_shortcode.aftership.com (default), track.aftership.com or custom domain. Learn about setting up your custom domain L. |
| data-btn-label | String | Text displayed on the Track button, which must be less than 20 characters. Default is Track |
| data-btn-bg-color | String | Background color of the Track button, which must be a 6-digit HEX number. Default is #f9a31a |
| data-btn-text-color | String | Text color of the Track button, which must be a 6-digit HEX number. Default is #ffffff |
| data-hide-icon | Boolean | Specifies whether to hide the AfterShip's icon, true or false (default). |
| data-size | String | The Track button is available in 3 sizes: small, medium, and large (default). |
| data-responsive | String | Specifies whether to make the order lookup widget mobile responsible, true (default) or false |
| data-width | Number | The width of the track button in px (applicable only if data-responsive is false), e.g. 300px |
| data-slug | String | Specifies a carrier code in the AfterShip system. If this parameter does not exist (default), AfterShip will detect the carrier automatically. |
| data-tracking-number | String | Pre-input tracking number so customers can track order in one click. Applicable only if the lookup option is tracking-number. |
| data-hide-tracking-number | Boolean | Specifies whether to hide the tracking number. Applicable only if you have a pre-input tracking number. |
| data-center | Boolean | Specifies 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
Thank you!