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
![](https://storage.crisp.chat/users/helpdesk/website/e0174a0b5e49b000/image_1dqb98a.png)
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
![](https://storage.crisp.chat/users/helpdesk/website/e0174a0b5e49b000/image_1rfijfl.png)
Show or hide Email & Order Number: for customers who have no email left on the order, it's suggested to hide email & order number
![](https://storage.crisp.chat/users/helpdesk/website/e0174a0b5e49b000/image_18r366i.png)
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
![](https://storage.crisp.chat/users/helpdesk/website/e0174a0b5e49b000/image_160d5yc.png)
Show or hide Border: showing or hiding it based on your own web design
![](https://storage.crisp.chat/users/helpdesk/website/e0174a0b5e49b000/image_qflq5m.png)
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.
![](https://storage.crisp.chat/users/helpdesk/website/e0174a0b5e49b000/image_1ik81f4.png)
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
![sections>>order look up](https://storage.crisp.chat/users/helpdesk/website/e0174a0b5e49b000/image_i8762k.png)
![](https://storage.crisp.chat/users/helpdesk/website/e0174a0b5e49b000/image_assp67.png)
![](https://storage.crisp.chat/users/helpdesk/website/e0174a0b5e49b000/image_1s9rli.png)
2) or extra code>> put <center>[text message] </center> in the HTML - TOP or BOTTOM>>then preview it>> if ok, then save
![center the text in extra code](https://storage.crisp.chat/users/helpdesk/website/e0174a0b5e49b000/image_133doo3.png)
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.
![](https://storage.crisp.chat/users/helpdesk/website/e0174a0b5e49b000/image_1wgk441.png)
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
![](https://storage.crisp.chat/users/helpdesk/website/e0174a0b5e49b000/image_16j0oqy.png)
![](https://storage.crisp.chat/users/helpdesk/website/e0174a0b5e49b000/image_1756jld.png)
Modern Tracking Page: Tracking Page >> Modern >> Customize
![](https://storage.crisp.chat/users/helpdesk/website/e0174a0b5e49b000/image_1e5836m.png)
1. Customize order lookup widget
Show or hide Tracking Number
![](https://storage.crisp.chat/users/helpdesk/website/e0174a0b5e49b000/image_e983od.png)
Show or hide Email & Order Number
![](https://storage.crisp.chat/users/helpdesk/website/e0174a0b5e49b000/image_q6xfmo.png)
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.
![](https://storage.crisp.chat/users/helpdesk/website/e0174a0b5e49b000/image_1rzgskx.png)
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
![](https://storage.crisp.chat/users/helpdesk/website/e0174a0b5e49b000/image_1pel2i2.png)
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.
![](https://storage.crisp.chat/users/helpdesk/website/e0174a0b5e49b000/image_h70b42.png)
![](https://storage.crisp.chat/users/helpdesk/website/e0174a0b5e49b000/image_nleimf.png)
Updated on: 19/09/2023
Thank you!