Some tips on customizing a beautiful tracking page
There are some good tips on how to customize a beautiful tracking page:
Classic Tracking Page: Tracking Page >> Classic >> Customize

1. Customize order lookup widget
Show or hide Tracking Number: for customers who have no tracking numbers or merchants who don't want their customers to see the tracking number for some reasons (e.g. dropshippers), it's suggested to hide tracking number

Show or hide Email & Order Number: for customers who have no email left on the order, it's suggested to hide email & order number

Show or hide Placeholder: if you want your customers to see clear what input text to be input in the box, you can open it; while if you feel it's duplicate with the title, you can close it

Show or hide Border: showing or hiding it based on your own web design

Customize colors of tracking button, tracking button text, tracking border, input text: For easier & simpler customizing, tracking button color can be the same as tracking border color; while tracking button text color=input text color. And the darkness or lightness of them depends on your web background color.

Center the additional text above or below the order lookup zone: <center> [text message] <center>, examples as below
1) sections >> order lookup >> put <center> [text message] <center> in the text above or below



2) or extra code>> put <center>[text message] </center> in the HTML - TOP or BOTTOM>>then preview it>> if ok, then save

2. Customize progress bar color
Progress bar color is suggested to be in consistent with the track button color or the top banner color of your web.

3. Detailed info
show or hide courier & tracking number
If you have disabled tracking number in order lookup widget for some reasons, it's suggested to hide courier & tracking number in detailed info


Modern Tracking Page: Tracking Page >> Modern >> Customize

1. Customize order lookup widget
Show or hide Tracking Number

Show or hide Email & Order Number

Customize colors of button, button text, lookup border, input text: For easier & simpler customizing, button color= lookup border color; while button text color=input text color. And the darkness or lightness of them depends on your web background color.

Center the additional text above or below the order lookup zone: <center> [text message] <center>
extra code>> put <center>[text message] </center> in the HTML - TOP or BOTTOM>>then preview it>> if ok, then save

2. Customize progress bar color
Progress bar color is suggested to be in consistent with the track button color or the top banner color of your web.


Updated on: 19/09/2023
Thank you!