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: Basic understanding of CSS code may be required. If you are not familiar, don't hesitate to contact us, and we are always happy to assist 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 the product link on the tracking page

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

Change the text color of tracking details

.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 the progress bar

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