商品內容頁-商品頁版型 會套入系統預設的圖片，方便您針對版型細部做調整及設定固定的元件，如該版型固定要使用同一個影片或圖片，您可直接於版型內做設定，讓您的商品上架後可直接套入此版型，不用一一再拉圖片元件做設定喔!

 

讓我們來試著編輯商品內容頁版型，請點選頁面設計→選擇商品內容頁→選擇您要編輯的版型頁，按右下方編輯

 

進入商品版型頁，系統會自動帶入版型元件內的  商品內容、 商品照片集、 商品文字 、商品影片 四個元件， 接著說明這四個元件的細部設定，設定完成後， 當您上架商品(若為預設版型)則可直接套入該版型樣式喔！

 

一、商品內容元件 

商品內容元件內為帶入上架圖片一，以及商品名稱與價格等，

可為商品呈現的風格樣式做調整，並可細部調整商品顯示的大小與文字內容，

接下來來了解「商品內容元件」進行細部的樣式調整吧！

① 商品主圖-主圖風格

帶入商品上架 影像1 的圖片，主圖風格樣式可分四個樣式，請選擇您商品頁想要的樣式風格

② 設定 主圖顯示尺寸大小，分為「較大」和「較小」兩種

③ 設定 主圖顯示比例，分為「正方形1:1」、「直式2:3」 、「橫式4:3」三種可以選擇，您可依您商品圖片尺寸來設定

④ 設定 主圖是否開啟自動輪播

開啟 – 主圖一的圖片將會自動輪播

關閉 – 需手動跳至下一張圖片

 

⑤ 細節風格分為三個樣式，請選擇您要風格樣式

樣式一：商品細節說明在最下方

樣式二：商品細節說明在上方

樣式三：商品細節說明在中間

 

⑥ 加入購物車按鈕：開啟為顯示「加入購物車」按鈕，關閉則不顯示
如您是形象官網或販售商品無法在網路上販售（如酒類商品），則可關閉購物車按鈕

 

⑦ 商品售價：開啟為顯示售價，關閉則不顯示售價

                            如您是形象官網或販售商品無法顯示價格，則可關閉售價

 

⑧ 售價特殊色：開啟後售價文字不受色彩配置影響，會顯示 紅色

 

若關閉「手機版選擇規格彈窗」功能，則消費者使用手機瀏覽商品，點選下方加入購物車時不會直接彈跳規格彈窗，消費者需滑至商品規格處才能選擇後再按加入購物車。

二、商品照片集

商品照片集元件為帶入商品上架 影像2 的所有圖片，可點擊元件做細項調整

① 元件寬度 : 您可點選「產品照片集」元件設定您商品圖片寬度設定比(僅電腦版適用，此設定不影響手機版呈現大小)

 

② 圖片排列 : 分為「條列式」 、「網格式」 兩種呈現方式供您做設定

 

③ 圖片間距：分為「無 」、「小 (8px) 」、「中 (24px)」、 「大(56px)」四個圖片間距大小

確認後右上方儲存即可

 

三、商品文字 與 商品影片

展開左側的版型元件，拉入商品資料內的「商品文字 元件」、「商品影片 元件」到您商品版型頁想要呈現的位置

 

當商品上架時有套用該商品內容頁版型，且在上架商品的下圖藍框「介紹-商品文字」有輸入商品文字、及橘框內商品影片有設定影片連結時，於前台瀏覽該商品頁時，頁面將會顯示個別商品的文字及影片如下圖。

※註:若上架時沒有於「商品文字」和「商品影片」填入任何資訊，則前台商品頁面不會顯示。

四、新增其他元件

若想要在版型頁面裡加入固定的元件 EX:圖片、影片、商品問答等，則將元件拉到版型中您想要的位置作設定(詳細插入元件設定請參考 頁面元件使用與設計)，當上架商品套用此商品內容版型頁時，該商品頁下方都會呈現您在該版型所設定的元件喔!!  

舉例:如下圖，放入文字元件、商品列表元件、商品問答，讓您的商品頁版型下方有推薦商品的選項

上架商品套用此版型於前台頁面即會呈現推薦商品與商品問答，您就不用每次上架商品時拉入一樣的圖片及影片等其他元件，重複做設定囉!

---

五、綜合商品元件

除了上述拉入元件來製作商品頁，也可以使用綜合商品元件，可讓商品頁面版型更加靈活簡潔，讓「商品照片集」、「商品文字」、「商品影片」、「商品問答」透過頁籤設計顯示，將商品資訊清楚分類，更加井然有序，讓消費者能更直覺地瀏覽各項內容。

