> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://support.trackingmore.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Some tips on customizing a beautiful tracking page

# There are some good tips on how to customize a beautiful tracking page:

### ${color}[#f50505](Classic) Tracking Page: Tracking Page >> Classic >> Customize
![](https://storage.crisp.chat/users/helpdesk/website/e0174a0b5e49b000/image_1dqb98a.png)

###### 1. Customize order lookup widget
1. ${color}[#f50f0f](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)

2. ${color}[#f50f0f](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)

3.  ${color}[#f50f0f](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)

4. ${color}[#f50f0f](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)

5. ${color}[#f50f0f](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)

6. ${color}[#f50f0f](Center the additional text above or below the order lookup zone:) **<center> [text message] <center>**, examples as below
1) sections >> order lookup >> put ${color}[#fe0606](<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
1. 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 
1. 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)


### ${color}[#f70202](Modern) Tracking Page: Tracking Page >> Modern >> Customize
![](https://storage.crisp.chat/users/helpdesk/website/e0174a0b5e49b000/image_1e5836m.png)

###### 1. Customize order lookup widget
1. ${color}[#f50f0f](Show or hide Tracking Number) 
![](https://storage.crisp.chat/users/helpdesk/website/e0174a0b5e49b000/image_e983od.png)

2. ${color}[#f50f0f](Show or hide Email & Order Number)
![](https://storage.crisp.chat/users/helpdesk/website/e0174a0b5e49b000/image_q6xfmo.png)

3. ${color}[#f50f0f](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)

4. Center the additional text above or below the order lookup zone: ${color}[#fb0909]( <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
1. 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)