> ## 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).

# 如何在品牌查询页自定义编辑CSS

# 如何在品牌查询页自定义编辑CSS

### 一、功能说明

你可以通过自定义编辑CSS代码更改查询页的样式，满足品牌店铺不同的展示需求。如发现更改不生效或者需要帮助，请通过在线客服联系我们。

|| 功能权限：Basic及以上的套餐

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

### 二、CSS 示例

以下为我们常规的CSS类名，帮助你快速找到页面元素：

1. 页面标题
.yq-track-page-title { text-align: center !important; }

2. 查询方式切换按钮
订单号查询 Tab
.yq-track-tab-order-num { color: #000 !important; }
运单号查询 Tab
.yq-track-tab-tracking-num { color: #000 !important; }
Tab 选中效果
.yq-track-num-active { font-weight: 600!important; }

3. 查询表单（输入框等）
输入框
.yq-track-num-form { border-color: rgba(30,30,30,1) !important}
Email/phone 
选择框
.yq-track-num-form .ant-select-selector{ border-color: rgba(0,0,0,0.16) !important;}
查询按钮
.yq-track-num-form button { background-color: #000 !important; }

4. 运单信息板块
.yq-track-info-wrap { padding: 16px 24px 12px; }
运单信息-标题
.yq-track-shipment-title { color: #000 !important; }
运单信息-描述：状态/时间
.yq-track-shipment-desc { color: rgba(30,30,30,0.6) !important; }
运单进度条
.yq-track-progress { margin-top: '10px'; }

5. 轨迹信息标题&轨迹翻译器
.yq-track-track-title-wrap {padding-bottom: 20px;}

6. 轨迹内容
运输商
.yq-track-wrap .yq-track-provider { margin-bottom: 24px; }
历史轨迹事件样式
.yq-track-wrap .yq-track-event { padding-bottom: 20px; color: rgba(30,30,30,0.6) !important; }
最新轨迹事件样式
.yq-track-wrap .yq-track-latest-event p { color: #000 !important; }

7. 订单信息模块（容器）
.yq-track-order-info-wrap { }
订单信息内容
.yq-track-product-item{}
订单内商品样式
.yq-track-order-info-item{ padding-bottom: 16px; }
展示更多信息按钮
.yq-track-order-show-toggle { margin-top: '0px'; }

8. 产品推荐组件
.yq-track-productRecommendation-section{ padding: 24px 16px 32px !important; }
产品推荐单个商品样式
.yq-track-product-recommend-item{ padding: 8px 0 !important;}
产品推荐标题
.yq-track-productRecommendation-title { color: #000 !important;}

9. 图集组件
.yq-track-images-section{ padding: 24px 16px 32px !important; }

10. 视频组件
.yq-track-video-section{ padding: 24px 16px 32px !important; }


---

这篇指南解决您的问题了吗？如果觉得有用，请支持我们一个5星好评吧！[点此评价⭐⭐⭐⭐⭐](https://apps.shopify.com/17track#modal-show=WriteReviewModal)