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

2. CSS examples

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

2.1. Title

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

2.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: 05/12/2024