在上一篇 選單目錄設定已設定好商店的選單後,您就可於頁面進行選單樣式的設定及調整,跟著以下步驟一起來操作看看吧!
編輯主選單樣式
Step1 : 點選商店設計-頁面設計
Step2 : 選擇需要設計的頁面選取右下方編輯
Step3 : 選擇需要設計的頁面選單

Step4 : 點選「變更選單樣式」

您將會看到多樣的細節設定,請參考下列步驟,設計出美觀又實用的選單!
在每個步驟中,您都可以透過右方的預覽區塊查看實際的呈現與變化。


Step1 : 您可以在此選擇在選單中是否出現商品關鍵字搜尋的圖示與區塊
Step2 : 您可以在此選擇是否直接顯示展開子選單(如下圖),否則當鼠標移動到選項時才會出現

Step3 : 您可以在此選擇是否在選單中顯示您的商店 LOGO
Step4 : 您可以在此選擇商店 LOGO 的排序位置,分別有置左、置中、置右三種選擇
Step5 : 您可以在此選擇商店 LOGO 與選單目錄的位置,分別有置左、置中、置右、分散四種選擇
Step6 : 您可以在此選擇選單目錄的風格樣式,共有五種不同風格可以選擇(如下圖)

Step7 : 您可以在此調整「游標經過時顏色」相關配置,可以分別透過調色盤設定(如下圖)背景、文字、底線顏色

Step8 : 您可以在此調整「游標點選後顏色」相關配置,設定方式同上
Step9 : 您可以在此調整「選單顏色」相關配置,設定方式同上,但此區塊中無底線顏色
Step10 : 您可以在此調整選單高度,除了預設的選項以為,也能夠自訂輸入您想要的數字(如下圖)

Step11 : 您可以在此調整選單的不透明度,百分比越低代表越透明
Step12 : 您可以在此調整選單的圖示大小,分別有小、中、大供選擇(如下圖),選單圖示相關設定請見

Step13 : 您可以在此調整選單的文字字型
Step14 : 您可以在此調整主選單的文字大小
Step15 : 您可以在此調整子選單的文字大小
Step16 : 您可以在此選擇手機版的選單是否顯示商店 LOGO
Step17 : 您可以在此選擇手機版選單的對齊方式,分別有置左、置中兩種選擇
Step18 : 您可以在此選擇手機版是否也要顯示和電腦版一致的圖示
Step19 : 您可以在此選擇手機版選單出現形式,共有滿版彈窗、側邊抽屜、下方抽屜三種選擇(如下圖)

Step20 : 您可以在此調整手機版選單背景顏色
Step21 : 您可以在此調整手機版選單文字顏色
選單顯示icon小圖示
Step1 : 點選選單按鈕將使用圖示開啟
Step2 : 選擇Icon顯示位置

Step3 : 選擇圖示,或您可自行上傳Icon圖示,完成後範例如下圖icon顯示

編輯子選單樣式
Step1 : 點選要編輯的選單

Step2 : 點選要編輯的子選單

您將會看到子選單樣式的選單,點擊後可以看到下拉選單、大型選單、大型選單+圖片、大型選單+商品列表四種選擇!

預設即下拉選單,請參考下列步驟,在不同的樣式中進行設定。在每個步驟中,您都可以透過右方的預覽區塊查看實際的呈現與變化。
大型選單:當您的子選單包含多個項目以及較多層內容時,適合選用此類型

大型選單:當您的子選單包含多個項目以及較多層內容,並且希望搭配圖片時,適合選用此類型

Step1 : 在選單中選擇大型選單+圖片
Step2 : 您可以在此選擇圖片,點擊並從媒體櫃中選擇您想要的圖片後,可以針對替代文字、連結等進行詳細設定(如下圖)

Step3 : 您可以在此選擇圖片比例,共有正方形、直式、橫式三種選擇(如下圖)

Step4 : 您可以在此選擇圖片上是否要有標題文字
Step5 : 若在 Step4 中您選擇開啟,則可在此輸入您想要的文字
Step6 : 若在 Step4 中您選擇開啟,則可在此選擇文字大小
Step7 : 若在 Step4 中您選擇開啟,則可在此選擇文字是否要粗體
Step8 : 您可以在此選擇圖片上是否要有按鈕
Step9 : 若在 Step8 中您選擇開啟,則可在此輸入您想要的按鈕文字
Step10 : 若在 Step8 中您選擇開啟,則可在此選擇按鈕文字大小
Step11、12 : 您可以在此選擇圖片文字與按鈕的文字顏色與位置(如下圖)

Step13 : 點擊後您可以在此選擇同樣的樣式設定也要批次套用到其他哪些選單(如下圖)

大型選單:當您的子選單包含多個項目以及較多層內容,並且希望搭配商品販售時,適合選用此類型

Step14 : 您可以在此選擇想顯示的商品
Step15 : 您可以在此選擇商品圖片比例,共有正方形、直式、橫式三種選擇(如下圖)

Step16 : 您可以在此選擇商品的排列方式,共有垂直與水平兩種選擇(如下圖)

