Introduction

針對 PDP 的商品銷售數功能，做了 UI 優化，讓顯示銷售數量的介面能更清楚明瞭。

詳細介紹: 商品詳情頁顯示｜商品銷售數

功能展示範例：

---

加入PDP 顯示商品銷量 style

1. 到後台選擇左邊的目錄，點選 網店設計 -> 編輯 HTML/CSS。

2. 點擊搜尋框，輸入 theme.css，篩選出 theme.css.liquid 檔案，並且點擊進入編輯。

3. 將以下整段 css 貼到 theme.css.liquid 最下方。此部分 style 是處理樣式
   CSS

   .product-sale-sold-count {
     display: inline-flex;
     align-items: center;
     gap: 4px;
     padding: 4px 6px;
     border-radius: 4px;
     width: 100%;
     min-height: 29px;
     margin: 10px 0;
     background-color: var(--product-promotion-label-background, var(--primary-background, var(--primary-color, #c74060)));
     color: var(--product-promotion-label-text, #fff);
   }
   
   .product-sale-sold-count b {
     font-weight: 600;
   }
   
   product-available-info + .product-detail-actions .product-sale-sold-count {
     margin-top: 0;
   }
   
   .product-sale-sold-count-icon {
     width: 16px;
     height: 16px;
   }
   

4. 到後台開啟商品銷售數，設定 > 商品設定 頁面下的 在前台商品詳情頁顯示「商品銷售數」

前往商品頁面確認是否顯示

提醒 商品須銷售 10 件（含）以上才會展示銷量。 所以要進入到銷售量大於 10 的商品頁面，檢查功能是否正確顯示。建議先在商品編輯後台排序出有銷量的商品，再來進行查看。

如需協助，請聯繫我們。