Learn About the Order Lookup Widget (Track Button)

Plans: All plans Platforms: All platforms

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.

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

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