前面分別用了2個回合去完成心態上的心理設置和網店內部基本設定,今編終於來到了重點,正式把你的寶貝上架之前,店鋪也得先修飾一番吧!重溫文章:第一回 【想開網店卻因為自己是電腦白痴而卻步了?】第二回【開網店的內部設置|Woocommerce】第四回【電腦白痴開網店-最終章|貨品上架】佈景主題我們回到Wordpress 的控制台,左邊點選「外掛」>「佈景主題」。大家可以在這裡找到符合個人喜好的主題甚至模版,有免費的有付費的,而店舖營運途中也可隨時更換,但由於更換主題可能牽涉內裡程式是否支援和相容的問題,有機會在更改後某些項目需要重新設置,為免出錯後不能靠自己能力逆轉,我還沒有更改任何主題的膽量。我懶,我不懂,我電腦白痴。所以就選了免費的主題模版最簡單不過。之前用過付費的,今次就用一個網上很多用家推薦,又多元化的主題來做演示。好,在「佈景主題」右上角輸入「oceanwp」>「安裝」,點選「Begin installing plugin」。 然後會彈出需要安裝的外掛,把全部剔選然後安裝。 安裝完成會出現提示,根據指示回到控制台。 ^點選「Run the Setup Wizard」見到Welcome 海豚後就可以點選「Get Started」開始今日重點行程,安裝主題模版。 進入頁面,切合網店用途,選「eCommerce」,內裡只有幾個免費模版,確實不多,但老實說我覺得已經足夠你玩個夠。不然你先試用看看,有需要再進階付費。 我自己的網店用「store」做模版,雖說是模版,但經個人風格調整後仍然是獨一無二的,可以放心照用。 ^「Select」後在下面按「Install Demo」。接下來你會見到版面出現一列表的外掛安裝要求,以最基本來說,把「Install Now」全選就是了,其他「Get This Addon」是要付費的。 ^當全部安裝完成,按鈕轉為「Active」後就可點選下方的「Import」等待約5~10分鐘完成程序。登 登 登 凳~主題模版建立已完成,你的網店有它的軀殼了! 來看一下,你的商店現在有預設的商品、分類、標誌等等(模版的壞處就是要慢慢把不是自己的東西Delete 掉,但對新手來說,有預設項目有助你在作任何裝飾轉換時都能有「現成」的做比對。)左邊是你的網店調色盤,右邊可以同步看到大部份更改後的轉變。到這邊,相信你對自己理想的網店有大慨的規劃、主題顏色和風格慨念,接下來介紹一下不同設置版面,大家都熟習一下好好把你的理想投放進去,盡情設計你的網店吧!~GO!GO!GO!網站身分網站標題和標語都可忽略,因為當你上載商店logo 後就會把文字擋住,所以這邊就不要費神了。 選單選單功能就像貨架,你要把商品分門別類讓客戶容易搜尋,就得先把同類商品擺放在同一貨架,所以這個部份是有點複雜。選單位置大致分幾個部份,「Top Bar」(紅框:網頁最頂最頂位置),「Main」(藍框:主要目錄),「Footer」(網頁拉到最底位置,通常是擺放一些不常用但又不可或缺的資訊例如是購買需知,私隱條款等),還有一個「Mobile」(這個是我最放時間的選單位置,因為手機或平板或電腦所題示的網頁均有位置上和操作上的出入,而現代人都滑手機為主,所以要花多點時間分享,後面會再講) 以現有主題為參考,網頁拉到最底的選單在網頁上顯示模樣 首頁設定是否覺得有點面熟?對,就是上回提過更改訪問登陸的首頁,這邊可以更改,Wordpress 控制台都可以。 小工具同樣地小工具可以在自訂版面操作,或在Wordpress 控制台操作。後面會再講。 General Options Styling主要用以更改顏色 Settings基本上不知明的數字我沒有更改,但由於我不需要Sidebar,而網上有說全畫面最好的數字是什麼,所以如果你沒idea,照我的設定就好了,有時間的時候再慢慢調節一下,看看版面有什麼變化。點擊圖片放大 Page Title我直接Hidden 了,因為不同主題好像有不同顯示方式,但我有自己Logo 了,所以就不用主題了。 Scroll To Top即網頁一直向下滑時,當你想回到最頂的快捷鍵。這裡可以調教你希望它顯示的位置,顏色,大小,符號模樣。可更改為你網頁的主題顏色去滿足一致性。點擊圖片放大 Typography這裡是用來設定不同版面的標題、內文、商品描述、價格等等的字型。H1,2,3,4...代表主題(Heading),我就不逐個解釋了,我自己比較懶,字型選擇又太多,所以我直接將大部份字型設定為一樣~哈哈 Top Bar較早前有提過,Top Bar 是網頁最頂顯示位,也可以在「General」選擇隱藏,設定文字顏色。 Content好像我賣酒的,有固定信息需要明確顯示,我就在Top Bar 欄位輸入政府的呼籲及警告字眼。 Social除了網店,如果你有其他社交媒體連結亦可加在Top Bar。 HeaderGeneral 和 Header Media 我都沒有加,因為我不懂。Logo直接從你的媒體庫抽出來就可以了。如果想調節相片大小比例,可回到媒體庫,在相片下按編輯是可以修改的,在上一篇文章也有分享過。Menu除了顏色我什麼都沒改動。Mobile Menu就是我早前提到的手機用選單,這裡不是設定選單內容,而是設計選單的模樣。Elements Positioning 設計購物車/ 選單/ 店鋪Logo 在手機上時怎樣排序顯示。 Mobile Menu Style手機版面顯示有限,你希望客戶點按選單時呈現的狀態,一按下拉選項?全屏幕地顯示目錄?...自己試試那個體驗較舒服吧。 溫馨提示:在設定手機瀏覽版面時,可點選左下角手機圖樣,以更改為模擬手機版同步,但由於每個用者手機屏幕大小不同,這個模擬只作參考,我自己會用另一手機去做實測。Hamburger Icon Class及Custom Hamburger Button 都是需要自己逐個點擊體驗,這個純粹是客戶點按關閉選單時的輕微花巧更改,例如「X」轉動方向/閃爍等等,我逐個試過認為分別不大,也沒什麼驚喜值得花時間去設計~ 而滑到最低是更改選單顏色,同樣地,我是比較建議切合網頁主題一致性的。Blog這個我沒有做任何更改,因為我還未發佈過文章,所以也暫時不花時間去設計了。Woocommerce上面的設置可說是在粉飾你的店面,而這個部份是真正設計你的貨架。當客人瀏覽你的商店時,映入眼簾就是你在這裡的設置。 商店通知此欄位所輸入的內容會出現在訪客瀏覽網頁時的最下方,通常用以顯示一些希望訪客一到網站就留意到的信息,例如是限時優惠/ 促銷推廣/ 突發資訊等等。General我只更改了如有「On Sale」商品時的顯示方式,選擇只有2個,「方」或「圓」,和你想以「特價」字眼顯示或「減%」顯示。 Menu Cart更改購物車模樣,按鈕顏色,購物車圖像大小等等。Archives更改商品顯示的版面:直接顯示所有商品/ 只顯示分類(讓客戶點入分類後才看到其他商品)/ 同時顯示所有商品及分類。 ^Layout因為我沒有設定sidebar,所以所有頁面我都設定為Full Width。Shop Post Per Page & Columns設定每行每頁顯示商品的數量。由於我主要客群以手機瀏覽為主,為了讓訪客在有限大小屏幕上有更好瀏覽體驗,我把每行設為2個商品,每頁24個。 Elements Positioning系統預設了在商店頁面每頁商品下的描述項目,但為了不讓畫面太多資訊感覺混亂,我剔除了Category(分類)和Add to Cart Button,按住右邊三橫可上下移動排序。其實顯示購物車按鈕能讓顧客更方便把商品加入購物車,但我略嫌觀感不好所以就剔除了。 Shop Conditional設定你是否要求顧客必需登入後才顯示商品價格和加入購物車,但這個行為是有礙客戶瀏覽的,我不建議。 Single ProductLayout 我還是用Full Width。 Elements Positioning因為這個部份是顯示客人點入單一商品時的內容,所以也可以盡量詳盡。 Up-Sells & Related Items 可以酌量加3,5個。大家網購都應該很有經驗,在下單前出現相關推薦商品,往往讓你忍不住買更多。記住,不是等顧客有需要才來找你買,事實上是你要為他們建立需要! (下一項「Cart 」同樣可設定Cross-sell 項目,目的都一樣的喇~)Check Out這個版面會在顧客下單時出現,同時需要登入系統(已設定了在下單時可同時建立賬戶,以免客戶有下單衝動時要先跳頁登記會員然後再重返下單頁面)。 ^公司名稱電話地址均可選擇「隱藏/ 選填/ 必填」,並可勾選以「*」號標示必填欄位讓用家一目了然。私人政策和條款上回已讓你好好預備了相關頁面,這裡揀選你的適合頁面就可以了。 Advanced Styling這個部份真的不解釋了,點進去是細分每一項的調色更改而已,你就按你喜好去做做吧。商品圖片預設每張圖片上載的大小和比例。離開Woocommerce 設定,回到主控制台。 Footer Widgets調整網頁最底部份那個區塊例如顏色。Footer Bottom網頁真正最底最底的一小行,通常是顯示版權擁有all rights reserved 這句。Custom CSS/JS真心不懂,按入去一堆程式碼,如果跟我一樣是白痴,千萬不要亂踫!Product Sharing用以在你的某商品下增添分享路徑。好吧!整個自訂部份的基本設置已盡我所能地講了一遍,有時間的可慢慢再深入探索一下,反正大部份更改都能實時呈現,不妨按個人的主題性慢慢調節。下回我會分享如何設定商品分類,加入優惠劵和比較繁複的選單設置小心得,要留意啊!~最近被某些事情耽誤了寫文進度,我會加緊努力盡快完成=='希望下回能帶大家順利開業!重溫文章:第一回 【想開網店卻因為自己是電腦白痴而卻步了?】第二回【開網店的內部設置|Woocommerce】第四回【電腦白痴開網店-最終章|貨品上架】聯繫我My ighttp://www.instagram.com/Keung_hoi_manMy FBhttps://www.facebook.com/keunghoimanMy UBloghttps://blog.ulifestyle.com.hk/blogger/hoimankeungMy Online Shophttps://thebrewbuddies.com