免費諮詢
↑
Case study · 電商購物網站

福昇食品

想買台南意麵或伴手禮的人,先要知道麵體口感、口味與煮法差在哪裡,也要確認成分與運送方式,才放心在網路上下單。

電商購物網站WordPressWooCommerce 購物車會員系統多國語言(WPML)產品型錄
Launch site ↗
福昇食品 網站 banner
Overview

先學會挑麵,
再放心下單

福昇食品是台南的百年製麵廠,從菜市場起家傳到第五代,產品有鍋燒意麵、關廟麵、生麵與伴手禮盒。購物網站先用呷麵撇步說明白、中、黑三種麵體與三種口味的差別,商品再依六個類別整理,商品頁用下拉選單選口味並列出成分與營養標示。購物車分成三個步驟,運費依商品分宅配到府與冷凍冷藏,另有會員中心與購買記錄;首頁另用四個區塊說明批發零售與客製化製麵。

客戶
福昇食品
類型
電商購物網站・多語系網站
上線
2024
服務
網頁設計・自有主機維護
Challenge

百年製麵廠,
要讓人放心買回家

福昇食品是台南起家的百年製麵廠,產品從鍋燒意麵、關廟麵到五斤裝生麵與伴手禮盒都有。線上買麵的人摸不到實品,通常想先知道白麵、黑麵差在哪裡、口味怎麼選、成分與保存期限,還有收到後要怎麼煮;這些問題沒有先回答,很難放心下單。

Approach

先教怎麼挑麵,
再帶到商品頁

我們先和店家確認客人常問的問題,把答案整理成「呷麵撇步」:白、中、黑三種麵體各自的口感與適合料理,海鮮、泡菜、麻辣三種調味粉的差別,以及四個步驟的煮法。首頁再依鍋燒、生麵等類別排出熱銷商品,看完說明就能直接選購。

Solution

口味選項清楚,
運費依商品區分

商品依鍋燒、關廟麵、調味包、禮盒、生麵與其他麵種六類整理,禮盒在商品頁用下拉選單選口味,並列出過敏原、成分、保存期限與營養標示。購物車分成購物車、結帳明細、訂購完成三個步驟,可以輸入折價券,運費分宅配到府與冷凍冷藏。

Deliverables

購物網站、麵食說明,
會員與後台教學

網站架構與版型、WooCommerce 購物車(三步驟流程、折價券、宅配到府與冷凍冷藏運費)、六類商品目錄與站內搜尋、口味選項與成分營養標示、會員中心與購買記錄、呷麵撇步、品牌故事、食安認證、實體店面與地圖、後台教學。

Timeline

訪談到上線,
約九週

需求訪談與商品分類整理一週、視覺設計兩週、購物車與會員功能開發三週、商品上架與運費規則設定兩週、試下單與驗收一週;商品照片、成分與營養標示由福昇提供,我們負責整理成口味選項與說明欄位。

Result

新品與訂單自己顧,
主機交給我們

新品、口味選項、價格與訂單由店家同仁在後台處理,上架時勾好分類,首頁與分類頁就會跟著更新;主機、備份、系統與外掛更新、資安掃描由我們的自有主機負責。

Screens

桌機、手機,
一次看完

Details

幾個做法上的細節

(01)

白中黑三種麵體先比較

呷麵撇步把鍋燒意麵分成白麵、一般與黑麵,各標出麵體口感與適合料理,下面再介紹三種調味粉與四步驟煮法。第一次買的人先知道哪一種適合煮湯、哪一種適合炒,選購時就不容易買錯。

(02)

商品頁選口味、看成分

禮盒在商品頁用下拉選單選麵種與口味,價格下方直接提醒含蛋與麩質;下方分成描述、購物須知、額外資訊三個分頁,列出成分、保存期限與營養標示。送禮的人買之前就能確認清楚。

(03)

運費分宅配與冷凍冷藏

購物車上方標出購物車、結帳明細、訂購完成三個步驟,右側可以選宅配到府或冷凍冷藏,總計會跟著運費更新,也能輸入折價券。生麵要低溫配送,運費在前往結帳之前就看得到。

(04)

四步驟插畫教煮鍋燒意麵

「呷麵撇步」頁最後一段用四張插畫教煮鍋燒意麵:先煮水、再加湯底與配料、放麵煮約 30 秒、盛碗完成,每一步都寫出水量與火候。買了麵的客人照著做就能上手,頁面同時介紹海鮮、泡菜、麻辣三種調味粉的風味差異。

Modules

這個網站,
用到的功能

每一項都是報價單上的一行。你的網站需要哪些,我們逐項列出來。

  1. 01WooCommerce 購物車
  2. 02會員系統
  3. 03多國語言(WPML)
  4. 04產品型錄
  5. 05圖片燈箱(Lightbox)
  6. 06首頁大圖輪播
  7. 07站內搜尋
  8. 08RWD 響應式設計
After launch

上線之後,
還在做的事

  • 內容由公司同仁自己更新後台照欄位填,不用懂版面;後台教學一次到會。
  • 主機、備份、更新在我們這邊自有主機、定期異地備份、系統與外掛更新、每天 03:00 資安掃描。
  • 固定窗口出狀況一個工作天內回覆;每年續約前給一份網站狀況報告。
Contact

留下需求,
1 個工作天內回覆

告訴我們你的產業、現在的網站、想解決什麼;回覆時會附上同產業的案例與估價區間。