案例作品集 瀏覽精選項目

Shopify Plus|開發費最高抵扣 US$4,800

實務指南

Amazon 品牌的 Shopify 商品頁設計

發佈日期:編輯:WESWOO

你的 Amazon 商品可能已經持續接單,但自己的網站仍只是一個網址加幾張商品圖片。

平台廣告可以吸引購物者,但品牌仍需要一個地方,講清產品為甚麼不同、幫助人作出選擇,並在購買後支援顧客。

建立 Shopify 網店,並不代表離開 Amazon。而是在自己的網域上,建立一套有用、可維護的購買體驗。

平台轉換與品牌網店是兩件不同的工作

Amazon 把商品搜尋、付款和訂單履約集中在平台之內。

Brand Registry、A+ Content、Brand Store 和 Brand Analytics 可以改善 Amazon 站內的呈現、內容結構和報表。這些工具仍然運作在 Amazon 的系統之內。

Brand Analytics 是彙總的搜尋與購買報表。它不是買家名單,也不是把平台顧客匯出到電郵工具的許可。

A+ Content 和 Brand Store 也回答不了 Amazon 以外的問題:當有人打開品牌自己的網域,能否很快理解產品並加入購物車?

你的 Shopify 網店可以提供顧客帳戶、電郵訂閱和會員計劃,前提是取得適當同意,並遵守平台規則。這些關係始於有用的體驗,而不是空白首頁。

繼續在 Amazon 銷售。讓品牌網站做另一份工作:完整呈現商品資料與購買路徑。兩個渠道之間要有明確界線。不要把平台買家資料當成可以批量匯出的檔案。

如果品牌網站只是重複平台刊登,沒有補上有用的選購說明或服務資料,訪客可能覺得除了比較價格,沒有理由再做別的事。

商品頁應通過四項檢查

第一屏就要把商品講清楚

首頁回答品牌是誰、賣甚麼。系列頁幫助購物者收窄選擇。商品頁必須說明,這一件與其他商品有何不同。

商品頁第一屏應同時包含:

  • 清晰的商品圖片,以及一句簡短說明其主要分別;
  • 價格、供應情況與加入購物車;
  • 打開規格、物料或使用情境的入口。

文案與媒體應與 Shopify 後台的商品紀錄相符。不要把 Amazon 詳情頁原封貼上。也不要把換一個 Logo、換一套配色,當成一張商品頁。

加入購物車必須在手機上可用

檢查從廣告和社交內容進入的手機訪客體驗。輪播、彈出視窗和推廣橫幅,不應令購買操作難以觸及。

用自己的手機打開主力商品頁,做一次短檢查:三秒內,你能否說出這件商品適合誰?能否在不必關掉多層覆蓋內容的情況下,直接按到加入購物車?若不能,先修正頁面結構,再增加投放。

三秒檢查是快速的清晰度練習,不是效能基準,也不是轉換保證。

賣點不應寫死在主題檔案裏

Shopify 主題通常由 Liquid、HTML、CSS、JavaScript 和 JSON 組成。章節和區塊可以把賣點、規格、比較圖和常見問題做成可編輯模組。

一項實際驗收標準是:網店團隊能否在主題編輯器裏改文案、圖片和模組次序。每改一句話都要開發人員改檔案,日常更新會變得更難。

假設示例:把商品差異連接到欄位與手機操作

以下假設一家品牌銷售不同容量的保溫杯,只說明交付檢查,不對應具體客戶、測試成績或轉換效果。商品資料及可用能力仍須在實際項目逐項確認。

  • 商品差異:把已確認的杯身物料和使用情境整理成商品元欄位,由商品頁規格模組讀取;保溫時長等效能描述,須由資料負責人提供依據後才展示。
  • 容量選擇:以真實款式選項管理容量,核對各款式的價格、庫存及圖片;切換容量後,第一屏與購物車內的選擇應一致。
  • 營運驗證:由營運在主題編輯器或商品後台修改文案及欄位,開發核對模組連接,再預覽手機頁面,確認更新毋須修改主題檔案。
  • 手機驗證:從對應商品入口打開頁面,檢查彈出視窗和推廣橫幅會否遮擋容量選擇及加入購物車;選容量、改數量並加入購物車,核對款式、數量、價格及庫存提示,再進入結帳核對送貨地址對應條件。記錄實際結果、問題及負責人,不以按鈕可點擊代替完整驗證。

欄位已更新但頁面未顯示,應分別檢查現行模板、模組綁定及快取;切換款式後資料不一致,先修正資料和互動,再增加頁面模組。這些檢查方法不是經營效果承諾。

