By default, ParcelPanel auto-generates a tracking page that inherits your Shopify store theme style to help build brand identity. If you want to make some custom changes, check out the following instructions:

1. What Are CSS Codes?

In layman's terms, CSS (Cascading Style Sheets) code helps to transform plain text pages into unique stylized web pages with advanced animations and responsive designs by adding them to the basic HTML. For beginners, we can just add the ready-made code into page HTML to achieve some UI design.

If you still need clarification about it, feel free to contact us, and we are always happy to assist you.

2. CSS Code to Customize Your Tracking Page

Here is the list of CSS codes:

1. Center the tracking page title
2. Change the font size of the tracking page title
3. Center the tracking section
4. Customize the input fields
5. Customize the track button
6. Add the hover effect of the tracking button
7. Customize the color of the product link on the tracking page
8. Change the text color of tracking details
9. Solve the issue that there are some black points on the left of the tracking detailed info
10. Add some padding to the top of the tracking page
11. Solve the issue that the order status text is overlapped
12. Change the color of the icons above the progress bar

1. Center the tracking page title

.pp_tracking_title{text-align: center;}

2. Change the font size of the tracking page title

.pp_tracking_title{font-size:42px;}

3. Center the tracking section

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

4. Customize the input fields

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

5. Customize the track button

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

6. Add the hover effect of the tracking button

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

7. Customize the color of the product link on the tracking page

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

8. Change the text color of tracking details

.pp_tracking_result_parent {color:#ffffff;}

9. 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;}

10. Add some padding to the top of the tracking page

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

11. 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;}

12. Change the color of the icons above the progress bar

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

Did this answer your questions?

Thank you for your feedback