By default, ParcelPanel’s tracking page auto-inherits your store’s theme styles. If you’d like to customize the look, refer to the CSS below.
Note: Basic CSS knowledge may be required. If you’re not familiar, feel free to contact us — we’re happy to help 🧐
- Add some spacing to the top of the tracking page
- Change the font size of the tracking page title
- Center the tracking page title
- Hide the tracking page title
- Center the input fields and the track button
- Customize the input fields
- Customize the track button
- Add a hover effect to the track button
- Remove the border of the track button
- Reduce the width of the track button on mobile
- The sub-order dropdown menu disappeared
- Change the font color of the recommended products
- Change the color of the progress bar icons
- Change the size of the progress bar icons
- Change the font color of the shipment items
- Change the font color of the tracking details
- Change the background color of the tracking details
- Change the bottom spacing of the tracking page
- Change the font family of the tracking page
Add some spacing to the top of the tracking page
.pp_tracking_form_div {margin-top: 100px;}Change the font size of the tracking page title
.pp_tracking_title{font-size: 32px;}Center the tracking page title
.pp_tracking_title{text-align: center;}Hide the tracking page title
.pp_tracking_title {display: none;}Center the input fields and the track button
.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 20px;}Add a hover effect to the track button
.pp_tracking_content button:hover{background: #232323;}Remove the border of the track button
.pp_tracking_content button::after, .pp_tracking_content button:hover::after {box-shadow: none !important;}Reduce the width of the track button on mobile
@media (max-width: 530px) {.pp_tracking_content button {margin: 0 auto;width: 100px !important;left: 50%;transform: translateX(-50%);}}The sub-order dropdown menu disappeared
#pp-tracking-page-app .dropdown-menu {opacity: 1;transform: translateY(-16px);}Change the font color of the recommended products
.product-recommendation__card a{color: #2E2A39;}Change the color of the progress bar icons
#pp-tracking-page-app .progress-bar-node--active .icon-svg{fill: #8f6542;}Change the size of the progress bar icons
#pp-tracking-page-app .progress-bar-style .icon {width: 30px;max-width: 30px;}Change the font color of the shipment items
.pp_tracking_product_show .pp_tracking_info_img_span a{color: #000000;}Change the font color of the tracking details
.pp_tracking_result_parent {color: #ffffff;}Change the background color of the tracking details
.pp_timeline{--pp-timeline-card-background: #ffffff;}Change the bottom spacing of the tracking page
#pp-tracking-page-app .pp_tracking_result {padding-bottom: 20px;}Change the font family of the tracking page
#pp-tracking-page-app{font-family: 'Roboto', sans-serif;}