[即將推出] 新版手機端商品詳情頁

因應目前使用手機瀏覽網頁的顧客日益增加，為符合用戶瀏覽習慣，本次更新全面優化手機端「商品詳情頁面」，透過更直觀、更順暢的頁面佈局，提升顧客的購物效率與消費體驗。

⚠️ 開始前請注意：如您欲啟用新版手機端商品詳情頁，請至「SHOPLINE 後台 > 網店設計 > 網店分頁 > 系統標準頁」前往「商品詳情頁」，詳細設定步驟請參考：[即將推出] 系統標準頁：商品詳情頁。

本篇文章將分別介紹優化頁面：

• 商品主要購買區
• 商品摘要區
• 商品詳情區

一、商品主要購買區

1. 新增商品縮略圖

如有設定商品的規格選項圖片，點擊切換規格時，會新增該規格縮略圖在縮圖的第一個位置。

2. 強化選購流程的重點資訊

集中商品主圖、價格、規格選項等資訊，讓顧客的購買行為更順暢。

• 如商品有評價資訊，會於商品名稱的下方顯示，點擊星等旁邊的「X 評價」後會從底部拉起評價彈窗，即可瀏覽所有顧客評價。

3. 簡化頁面部分資訊

簡化未登入追蹤流程：點擊「加入追蹤清單」後，即跳轉到登入／註冊頁面。	簡化定期購商品相關資訊、社群分享按鈕設計

4. 調整預購、低庫存提示資訊

調整預購提示樣式，使其更融合於頁面中	調整低庫存提示位置，更配合顧客的購買動線

5. 優化商品規格選項

商品價格

若商品為不同規格不同價格，將展示價格區間。待顧客選中某商品規格時，才會展示該規格價格。

＊範例：有特價（任一規格商品為特價）及原價的商品

尚未選中規格時的商品價格	選中規格的商品價格

進入商品詳情頁面時不預選規格選項

進入商品詳情頁面時，如顧客未點選某商品規格，將會依照商品規格的設定方式呈現不預選規格的畫面。

文字選項 / 圖片選項：不預選選項	下拉式選單：呈現預設狀態「請選擇」

商品規格展示順序

選擇第 1 層規格款式後，依照第 1 層選中款式，系統會展示第 2、3 層匹配的款式，並隱藏不匹配的規格款式。

＊範例：顏色為橄欖綠的圓形精油皂只有大尺寸、中尺寸，且只有預購選項，因此選擇橄欖綠時會隱藏小尺寸及現貨選項的規格。

＊注意：

• 由於系統會依序檢查匹配的款式選項，如先選擇第 2 層款式，要等到選中第 1 層款式後，才能檢查第 2、3 層匹配的款式。
• 選中單一款式後，切換規格選項時若某一層的款式不匹配，則會變回預設未選中的狀態，顧客須重新選擇。

規格無庫存時售完提示

• 如某規格完全無庫存時，會直接顯示反灰提示售完，但顧客仍可點選反灰的規格選項。
• 選擇第 1 層規格款式後，系統會檢查第 2、3 層匹配款式的庫存狀態，若有款式無庫存，則該選項會反灰。

• 由於系統會依序檢查匹配款式的庫存狀態選項，因此如果先選擇第 2、3 層的規格，仍須等選擇第 1 層規格後，才能檢查該款式的庫存狀態。

＊範例：先選擇「尺寸」和「預購 / 現貨」選項後，仍須選擇「顏色」才能檢查該款式是否有庫存。

6. 重點按鈕置底

進入商品詳情頁面時，以下重點按鈕將會自動置底：

• 加入購物車
• 立即購買
• 現在預購
• 聯絡我們
• 即將開賣
• 販售結束
• 貨到通知我

＊範例：

加入購物車 / 立即購買	貨到通知我

7. 新增「選擇商品規格」提示

顧客在操作以下行為前若沒有選擇商品規格，會出現「請選擇商品規格」的提示，並將頁面錨定到規格選項區塊：

• 加入購物車
• 立即購買
• 現在預購
• 貨到通知我
• 加入追蹤清單
• 查看可取貨門市

＊範例：

二、商品摘要區

1. 適用優惠活動

