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.

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

Updated on: 03/05/2026