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 等等的大平台。 也建議不要挑戰太另類花巧的設計，因為用戶大多已習慣某種功能的用法，突然有太新的設計反而會阻礙他們的使用體驗呢。
