商品內容頁-商品頁版型 會套入系統預設的圖片,方便您針對版型細部做調整及設定固定的元件,如該版型固定要使用同一個影片或圖片,您可直接於版型內做設定,讓您的商品上架後可直接套入此版型,不用一一再拉圖片元件做設定喔!
讓我們來試著編輯商品內容頁版型吧!
點選頁面設計→選擇商品內容頁→選擇您要編輯的版型頁,按右下方編輯
進入商品版型頁,系統會自動帶入版型元件內的 商品內容、 商品照片集、 商品文字 、商品影片 四個元件,
接著來說明這四個元件的細部設定,設定完成後, 當您上架商品(若為預設版型)則可直接套入該版型樣式喔!
一、商品內容元件
商品內容元件內為帶入上架圖片一,以及商品名稱與價格等,
可為商品呈現的風格樣式做調整,並可細部調整商品顯示的大小與文字內容,
接下來來了解「商品內容元件」進行細部的樣式調整吧!
① 商品主圖-主圖風格
帶入商品上架 影像1 的圖片,主圖風格樣式可分四個樣式,請選擇您商品頁想要的樣式風格
② 設定 主圖顯示尺寸大小,分為「較大」和「較小」兩種
③ 設定 主圖顯示比例,分為「正方形1:1」、「直式2:3」 、「橫式4:3」三種可以選擇,您可依您商品圖片尺寸來設定
④ 設定 主圖是否開啟自動輪播
開啟 – 主圖一的圖片將會自動輪播
關閉 – 需手動跳至下一張圖片
⑤ 細節風格分為三個樣式,請選擇您要風格樣式
樣式一:商品細節說明在最下方
樣式二:商品細節說明在上方
樣式三:商品細節說明在中間
⑥ 加入購物車按鈕:開啟為顯示「加入購物車」按鈕,關閉則不顯示
如您是形象官網或販售商品無法在網路上販售(如酒類商品),則可關閉購物車按鈕
⑦ 商品售價:開啟為顯示售價,關閉則不顯示售價
如您是形象官網或販售商品無法顯示價格,則可關閉售價
⑧ 售價特殊色:開啟後售價文字不受色彩配置影響,會顯示 紅色
⑨ 商品售價字級: 可設定售價的顯示大小,分別為「較小 (20px)」 、「適中 (28px)」、 「較大 (32px)」 、「特大 (40px)」四個級距做調整
⑪ 規格選擇方式 : 分為「 按鈕 」、「 選單」兩種呈現方式可做調整
若關閉「手機版選擇規格彈窗」功能,則消費者使用手機瀏覽商品,點選下方加入購物車時不會直接彈跳規格彈窗,消費者需滑至商品規格處才能選擇後再按加入購物車。
二、商品照片集
商品照片集元件為帶入商品上架 影像2 的所有圖片,可點擊元件做細項調整
① 元件寬度 : 您可點選「產品照片集」元件設定您商品圖片寬度設定比(僅電腦版適用,此設定不影響手機版呈現大小)
② 圖片排列 : 分為「條列式」 、「網格式」 兩種呈現方式供您做設定
③ 圖片間距:分為「無 」、「小 (8px) 」、「中 (24px)」、 「大(56px)」四個圖片間距大小
確認後右上方儲存即可
三、商品文字 與 商品影片
展開左側的版型元件,拉入商品資料內的「商品文字 元件」、「商品影片 元件」到您商品版型頁想要呈現的位置
當商品上架時有套用該商品內容頁版型,且在上架商品的下圖藍框「介紹-商品文字」有輸入商品文字、及橘框內商品影片有設定影片連結時,於前台瀏覽該商品頁時,頁面將會顯示個別商品的文字及影片如下圖。
※註:若上架時沒有於「商品文字」和「商品影片」填入任何資訊,則前台商品頁面不會顯示。
四、新增其他元件:
若想要在版型頁面裡加入固定的元件 EX:圖片、影片、商品問答等,則將元件拉到版型中您想要的位置作設定(詳細插入元件設定請參考 頁面元件使用與設計),當上架商品套用此商品內容版型頁時,該商品頁下方都會呈現您在該版型所設定的元件喔!!
舉例:如下圖,放入文字元件、商品列表元件、商品問答,讓您的商品頁版型下方有推薦商品的選項
上架商品套用此版型於前台頁面即會呈現推薦商品與商品問答,您就不用每次上架商品時拉入一樣的圖片及影片等其他元件,重複做設定囉!
商品內容頁影片說明
下一篇將說明如何將版型設定為預設版型,讓您上架商品即可套用您設定好的版型。