在設計你的 Shopify 網路商店時，應該以消費者的購買歷程去考量並設計每一個頁面，務必讓消費者的購買體驗是流暢的，以下區分不同的頁面，一一列舉需要注意的點，以及該如何優化你的每一個頁面。
首頁 Homepage
消費者通常是透過社群媒體或是廣告而認識你的品牌，進而與你的品牌產生興趣或是建立信任，並來到你的網站，而首頁通常是所有消費者來到網站第一個造訪的頁面，它是品牌的門面，代表了整個品牌的形象，同時也是消費者來到你的網站時，對你的品牌的第一印象，必須要能讓消費者一目瞭然的了解你的品牌或是產品。
以下把首頁簡單區分成幾個部分，一一探討每個部分的功用。
-
Announcement bar
不管消費者在瀏覽哪個頁面都可以看到這個區塊，通常會放一些重要的行銷訊息或是簡單的公告文字，例如：全館免運中。 -
Header Menu
這是網站上最重要的導覽列，通常會把商品分類目錄在這裡，商品分類務必讓人一目瞭然，讓消費者可以輕鬆點擊到達他想瀏覽的商品系列或商品頁。 -
Slideshow/Banner
這通常是消費者來到你的網站後看到的第一個部分，必須要吸睛，讓消費者想要停下來瀏覽。可以放一張大 banner，也可以是多張 banner 的輪播，通常會放一些正在舉辦的活動的資訊(例如：買一送一、全館八折)，或是你的明星商品的大圖，展示該產品的細節。建議在大圖上加上按鈕，讓消費者可以點擊按鈕到達你的商品頁或是商品系列頁。另外，這個部分務必與你整個品牌和網站風格一致，以強化你的品牌形象，達成品牌一致性。 - Featured Collection
消費者在看完你的首頁大圖後，若是對你的品牌產生興趣並想進一步了解更多，通常會往下滑瀏覽更多資訊，可以在這個區塊展示多個熱賣商品或是多個商品系列，讓消費者更了解你的商品。 - Social Media
在消費者更認識你的商品後，接下來可能想知道這品牌是否可靠，可以在這個區塊嵌入你的 Instagram feed，很多品牌會在 Instagram 上分享很多 UGC 的內容與照片，比起商家自己生產的內容，UGC 的內容更受消費者的信賴，進而建立消費者對品牌的信任。此外，把 Instagram 放在這裡也可以讓潛在消費者追蹤你的品牌社群，進而使他成為品牌的粉絲。
- Footer Menu
通常會把一些重要但是消費者未必會看的資訊列在 footer menu，例如：退款政策、常見問題、關於我們，也可以把訂閱電子報放在這個區塊。
產品系列頁 Collection Page
在瀏覽過網站首頁，並想進一步瀏覽商品時，消費者通常會點擊導覽列的商品分類來到商品系列頁，在設計商品系列頁時需要注意的不多，主要以乾淨、整齊、清晰為主。
- 可以放一張 banner 圖來塑造這個商品系列的形象，讓消費者一來到這個頁面就了解這個商品系列 。
- 讓消費者選擇商品的排列順序，例如：熱賣商品優先、按照價錢低至高排列。
- 在商品圖的排列有幾點要注意
- 統一：不管是圖片的長寬比或是圖片的形式都盡量統一，在整體感受上會比較整齊好看，例如全部都放正方形的商品平拍圖，不要有的圖片長、有點圖片寬，有些是實穿照、有些是平拍圖。
- 保有留白：不要排列的過於壅擠，保有適當的留白會讓瀏覽的人視覺上較為舒服，且比較容易看到重點，通常以一行三至四個商品最佳。
- Image switching on hover：有些 theme 有支援此功能，當鼠標移至該商品圖上時，會自動換成另一張商品圖，讓消費者不用點進商品頁面即可瀏覽兩張商品圖。
更多產品系列頁資訊：https://help.shopify.com/zh-TW/manual/products/collections
商品頁 Product Page
最後，消費者來到了商品頁，這是一個網站的大重點，是消費者是否完成購物的關鍵！在商品頁，消費者會期望得到三樣資訊
-
為什麼要購買？
要清楚的說明商品特性，並凸顯商品的賣點與其他品牌的差異性，進而使消費者產生購買慾望。
-
商家是否可以信任？
由於網路商店沒有提供實體的體驗，建立消費者對商家的信任就更顯重要。商家要能在消費者瀏覽商品頁這短短的幾分鐘內，讓他們覺得這個品牌是可以信任的。
-
買了以後會得到什麼？
商品頁面是消費者認知商品的主要管道，裡面的資訊會幫助他們建構商品與購買體驗的預期，因此必須確保商品頁的資訊正確且齊全，以幫助消費者建立正確的預期。
必須要提供消費者期望得到的訊息，他們才會最終下訂單。以下針對商品頁的幾個區塊一一探討在設計時需要注意的點。
-
商品介紹的部分要完整的提供商品資訊，包含材質、尺寸等等，且強調商品特色。
▍商品圖商品圖一定要夠清晰、畫素夠高，如果可以讓消費者局部放大檢視圖片的話更好。 建議至少放三至五張清晰的圖，可以是不同角度的圖，又或者是幾張平拍圖搭配幾張實穿照，讓消費者更清楚地瞭解商品，以減少收到商品後期望與實際的落差。此外，如果商品有多種顏色或是樣式，可以設定 variant 圖片，讓消費者點擊 variant 的時候就會直接看到該顏色或是樣式的圖片。
▍CTA 按鈕
CTA 按鈕最重要的是要清楚且顯眼，以提醒消費者把商品加入購物車。可以只有一個「加入購物車」按鈕，也可以同時有「加入購物車」與「立即購買」的按鈕，此外，在商品缺貨的情況下，也可以加入一個「補貨通知我」的功能，不放過任何一個潛在顧客。
▍可以展開的區塊商品介紹的部分盡量言簡意賅地突出商品特色，其他的資訊例如尺寸表、退款政策或是注意事項等等，如果全部寫在商品介紹裡，會顯得冗長而沒有重點，可以放在商品介紹底下，設計成一個一個可以產開的區塊，讓有需要的消費者點開瀏覽。
- 消費者評價：可以在商品介紹底下展示多個消費者評價，以建立消費者與商家的信任。有些 theme 有內建此功能，或是很多 app 有提供這樣的服務。
- 推薦商品：可以在商品頁的最下方加上幾個推薦商品，讓消費者順勢去瀏覽其他商品，進而讓他們追加購物。
更多商品頁資訊：https://help.shopify.com/zh-TW/manual/products
除了上述三個頁面應該注意的設計重點以外，網站也可以考慮加入彈跳視窗與 Messenger 插件。
Messenger 插件可以讓消費者在瀏覽網站時，對商品有任何疑問都可以直接與客服團隊聯繫，在使用上比起另外寄 email 或是到粉專去私訊來的直覺，在消費體驗上也較為流暢，也可以讓商家把握時機提供服務給消費者。
而彈跳視窗通常是在消費者瀏覽網站到一半時跳出，可以用優惠券、優惠碼鼓勵消費者留下 email 或是其他資料，但切記不要問太多問題，這會減低消費者留下資料的意願。此外，彈出視窗要有一個明確的退出鍵，讓不願意留下資料的人關閉彈出視窗、回到網站瀏覽，否則會因為不好的用戶體驗而流失潛在消費者。
以上提供給商家們在設計網路網站時參考，設計網站並沒有一個通用的模板或是公式，根據產業、目標市場都會有所不同，可以參考你的網站數據去看每一個階段流失的人數並分析可能的原因，例如來到首頁的有 1000 人，但最終到達商品頁的只有 500 人，進而去修改並優化你的網站，讓消費者有更好的購物體驗，使網站的轉換率上升。
若有其他網站設計問題，歡迎到 Facebook 社團 Shopify Taiwan 台灣品牌 & 跨境電商 與其他商家交流哦～
立即打造你的網路商店 👉14 天免費試用 Shopify
