Shopify網店設計模板系列一:如何挑選合適的網店模板,不要忽略手機版體驗

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

Shopify網店設計模板系列一:如何挑選合適的網店模板,不要忽略手機版體驗

我的分享有四大重點,適合打算用Shopify做網店、或想更換模板的朋友。

【Shopify網店設計】如何挑選合適的模板

  1. 挑選合適的模板(一):請再三測試模板的手機版體驗
  2. 挑選合適的模板(二):使用OS2.0的模板,不會編程都可以設計到簡單的頁面
  3. 挑選合適的模板(三):模板應該有的六大功能
  4. 挑選合適的模板(四):5大Shopify免費模板點評

相信我,花時間挑選對的網店模板,絕對能夠幫你在以後省錢省時間。

最近我就是要為在網店上加一個很小的功能而煩惱,因為我的模板沒有提供這個功能,然後就要含淚付費裝小程式😭 但那個功能明明就是很基本啊!


挑選合適的模板(一):請再三測試模板的手機版體驗

這是很容易忽略的點,因為你通常會用電腦去建立Shopify網站,所以很常會忘記檢查手機版的體驗。

雖然就是老掉牙的數據,但我必需要說:70%以上的人都是用上手機瀏覽網站的。我的網店8成以上都是用手機瀏覽的用戶。

所以有些時候,我甚至會無視桌面版體驗,只要手機版順暢就好了。(不要學我)

其實大部分的Shopify模版都是手機友善的,但魔鬼在細節,有些細位不同的模版處理的手法都不一樣。

在挑選模板的時候,請務必將細節都試清楚,確定模板的手機版體驗符合設想呢!

如何檢查手機版用戶體驗

在查看demo store的時候,就可以選擇以手機模式檢視範本網店,可以作基本的檢查。

當你喜歡該模版時,我會建議你直接安裝模板,然後到後台將細位一一檢查清楚。

此外,安裝了模板可以獲得preview link,直接在手機上打開模板,就可以進一步體驗了。要知道用滑鼠點擊和用手指觸控的體驗始終是有分別的。

我會建議你將整個購物流程都在手機上試一次,看看有沒有奇怪的地方。

1. 購物車體驗:從首頁加產品到購物車

🔍
要檢查的細節: Ajax Cart在手機版如何呈現?
檢查流程: 在頁面選擇一個產品,進入產品介紹頁,加產品到購物車。

在解說之前,先要解釋一個概念: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則用向下伸展的形式,個人比較愛好就樣的做法,因為客人能夠持續地看到所有分類。

shopify-cart (1).gif

當然,如果你想要更好的menu體驗,你可以安裝menu designer。但要付錢的事,小資店主還是先將錢收好,挑選一個合適的模板就可以了。

4. 在後台上載首頁橫額,檢查在手機版橫額如何呈現

🔍
橫額在網頁版和手機版的呈現有什麼不一樣?在手機版的呈現理想嗎?
檢查流程: 同時打開網頁版和手機版,檢查橫額如何顯示。

首頁橫額大概是一間網店最重要的宣傳位置,會影響客戶對你的店的第一印象。

最理想的,是模版可以讓你分別上載桌面版和手機版的專屬橫額設計。那麼你就可以按頁面大小做最好的圖。

例如我以往用過付費模版Expanse,就是有提供這樣的選項。用Expanse的時候,我會為桌面版和手機版分別設計橫額。

shopify-cart.jpg

但其實大部分的模版都沒有提供這樣的選項。這個時候,你要檢查模版如何在手機版呈現橫額。

免費模版Crave的做法:保留橫額圖片的闊度和比例,縮短圖片高度 這個做法讓橫額在手機版變得不吸睛,圖片偏細。但完整保留了設計。

免費模版Crave的做法:保留圖片高度,割走兩邊的設計。 這個做法確保橫額在手機版上有一定大小,但設計變得不完整,或在設計橫額時必須考慮手機版的呈現。

結語

希望你看完這篇文章,會更留意網店的手機版體驗,也能夠幫你為網店挑選合適的模版!

我也能夠想像看完這篇文章的你,可能會問哪如何判斷用戶體驗的好與壞? 用戶體驗沒有考卷般的標準答案。以新手來說,最簡單的指標就是回想你平時的網購經驗,判斷這個模板的體驗是否接近 HKTVMall、Pinkoi、Amazon 等等的大平台。 也建議不要挑戰太另類花巧的設計,因為用戶大多已習慣某種功能的用法,突然有太新的設計反而會阻礙他們的使用體驗呢。