此區塊帶入適用優惠活動，預設展示前 3 項，可點選「全部優惠 (n)」展開所有該商品適用的優惠活動。

優惠活動顯示內容

為了讓顧客更清楚的掌握優惠資訊，系統會根據優惠設定自動組成顯示文字。顯示格式如下：

{會員類型} + {優惠類型} + {截止時間} + {套用範圍} + {優惠名稱}

「會員類型」和「優惠類型」加強重點標示，文字顏色預設套用網店主題色。如您的網店版型支援 SHOP Builder，則會套用商品促銷標籤顏色。組成優惠活動格式的文字呈現規則如下：

2. 商品摘要

此區塊位於適用優惠活動下方，帶入「商品摘要」的內容。顧客可在瀏覽優惠時同步獲取商品重點資訊。

3. 加購品區塊

加購品顯示內容

如該商品有設定加購品，此區塊將會出現於優惠活動與商品摘要下方，展示加購品的內容。預設展示前 2 項加購品畫面，可點選「全部加購品 (n)」展開所有該商品適用的加購品。

＊注意：

• 加購品須為上架狀態且有庫存數量才會顯示。
• 加購品排序依照後台設定展示。

加購品選購提示

如您有在「SHOPLINE 商店後台 > 商品及分類 > 加購品」開啟「加購品購買數量限制」功能，此區塊上方將顯示提示文字「最多選 {x} 件」。

＊註：{x} 會帶入當前主商品數量選擇器的數量。

根據顧客選擇的加購品數量，將會分別出現以下提示文字：

已選加購品數量 < 當前主商品數量	已選加購品數量 = 當前主商品數量
已選 {y} 件，可再選 {x-y} 件	已選 {y} 件，已達上限

＊注意：

• 置底的重點按鈕上方也會顯示顧客所選商品總數量「共 {t} 件 (含主商品 {x} 件，加購品 {y} 件)」。
• 當已選加購品數量達上限時，勾選框和數量選擇器「+」號將會反灰無法操作，且無法輸入超過購買上限的數字。

主商品為多規格商品

如選擇的主商品為多規格商品，在尚未選擇主商品規格時，只選擇加購品加入購物車，右上角仍會出現「請選擇商品規格」的提示。

＊注意：

• 選擇主商品規格後，加購品區塊的限購數量才會根據當前主商品數量選擇器的數量變化。
• 在調整主商品規格或減少主商品數量後，若導致原先選中的加購品數量大於主商品數量，系統則會清空已選加購品，須重新選擇。

三、商品詳情區

商品詳情區的置頂標籤頁包含：「商品描述」、「更多說明」、「評價」及「推薦」，以下分別說明：

1. 商品描述

此區塊帶入「商品描述」的內容，預設為展開。

2. 更多說明

此區塊將會依序顯示「更多商品圖片」、「付款方式」及「送貨方式」的內容。

• 更多商品圖片：帶入「更多商品圖片」的內容，預設為展開。

＊注意：各版型此處的圖片間距皆統一。

• 付款方式及送貨方式：帶入該商品可用的「付款方式」及「送貨方式」的全名，預設為收合。

3. 評價

此區塊帶入「商品評價」資料，外層最多顯示最新的 2 則評價，點擊「查看全部評價」後才會開啟顧客評價彈窗，即可檢視所有評價 。

＊注意：

• 此處與網頁版相同，要至 SHOPLINE 後台「商品及分類 > 商品評價」，點選「商品評價設定」，並啟用「在前台啟用「商品評價」功能」後，商品評價才會顯示於前台頁面。
• 目前新版手機端商品詳情頁不支援 Amazon 商品評價串接，因此此處不會出現評價來源的篩選器。

4. 推薦

此區塊帶入「相關商品」的內容與自訂的商品陳列版型。

上述置頂標籤頁若未在後台輸入相應資料，該區塊將不會顯示於商品詳情段落。點擊其餘頁籤將會錨定到相應的資訊區塊。

＊範例：未填入「商品描述」的內容，則隱藏該區塊。

延伸閱讀

• 商品規格與款式｜商品
• 商品規格：圖片選項｜商品
• 商品規格：文字選項｜商品