這個 Demo 解決什麼問題
許多作品集只放首頁視覺或幾個元件截圖，客戶很難判斷：
- 商品規格與多尺寸定價能不能正確呈現
- 會員、購物車、結帳是否串得起來
- 付款、售後與內容頁是否齊備
Shop DEMO 用一個公開網址把這些串起來，讓對方可以直接點開體驗。
站內結構一覽
站點以「日常舒適選品」為主題，商品聚焦睡眠場景，分類清楚：
| 分類 | 路徑 | 現況 |
|---|---|---|
| 床墊 | /collections/chuang-dian |
3 款主力床墊 |
| 寢具 | /collections/qin-ju |
保潔墊、毛巾被、水洗寢具組 |
| 枕頭 | /collections/zhen-tou |
涼感記憶枕與純棉枕等 |
另有完整內容頁支援購物信任與售後溝通：
首頁則以 Hero、系列促銷、精選商品與服務承諾（免運、退換貨、客服）組成完整店面節奏。
商品與定價設計亮點
床墊三階產品線
三款床墊形成清楚的入門 → 均衡 → 頂級階梯，適合展示「同品類多 SKU＋尺寸價差」：
-
ÓRIGINAL 原創床墊（硬式獨立筒）
- NT$ 30,800 – NT$ 46,800
- 奧地利 TENCEL® 面布、天然乳膠與硬式獨立筒
-
ÓASIS 綠洲床墊（均衡包覆獨立筒）
- NT$ 40,000 – NT$ 60,800
- 柔韌包覆與穩定支撐並重
-
ÓCEAN 海洋床墊（頂級深層包覆）
- NT$ 62,000 – NT$ 98,800
- 強調深層包覆與睡眠質感
尺寸涵蓋 3 呎至 6×7 呎，商品頁可切換尺寸並對應價格，適合示範電商常見的 variant pricing。
寢具與枕頭延伸品類
除床墊外，站內也補齊週邊商品，讓「一站完成臥室選購」的故事更完整：
- 機能保潔墊、純棉毛巾被、三色水洗寢具組
- 涼感記憶枕系列與可調高度的 Rólling 枕
這對作品集很有價值：不只證明會做單一商品頁，也能展示分類、列表、多價格區間與加購場景。
可演示的完整購物流程
建議用以下路徑帶客戶走一輪（約 3–5 分鐘）：
- 首頁探索 — 看 Hero、促銷區、精選商品
- 進分類 — 床墊／寢具／枕頭列表與篩選式瀏覽
- 商品詳情 — 規格、尺寸價差、保固與結帳信任標示
- 加入購物車 — 調整數量後進入結帳準備
- 會員流程 — 註冊／登入（
auth:member類型的前台會員體驗） - 付款能力展示 — FAQ 與商品頁標示綠界（信用卡／ATM）安全結帳
- 售後與信任 — FAQ、服務條款、聯絡表單、電子報訂閱
商品頁也清楚標出一年保固、30 天退換貨政策與綠界安全結帳，讓「信任元件」不只是文案，而是嵌在購買決策路徑上。
適合怎麼放進作品集
一句話定位
Shop DEMO 是一套以睡眠選品為主題、可公開操作的電商完整流程示範站，涵蓋商品分類、會員、購物車到綠界付款與售後內容。
可強調的交付能力
- 前台店面資訊架構（首頁 → 分類 → 商品 → 購物車 → 結帳）
- 多尺寸／多價格 SKU 呈現
- 會員註冊登入與訂單相關流程規劃
- 金流整合就緒（綠界 Credit／ATM）
- 內容與服務頁（About／FAQ／Contact／Terms）提升完整度
給客戶看時的講法
不必一開始就談技術細節。先讓對方自己點：
「這是一個可以實際操作的購物 Demo。你可以從首頁選床墊、換尺寸看價格、加入購物車，並看到會員與結帳相關流程。」
對方有感覺後，再補技術棧、部署方式與客製範圍。
結語
好的電商作品不該只是「看起來像商店」，而要讓人相信「這套流程可以變成真實生意」。
Shop DEMO 用公開網址把商品、會員、購物與付款信任一次講清楚——適合放在作品集、提案附錄，或面試時直接開給對方操作。