You can now add an order lookup widget to your eCommerce store in just a few minutes and easily customize the settings.
Which features can be customized?
Lookup options
You can enable shoppers to track shipments with
- Tracking number
- Order number and email
- Both of the above options. By default, both of the above-mentioned options will be enabled.
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).
What other features can you enable?
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.
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. |
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 |
The 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. The default value 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 responsive, `true` (default), or `false`. |
data-slug |
String |
Specifies a carrier code in the AfterShip system. If this parameter does not exist (default), AfterShip will detect the carrier automatically. Learn more about carrier detection. |
Add track button code to your store
- Go to your store > Select a web page to add track button
- Copy the code from the Order lookup widget page and paste it on the required web page
- Save changes