商品內容頁-商品頁版型 會套入系統預設的圖片,方便您針對版型細部做調整及設定固定的元件,如該版型固定要使用同一個影片或圖片,您可直接於版型內做設定,讓您的商品上架後可直接套入此版型,不用一一再拉圖片元件做設定喔!
讓我們來試著編輯商品內容頁版型吧!
點選頁面設計→選擇商品內容頁→選擇您要編輯的版型頁,按右下方編輯
進入商品版型頁,系統會自動帶入版型元件內的①商品主圖元件、②商品細節元件、③商品照片集元件,當您上架商品時(若為預設版型)則可直接套入該版型樣式,開始為該版型做編輯設定。
接著,您可以針對版型內的元件做樣式的編輯或新增左方的元件,如下步驟說明
Step 1 : 商品主圖
帶入商品上架 影像1 的圖片
可點選版型內商品主圖元件,設定產品主圖顯示的方式-可設定多張圖輪播或只顯示商品首圖
Step2 : 帶入上架時所填入的商品名稱、商品細節、商品規格,點選產品細節編輯,可設定頁面商品規格呈現的方式,分為下拉式及展開規格兩種。
「手機版選擇規格彈窗」也分為下拉式及展開規格兩種,讓消費者使用手機瀏覽商品頁時,按最下方「加入購物車」即可彈跳出規格的視窗,方便讓消費者點選需要的商品規格。
若關閉「手機版選擇規格彈窗」功能,則消費者使用手機瀏覽商品,點選下方加入購物車時不會直接彈跳規格彈窗,即會依您頁面規格顯示之設定,於商品明細價格下方顯示展開或下拉式的規格選項,消費者需滑至商品規格選擇後再按加入購物車。
Step3 : 「產品照片集」元件為帶入商品上架 影像2 的所有圖片
您可點選「產品照片集」元件設定您商品圖片寬度設定比(僅電腦版適用,此設定不影響手機版呈現大小) 及「圖片排列」呈現方式,確認後右上方儲存即可
Step4 : 若想要在版型頁面裡加入個別商品的文字說明或影片,則先展開左側的版型元件,拉入商品資料內的「商品文字元件」及「商品影片元件」到您商品頁想要呈現的位置。
當商品上架時有套用該商品內容頁版型,且在上架商品的下圖藍框「介紹-商品文字」有輸入商品文字、及橘框內商品影片有設定影片連結時,於前台瀏覽該商品頁時,頁面將會顯示個別商品的文字及影片如下圖。
※註:若上架時沒有於「商品文字」和「商品影片」填入任何資訊,則前台商品頁面不會顯示。
Step5 : 若想要在版型頁面裡加入固定的元件 EX:圖片、影片等,則將元件拉到版型中您想要的位置作設定(詳細插入元件設定請參考 頁面元件使用與設計),當上架商品套用此商品內容版型頁時,該商品頁下方都會呈現您在該版型所設定的元件喔!!
舉例:如下圖,拉入圖片元件-放入模特兒的資訊圖
並放入文字元件及商品列表元件,讓您的商品頁版型下方有推薦商品的選項,
上架商品套用此版型於前台頁面即會呈現此模特兒資訊圖及推薦商品,您就不用每次上架商品時拉入一樣的圖片及影片等其他元件,重複做設定囉!
商品內容頁影片說明
下一篇將說明如何將版型設定為預設版型,讓您上架商品即可套用您設定好的版型。