還要確認欄位屬於商品還是款式、類型是否與現行主題設定兼容,以及實際頁面使用哪個模板及資料來源。建立欄位不代表主題會自動顯示,也不代表商品級資料會隨容量切換。兼容主題可在主題編輯器引用款式元欄位,但欄位、模板及切換效果仍須按實際商店驗證。Shopify 款式元欄位說明。為示例中的可售、不可售及缺欄位狀態,分別記錄預期、實際、市場、款式及負責人;資料缺失不能補造保溫效能或送貨承諾。只在獲准環境核對價格、選擇和結帳,不為測試擅自扣款;通過後,再確認營運能毋須改檔案維護已連接的欄位。

渠道角色不應變成一場價格戰

Amazon 可以繼續負責站內搜尋與轉換。品牌網站可以承載品牌內容、獨立購買路徑,以及符合同意要求與平台規則的回訪。SKU、包裝、主圖和推廣應按這些角色來規劃,避免兩個渠道只剩下比價。

保持產品身份、內容與價格準確。渠道差異應說明實際提供的分別,而不是掩蓋兩條刊登其實在賣同一件商品。

先讓主題可維護,再評估 Plus

網店剛開始建立時,先為一件真實的主力 SKU 把商品頁和主題結構做對。Shopify Plus 只有在業務真正出現以下訊號時,才值得進一步評估,例如:

  • 公司帳戶定價、批量價或分層定價,或專屬目錄;
  • 零售與批發同時運作;
  • 多市場規則變得更複雜;
  • 結帳確實需要擴展。

這些是用來對照現行方案功能的理由,不是「Shopify B2B 或 Markets 必須使用 Plus」的規則。公司帳戶、目錄和批發流程預設並非只有 Plus 才有;結帳自訂也取決於要改的是結帳的哪一部分。

Shopify B2B 可用於 Basic、Grow、Advanced 和 Plus,基礎公司帳戶、目錄、賬期與自助下單並非 Plus 獨有。Basic、Grow、Advanced 在活躍 B2B 市場中合計最多進行 3 次活躍目錄分配;同一活躍目錄分配到兩個活躍市場,佔兩次分配。

若需要把目錄直接分配給特定公司或公司地點,或需要訂金、部分付款及按履約請款,應進一步評估 Plus;Plus 不受上述分配次數限制。透過 Markets 做情境化結帳和店面自訂,則核對 Advanced 或 Plus 資格,不能把多市場需要一概當成 Plus 需要。先列明必需能力,再對照現行方案。Shopify 官方 B2B 方案能力說明

如果商品頁講不清這件貨,主題模組又不能編輯,改方案也修不好這兩件事。Headless 也不應是預設答案。先確認現有主題架構無法承擔這項工作,再考慮其他方向。

WESWOO 可以從哪裏開始

WESWOO 專注 Shopify 網店設計與開發。先從一件重點商品開始,把工作變成清楚的交付:

  1. 重整首頁、系列頁和商品頁,讓產品差異和加入購物車在手機上清楚可見。
  2. 把賣點、規格、比較和常見問題做成網店團隊可編輯的章節與區塊。
  3. 用 Liquid 從後台讀取商品事實,而不是把活動文案寫死在主題檔案裏。
  4. 主題可維護之後,再按實際業務檢視 Markets、B2B、系統整合和 Shopify Plus,而不是預設升級。

帶上 Amazon 主力刊登網址、品牌網站應講清的產品差異,以及購物者在購買路徑上卡住的位置。這些已足夠用來與 WESWOO 討論頁面設計、主題開發及後續擴展。

相關工作:Shopify 網店頁面設計與開發。

常見問題

Amazon 已經在出單,為甚麼還要做品牌商品頁?

Brand Store 和 A+ Content 是 Amazon 站內能力。品牌仍需要一條在自己網域上、可隨時間編輯、也能承接回訪的購買路徑。那不是另一個 Amazon 店面。

新開的 Shopify 網店是否必須立即升級 Plus?

不必。先把商品頁和主題結構做對。當批發帳戶、多市場規則或結帳擴展成為真實需求時,再對照現行方案功能評估 Plus。Shopify B2B 本身並不是只有 Plus 才具備的能力。

品牌網站應否照抄平台商品頁?

兩個渠道都要用準確的商品事實,但品牌頁應圍繞訪客的問題和購買需要來設計。內容、包裝選項和推廣,應按真實的渠道差異來規劃,而不是複製一條刊登再換 Logo。

瀏覽 WESWOO 案例作品集