> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help-shopify.17track.net/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).

# How to Customize CSS in Tracking Page!


# How to Customize CSS in Tracking Page!

### 1. Functional Description

You can change the style of the tracking page by custom editing the CSS code to meet the different display requirements of stores.

|| Functional permissions: Basic, Pro, Premium plan.

![](https://storage.crisp.chat/users/helpdesk/website/-/1/c/c/3/1cc3f89e3566e700/image_1mm19gf.png)

### 2. CSS examples

The following are our regular CSS class names to help you quickly find page elements:

1. Title
.yq-track-page-title { text-align: center !important; }

2. Lookup options button
By Order number Tab
.yq-track-tab-order-num { color: #000 !important; }
By Tracking number Tab
.yq-track-tab-tracking-num { color: #000 !important; }
Tab - Selected state
.yq-track-num-active { font-weight: 600!important; }

3. Tracking components (input box, etc.)
Input box
.yq-track-num-form { border-color: rgba(30,30,30,1) !important}
Email/phone selection box
.yq-track-num-form .ant-select-selector{ border-color: rgba(0,0,0,0.16) !important;}
Track your order button
.yq-track-num-form button { background-color: #000 !important; }

4. Tracking info section
.yq-track-info-wrap { padding: 16px 24px 12px; }
Tracking info - title
.yq-track-shipment-title { color: #000 !important; }
Tracking info - description: status/date
.yq-track-shipment-desc { color: rgba(30,30,30,0.6) !important; }
Tracking info - Progress Bar
.yq-track-progress { margin-top: '10px'; }

5. Tracking event title & translator
.yq-track-track-title-wrap {padding-bottom: 20px;}

6. Track event components
Carrier
.yq-track-info-wrap .yq-track-provider { margin-bottom: 24px; }
Historical track event style
.yq-track-wrap .yq-track-event { padding-bottom: 20px; color: rgba(30,30,30,0.6) !important; }
Latest track event style
.yq-track-info-wrap .yq-track-latest-event p { color: #000 !important; }

7. Order information section
.yq-track-order-info-wrap { }
Order information
.yq-track-product-item{}
Products in Order infomation
.yq-track-order-info-item{ padding-bottom: 16px; }
Show more button
.yq-track-order-show-toggle { margin-top: '0px'; }

8. Product recommendation
.yq-track-productRecommendation-section{ padding: 24px 16px 32px !important; }
Product recommendation - items
.yq-track-product-recommend-item{ padding: 8px 0 !important;}
Product recommendation - title
.yq-track-productRecommendation-title { color: #000 !important;}

9. Image section
.yq-track-images-section{ padding: 24px 16px 32px !important; }

10. Video section
.yq-track-video-section{ padding: 24px 16px 32px !important; }




Did this guide solve your problem? lf so, please support us with a 5-star review! [Rate ⭐⭐⭐⭐⭐](https://apps.shopify.com/17track#modal-show=WriteReviewModal)