Shopify網店設計模板系列一:如何挑選合適的網店模板,不要忽略手機版體驗
用Shopify建立網店很方便沒錯,它提供了很多網店模板選擇,只需要一鍵安裝模板,再上架產品,基本上網店就成了。挑選模板有那麼難嗎?不就挑一個自己喜歡的就好了?因為魔鬼在細節!網店開了一年就換了三次模板,免費和付費的模板我都有用過,這篇是我與模板搏鬥時的踩過不少地雷而總括出來的心得,還很佛心與大家分享cheat sheet(都拿去用吧~)。與大家分享的同時,也用來提醒自己將來再換模板的時候要注意的事。

我的分享有四大重點,適合打算用Shopify做網店、或想更換模板的朋友。
【Shopify網店設計】如何挑選合適的模板
- 挑選合適的模板(一):請再三測試模板的手機版體驗
- 挑選合適的模板(二):使用OS2.0的模板,不會編程都可以設計到簡單的頁面
- 挑選合適的模板(三):模板應該有的六大功能
- 挑選合適的模板(四):5大Shopify免費模板點評
相信我,花時間挑選對的網店模板,絕對能夠幫你在以後省錢省時間。
最近我就是要為在網店上加一個很小的功能而煩惱,因為我的模板沒有提供這個功能,然後就要含淚付費裝小程式😭 但那個功能明明就是很基本啊!
挑選合適的模板(一):請再三測試模板的手機版體驗
這是很容易忽略的點,因為你通常會用電腦去建立Shopify網站,所以很常會忘記檢查手機版的體驗。
雖然就是老掉牙的數據,但我必需要說:70%以上的人都是用上手機瀏覽網站的。我的網店8成以上都是用手機瀏覽的用戶。
所以有些時候,我甚至會無視桌面版體驗,只要手機版順暢就好了。(不要學我)
其實大部分的Shopify模版都是手機友善的,但魔鬼在細節,有些細位不同的模版處理的手法都不一樣。
在挑選模板的時候,請務必將細節都試清楚,確定模板的手機版體驗符合設想呢!
如何檢查手機版用戶體驗
在查看demo store的時候,就可以選擇以手機模式檢視範本網店,可以作基本的檢查。
當你喜歡該模版時,我會建議你直接安裝模板,然後到後台將細位一一檢查清楚。
此外,安裝了模板可以獲得preview link,直接在手機上打開模板,就可以進一步體驗了。要知道用滑鼠點擊和用手指觸控的體驗始終是有分別的。
我會建議你將整個購物流程都在手機上試一次,看看有沒有奇怪的地方。
1. 購物車體驗:從首頁加產品到購物車
在解說之前,先要解釋一個概念:Ajax cart。
每個網店模板都一定有購物車,但不一定有Ajax cart。
Ajax cart的意思是指當客人將貨品加到購物車,不用更新頁面,購物車就會自動更新,網頁亦即時有回饋,讓購物體驗更順暢。
其實90%的模版都有提供Ajax cart。所以我以下的解說會基於模板有提供Ajax cart這個假設之上。
不同模版對於Ajax cart在手機上的處理都不一樣。
例如免費模版Crave會向下滑出Ajax cart,但只會顯示客人剛加到購物車的貨品。
而免費模板Fresh則用向右滑出,將整個購物車的內容都顯示出來。

你更喜歡哪種體驗?
A:Theme Crave
B:Theme Fresh
2. 搜尋器體驗:用搜尋器搜索找心儀產品
1. 搜尋器在頁面哪裡,容易找到嗎?
2. 搜尋結果不太差嗎?(試輸入英文和中文的關鍵字)
搜尋是在網店很常見的用戶行為,若能夠提供準確的搜尋內容,能幫助你轉換更多生意。
這邊要留意的是在手機版搜尋器被放到哪裡去。
例如付費模版Pipeline將搜尋器收在menu內。如果你希望將客人的注意力放在頁面,沒有其他東西分散他的注意力,這個是不錯的做法。
而免費模版Crave則是將搜尋器放在header上,讓客人隨時隨地都能夠進行搜索。

你更喜歡哪種體驗?
A: Theme Pipeline
B:Theme Crave
另外如果你已經上載了好幾款產品,也建議順道輸入中文和英文關鍵字,檢查一下搜索結果是否準確。
3. Menu體驗:打開菜單,到不同的頁面
1. Menu在手機版如何呈現,與一般的購物網店相類似嗎?
2. Menu如何呈現兩層以上的頁面?
大多的模板在桌面版會將Menu項目一字排開,在手機版的時候則會收起來。
常見的做法是用漢堡包menu(三條線),然後向左或右或下滑出。
同時也要檢查一下兩層、甚至是三層的menu在手機版的呈現。
我的店剛開始的時候貨品種類沒有很多,menu基本上就一層。但當要支援愈來愈多的產品種類時,就要開發第二層的menu。然後就發現不同模版的處理方法都不一樣。
例如免費模版Crave是用下一頁的形式。
而付費模板Motion則用向下伸展的形式,個人比較愛好就樣的做法,因為客人能夠持續地看到所有分類。

當然,如果你想要更好的menu體驗,你可以安裝menu designer。但要付錢的事,小資店主還是先將錢收好,挑選一個合適的模板就可以了。
4. 在後台上載首頁橫額,檢查在手機版橫額如何呈現
首頁橫額大概是一間網店最重要的宣傳位置,會影響客戶對你的店的第一印象。
最理想的,是模版可以讓你分別上載桌面版和手機版的專屬橫額設計。那麼你就可以按頁面大小做最好的圖。
例如我以往用過付費模版Expanse,就是有提供這樣的選項。用Expanse的時候,我會為桌面版和手機版分別設計橫額。

但其實大部分的模版都沒有提供這樣的選項。這個時候,你要檢查模版如何在手機版呈現橫額。
免費模版Crave的做法:保留橫額圖片的闊度和比例,縮短圖片高度 這個做法讓橫額在手機版變得不吸睛,圖片偏細。但完整保留了設計。
免費模版Crave的做法:保留圖片高度,割走兩邊的設計。 這個做法確保橫額在手機版上有一定大小,但設計變得不完整,或在設計橫額時必須考慮手機版的呈現。
結語
希望你看完這篇文章,會更留意網店的手機版體驗,也能夠幫你為網店挑選合適的模版!
我也能夠想像看完這篇文章的你,可能會問哪如何判斷用戶體驗的好與壞? 用戶體驗沒有考卷般的標準答案。以新手來說,最簡單的指標就是回想你平時的網購經驗,判斷這個模板的體驗是否接近 HKTVMall、Pinkoi、Amazon 等等的大平台。 也建議不要挑戰太另類花巧的設計,因為用戶大多已習慣某種功能的用法,突然有太新的設計反而會阻礙他們的使用體驗呢。