🔹 主要特色🔹

• 商品資訊更有條理：將商品照片集、商品規格、商品文字、商品影片等資訊整合於頁籤內，避免冗長頁面影響閱讀體驗。
• 消費者自由切換：可輕鬆點選頁籤，快速切換至想查看的商品資訊。
• 頁面更簡潔：減少過多資訊堆疊，提升瀏覽流暢度與購買體驗。
  

 

Step 1 : 選擇商品內容頁版型

點選頁面設計→選擇商品內容頁→選擇您要編輯的版型頁，按右下方編輯

 

Step 2 : 拖拉新增綜合商品資料
進入編輯頁面後，展開元件庫中的「商品資料」類別，並將「綜合商品資料」元件拖拉到右方頁面 

 

Step 3 : 預覽綜合商品資料

將「綜合商品資料」元件拖拉到頁面後，點擊「綜合商品資料」元件，即可預覽元件呈現

 

Step 4 : 設定綜合商品資料細節

綜合商品資料的呈現可視您的需要進行細部設定，詳細如下：

① 元件寬度

可透過拖拉選項，自由選擇想呈現的寬度為 50% 、 60% 、 70% 、 80% 、 90% 、 100%

 

② 資料呈現：提供 「頁籤」 與 「展開內容」 兩種排版方式，您可以依據需求選擇最適合的顯示方式。

🔹頁籤模式：

• 各個資料項的標題將排列在元件最上方。
• 僅顯示當前選取的頁籤內容，點擊不同頁籤可切換顯示對應資訊。
• 適合 資訊較多、需要分類整理 的頁面，例如商品規格、介紹等。

🔹 展開內容模式：

• 所有資料項的內容將全部展開，消費者可透過滾動查看所有資訊。
• 適合 資訊較少或希望一次顯示完整內容 的頁面，例如簡單商品介紹或說明。

 

③ 頁籤對齊方式

可在「置中」與「置左」兩種排版方式中擇一

 

④ 編輯「商品照片集」

您可以在頁籤名稱欄位內，編輯該頁籤名稱

選擇圖片排列方式，分為「條列式」與「網格式」兩種

選擇圖片間距：可依喜好自由選擇 大 / 中 / 小 / 無 

 

⑤ 編輯「商品文字」

您可在頁籤名稱欄位內，編輯該頁籤顯示名稱

 

⑥ 編輯「商品影片」

您可在頁籤名稱欄位內編輯該頁籤顯示名稱，並選擇影片長寬比，可選擇 16:9 / 4:3 / 16:10 格式

 

⑦ 編輯「商品問答」

您可在頁籤名稱欄位內編輯該頁籤顯示名稱

另可以刪除不想顯示的頁籤，如誤刪也可將頁籤新增回來，並自由排序

Step 5 : 移除重複的元件

因使用「綜合商品資料」元件已含「商品照片集」、「商品文字」、「商品影片」、「商品問答」的資訊，若原本商品頁版型內有放入 「商品照片集」、「商品文字」、「商品影片」、「商品問答」的個別元件，建議進行刪除，以避免商品頁面資訊重複，影響頁面整體使用體驗。

請檢查版型頁面，滑動至下方

刪除「商品照片集」、「商品文字」、「商品影片」、「商品問答」的個別元件

 

Step 6 : 預覽確認

當商品上架時有套用該商品內容頁版型，且上架商品有在下圖藍框「介紹-商品文字」有輸入商品文字，則前台該頁籤內將會顯示相關文字 

※註:若上架時沒有於「商品文字」填入任何資訊，則前台點擊該頁籤將顯示空白。

當商品上架時有套用該商品內容頁版型，且上架商品有在下圖粉框「影像2」有上傳圖片，則前台該頁籤內將會顯示商品圖

※註:若上架時沒有於「影像2」上傳圖片，則前台點擊該頁籤將顯示空白。

 

當咖框內商品影片有設定影片連結時，於前台瀏覽該商品頁時，點擊商品影片頁籤將會顯示影片資訊
※註:若上架時沒有於「商品影片」填入任何資訊，則前台點擊該頁籤將顯示空白。

於前台瀏覽該商品頁時，點擊商品問答頁籤，將會顯示商品問答

 

 

下一篇將說明如何將版型設定為預設版型，讓您上架商品即可套用您設定好的版型。