商品分類及分類廣告版位設定
最後更新 2024-05-08

商品設定主要有兩個步驟,第一步為「商品分類」選單設定,第二步驟則為「商品」設定。「商品分類」選單就如同實體商店的分類層架,可以讓消費者快速找到商品放置位置,並選購需要的商品。


這篇文章將說明「商品分類」設定的部分,點選下方連結就可以到達指定段落囉!

1.新增分類及分類基本設定

1-1.後台商品分類排序

1-2.商店前台選單顯示排序

1-3.上方選單樣式設定

1-3-1.主選單設定

1-3-2.子選單設定

1-3-3.選單固定效果

1-4.左側選單樣式設定

2.分類廣告版位設定

2-1.分類廣告輪播

2-2.分類廣告文字編輯器

 

 

 

1.新增分類及分類基本設定

 

商品分類的設定位置在後台「商品登錄」的「商品分類」

「商品登錄」→「商品分類」

 

點選右方「+ 新增分類」,新增的商品分類會顯示在最下方

點選右方按鈕新增分類

分類名稱會顯示在商店的選單中,方便顧客快速找到需要的商品。

輸入商品分類名稱

 

分類 SEO

【 SEO 標題名稱】➜ 即為" HTML head title "欄位,為此分類頁名稱(若未設定 SEO 標題名稱,預設為分類名稱資訊)

【 SEO 描述】➜ 即為" Meta Description "欄位,可為此分類頁設定簡短說明,建議不超過75個中文字、描述內可包含1-2次關鍵字,不超過3組關鍵詞。

【 SEO 關鍵字】➜ 即為" Meta Keywords "欄位,請以半形逗號分隔,例如:「網路開店,開店平台,網路商店,WACA開店」,建議文字數量不超過85個中文字,不超過10組關鍵詞。

※ 各欄位詳細說明請點擊紅色小問號查看。 

 

如果對於 SEO 沒有概念或靈感,也可以透過「AI 助手」快速生成文案。

分類SEO欄位說明請點擊紅色小問號內查看

 

 

1-1.後台商品分類排序

新增後,可以按著前面的 WACA網路開店-新增分類 ,用拖曳的方式改變排序

分類可使用拖曳方式調整順序

如果需要新增子分類,也就是第二層分類,同樣可以按著 WACA網路開店-子群組,將它移到第一層大分類底下即可

分類拖曳到主分類下方會以第二層分類呈現

完成商品分類排序後,後台編輯商品頁面的商品分類設定欄位會依照商品分類排序

商品登錄的編輯商品頁

後台商品分類欄位會依照商品分類排序顯示

 

刪除商品分類會跳出提醒

※ 請注意:刪除分類後,該分類的商品只會顯示於「全部商品」的分類中

刪除分類商品會歸到全部分類

 

 

1-2.商店前台選單顯示排序

在商店設定→選單管理,可以設定選單顯示/隱藏與選單排序

商店設定的選單管理

 

選單設定的「左側選單」開關,主要設定在商店的商品分類頁,是否要顯示左側選單

左側選單開關

左側選單開啟

 

「選單排序」可以設定商品分類顯示在「上方選單」或「左側選單」

選單排序設定

上方選單與左方選單前台畫面

 

商品分類如果有設定第二層子分類,當第一層大分類「左方選單」隱藏時,第二層分類也不會在商店前台顯示。

第一層大分類「左方選單」隱藏時,第二層分類也不會在商店前台顯示

 

滑鼠點擊左側「↓↑」不放,拖曳商品分類進行排序,可以調整第一層分類選單在商店前台的顯示排序

選單排序設定

 

第二層子分類的排序,須在商品登錄的「商品分類」中進行設定。

請按著前面的 WACA網路開店-新增分類 ,用拖曳的方式改變第二層分類的排序,排序會連動顯示在選單設定及商店前台。

 

第二層分類可使用拖曳方式調整順序

 

 

1-3.上方選單樣式設定

上方選單樣式的設定位置在「商店佈景」中

進入商店佈景

 

請至商店佈景→全域設定→HD頁首元件中選擇

  • Silver版本:HD01、HD02、HD06(不顯示選單)

  • Gold版本(有子選單):HD03、HD04

網路商店HD頁首元件

 

 

 

 

1-3-1.主選單設定

頁首元件選用HD01、HD02、HD03、HD04,會出現上方選單

上方選單出現

 

欲修改上方選單的樣式,請至該頁首元件的「元件設定」→「桌機選單管理」中調整

此處可以設定商店主選單在桌機畫面呈現的文字大小及顏色,左側可以即時預覽

即時預覽上方選單

 

  • 主選單文字大小:可選擇文字為最小、小、中、大

  • 主選單文字對齊:可選擇文字靠左、置中、靠右
    主選單文字設定

  • 主選單文字顏色:文字直接呈現的顏色

  • 主選單選取顏色:有兩種時機呈現,分別為「當滑鼠移到分類上方」、「停留在特定商品頁時,頁面所屬的選單項目」會以選取顏色呈現。例如:此頁面所在位置為【男女服飾】,因此【男女服飾】會以主選單選取顏色呈現
    主選單顏色設定


    在選擇顏色時,可以拖曳滑桿選取,或是輸入色號
    選取顏色方式

  • 主選單背景顏色:為選單背景的顏色,若想移除背景顏色,可以移動滑桿至最左,透明度調為0
    主選單背景顏色

 

 

 

