Sorry, this content is only available in 繁體中文 and American English. For the sake of viewer convenience, the content is shown below in this site default language. You may click one of the links to switch the site language to another available language.

在上一篇「第一課、網路開店穩定獲利 3 關鍵」中,我們介紹成功賣家業績不斷成長、獲利的重要心法。在這個章節,你將學到如何快速製作官網首頁,打造你的購物官網門面!

  1. 官網首頁版型:不用寫程式,滑鼠拖拉就搞定!
  2. 設定排程:時間到,圖片自動上下架

以下介紹如何製作官網首頁版型,都可以在手機上完美呈現喔!

一、購物官網版型第一步:設定主視覺版型

「品牌導覽」就是顧客進來你的購物官網後第一眼看到的畫面,包含:品牌 logo、主視覺大圖,以及導覽列選單。

要讓顧客留在你的官網,主視覺大圖很重要!因此主視覺大圖要定期更新,展示主打商品、最新優惠。以下是 91APP 合作店家,也是台灣品牌女裝名店SO NICE的購物官網主視覺,用簡約典雅的圖片吸引一樣喜愛時尚的顧客。

91APP人氣網路商店 SO NICE 購物官網首頁

(圖片來源:SO NICE 官網)

另一個 91APP 合作店家,風格選品店 BearBoss|熊老闆,在主視覺輪播推廣雙十二優惠,用圖片拼接的設計展示男女皆宜的實用電腦包。

91APP人氣網路商店 熊老闆 BearBoss 購物官網首頁

(圖片來源:BearBoss 熊老闆官網)

在放上大圖視覺之前,需要在後台選擇你要的視覺版型架構。操作如下圖,在【選擇品牌導覽】選擇【全幅風格】,點選【加入】。

選擇網路商店首頁主視覺版型設計(91APP 後台操作示範)

接下來,照著【品牌導覽】欄位的指引,一步步完成 header、輪播、文字選單、懸浮工具的設定。

完成 header、輪播、文字選單、懸浮工具(91APP 後台操作示範)

你也可以自由選擇購物車圖示的顏色。通常購物車圖示的顏色會和品牌 logo 的主視覺一樣。如同下面熊老闆的官網,從 logo 到右側購物車圖示都是一致的深藍色。

91APP 人氣店家熊老闆 BearBoss 購物官網導覽列

二、秀出你的主打優惠:輪播大圖

購物官網最上方的主視覺可以用輪播展示多張大圖,顯示店家的多種優惠、商品線。每張大圖可以連到不同的商品頁,達到導購效果。

設定購物官網輪播大圖順序(91APP 後台操作示範)

在右上【設定數量】的選單,你可以選擇輪播圖數量(最多可以有8張輪播),也可以拖曳來調整上下順序,順序愈上方代表輪播的順序愈前。

三、讓商品更好找:文字選單導覽列

官網首頁上方的文字選單導覽列可以幫助客人瀏覽,也可以讓客人第一眼就找到當季新品、活動。

如下圖 91APP 合作商家 Norns的購物官網文字選單列出了【商品分類】、【最新活動】、【聖誕禮物推薦】、【門市資訊】…等,讓訪客忍不住每個都點進去逛逛。

91APP 人氣商店 Norns 購物官網導覽列

在後台,你可以在【自訂選單】設定選單的數量、用拖拉的方式排順序,讓你的每個選項能連結到不同的頁面導流導購。

設定購物官網導覽列(91APP 後台操作示範)

四、版型靈活變化

當顧客看完首頁輪播後,會往下滑看更多商品。店家可以用 91APP 提供的多種版型自由排列組合,做成豐富的首頁:

你可以用輪播 + 四張小圖,展示主打商品,讓客人馬上加入購物車。(圖片來源:BearBoss 熊老闆官網)

91APP 人氣商店熊老闆 BearBoss 購物官網版型(圖片輪播與人氣商品模組)

也可以加入影音,讓模特兒、網紅為你展示商品,更加吸引人。(圖片來源:Qmomo官網)

91APP 人氣商店 Qmomo 購物官網首頁(影音與部落格模組)

或是設定優惠倒數,讓心動的顧客馬上行動。

購物官網首頁促銷活動倒數計時功能(91APP 後台操作示範)

除了以上舉例,還有更多版型模組,你都可以用點選的方式馬上加入、用滑鼠拖拉排定先後順序,並且隨時切換電腦、手機模式預覽效果。

滑鼠拖拉調整購物官網版型順序(91APP 後台操作示範)

下一課:讓官網圖片自動上下架!

恭喜你,完成了第一個購物官網首頁!你可以儲存為草稿,或是點選【發佈】,馬上讓首頁換新裝。

在下一篇「設定排程 讓圖片自動上下架」,你將會學到如何讓首頁圖片在預定的時間自動變換,讓老闆和小編不用熬夜換圖片,後台自動上檔最新活動!

回到【網路開店新手 8 堂課】
進入網路開店新手8堂課
諮詢網路開店顧問