By default, ParcelPanel tracking page will auto-inherit styles from your store theme. If you want to do some custom changes, here is the instruction.

Note: some basic understandings of CSS code may be required, if you can't figure it out, don't hesitate to contact us, we are always glad to help you.

Center the tracking page title

.pp_tracking_title{text-align: center;}

Change the font size of the tracking page title

.pp_tracking_title{font-size:42px;}

Center the tracking section

.pp_tracking_form{text-align:center;display: block !important}
.pp_tracking_form input{display: inline-block !important}

Customize the input fields

.pp_tracking_content .PP-TextField__Input{padding:10px;border:1px solid #E6E6E6;}

Customize the track button

.pp_tracking_content button{background: #000 ;border: 1px solid #000 ;color: #FFFFFF;border-radius: 2px;padding: 10px 22px;}

Add the hover effect of the tracking button

.pp_tracking_content button:hover{background:#232323;}

Customize the color of product link on the tracking page

.pp_tracking_product_show .pp_tracking_info_img_span a{color:#000000;}

Change the text color of tracking detailed info

.pp_tracking_result_parent {color:#ffffff;}

Solve the issue that there are some black points on the left of the tracking detailed info

.pp_tracking_content li {list-style: none !important;}
.pp_tracking_content li:before {display: none !important;}

Add some padding to the top of the tracking page

@media screen and (min-width: 768px) {.pp_tracking_content {padding-top: 160px !important;} }

Solve the issue that the order status text is overlapped

.pp_tracking_content .progress-bar-style .text-wrapper b {word-wrap: break-word !important;width: 108px;}

Change the color of the icons above progress bar

.pp_tracking_content .progress-bar-style .icon-svg {fill: #ffffff;}