How to Customize CSS in Tracking Page!

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

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

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

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

Tracking event title & translator

.yq-track-track-title-wrap {padding-bottom: 20px;}

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

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

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

Image section

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

Video section

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

Updated on: 05/12/2024