1-3-2.子選單設定

選擇頁首元件 HD03、HD04 有收合子選單的功能,當滑鼠移到「下拉選單符號」上方時,可以顯示子選單

出現子選單

 

主選單建議以「一列」選單呈現,為最佳顯示效果,若為一列以上時,第二列主選單會在第一列子選單展開時被遮蔽

第二列主選單會在第一列子選單展開時被遮蔽

 

其中,HD03只會出現系統預設10個選單,超過10個選單時,須點擊查看選單項目,來查看剩餘選單項目

HD03只會出現系統預設10個選單

 

 

欲修改子選單的樣式,請至該頁首元件的「元件設定」→「桌機選單管理」中調整

  • 子選單文字大小:可選擇文字為最小、小、中、大

  • 子選單文字顏色:文字直接呈現的顏色

  • 子選單選取顏色:有兩種時機呈現,分別為「當滑鼠移到分類上方」、「停留在特定商品頁時,頁面所屬的選單項目」會以選取顏色呈現。
    例如:此頁面為【男女服飾】中的女士頁面,因此「女士」會以子選單選取顏色呈現。

  • 子選單背景顏色:子選單背景顯示的顏色
    子選單樣式設定

 

 

 

1-3-3.選單固定效果

選擇頁首元件 HD03、HD04 有「選單固定效果」功能,讓消費者瀏覽網站頁面時,方便切換選單,請於預覽時查看效果呈現喔

選單固定效果

  釘選頂端 上滑時釘選頂端說明
文字說明 釘選頂端 上滑時釘選頂端
效果說明 不論下滑到哪個頁面,選單皆會釘選於畫面頂端

上滑瀏覽時,選單會出現在畫面頂端

前台畫面呈現 釘選頂端畫面呈現 上滑時釘選頂端畫面呈現

 

 

 

 

 

 

 

1-4.左側選單樣式設定

「左側選單」的樣式呈現顏色,請至商店佈景→全域設定→PD商品分類頁中

後台進入商店佈景

 

選完商品分類頁的元件(PD01、PD02、PD03、PD04)後

選擇商品分類元件

 

在該元件設定的樣式管理→左側選單中,修改選取與未選取顏色,最後點選右下角「套用」

商品分類頁元件樣式設定

 

 

 

2.分類廣告版位設定

點選「編輯」,即可編輯「分類名稱」以及「分類廣告版位設定」

點選編輯設定分類廣告版位設定

 

分類廣告版位有「分類廣告輪播」及「分類廣告文字編輯器」兩種,勾選即可進入設定

分類廣告版位有「分類廣告輪播」及「分類廣告文字編輯器」兩種,勾選即可進入設定

 

 

2-1.分類廣告輪播

分類廣告輪播點擊切換按鈕,可以選擇放置「圖片」或「影片」,最多可放置 10 則廣告。

 

插入圖片的方式有兩種

  1. 先將圖片上傳到網路圖床,在圖片上方點擊右鍵「複製圖片網址」,會取得帶有圖片檔名結尾(.jpg、.png、.gif)的網址,將網址貼上,再點擊「新增圖片」。
  2. 點擊「圖片上傳」,從個人裝置選擇要上傳的圖片。 

完成上傳,預覽圖下方可以放置圖片超連結,點擊圖片即可到達指定網頁。

 

請留意圖片上傳限制

  • 建議上傳寬高: 895px * 高不限 之圖片
  • 支援上傳格式:JPG、PNG、GIF
  • 最大可上傳:2MB

分類廣告輪播可輸入圖片網址並顯示預覽圖片

 

如有購買 FunTo 雲端圖床的商家夥伴,也可以批次插入圖片

使用Funto雲端圖床,可使用圖片直接上傳圖片

 

插入影片時,影片須先上傳到 Youtube,再取得 Youtube 影片連結,新增影片。

點選「新增」後,會於下方呈現影片預覽圖。

插入影片請輸入youtube影片連結,下方會顯示預覽影片

 

前台此版位會依照設定的順序由左而右開始輪播,若新增多個廣告,點住圖片不放,左右拖曳即可更改輪播順序。 (單一廣告則不會輪播)

拖曳可調整順序

 

 

2-2.分類廣告文字編輯器

分類廣告文字編輯器是使用 HTML 編輯器,可自行輸入文字、插入圖片或影片。

👉 如何使用 HTML 編輯器

 

HTML編輯器可自行輸入文字、插入圖片或影片

 

以拖曳的方式可以設定版位在分類頁中顯示的順序,設定完成記得按下「儲存」。

於前台進入該分類,即會看見所設定的廣告版位喔!

拖曳箭頭可以調整輪播廣告和文字編輯器的呈現位置

 

完成商品分類後,接著就可以開始設定商品,並將商品一一放入所屬的分類中,上架販售囉!

 

 

https://waca.teachable.com/