Portfolio

從左營市場飄香70年的老店，到高還原度的電商官網 這次的專案是「菜市仔嬤 汾陽餛飩」的 Shopify 官網建置。合作方的設計師已經在 Figma 完成了完整的視覺設計稿，我們的任務是將設計稿高度還原地實作為可上線、可維運的 Shopify 網站。   品牌背景 菜市仔嬤是深耕左營第二公有市場超過 70 年的老字號餛飩店，主打招牌鮮肉餛飩、乾拌辣餛飩、豆皮餛飩、湯圓等生鮮冷凍宅配商品，也曾多次登上電視節目與網紅開箱介紹。品牌本身故事濃厚、口碑扎實，官網的任務是把這份「市場人情味」轉換成能承載電商轉單的線上體驗。   專案挑戰：高還原度實作 當設計師已經產出完整 Figma 設計稿時，前端實作的重點就不再是「創意發想」，而是「精準執行」： 版面間距、字級層級、色彩系統都需要對齊設計稿的視覺規範 首頁多個模組（輪播 Banner、熱銷商品、免運組合、網紅推薦、電視報導、YouTube 影片牆）需要逐一還原並串接 Shopify 後台可編輯的資料結構 手機版與桌機版的版型皆有設計稿，需要分別調整，確保還原度不因裝置而失真   我們怎麼做 模組化切版依照 Figma 設計稿拆解出首頁的各個內容區塊（主打商品、超值免運組合、網紅推薦、電視報導、菜嬤廚房影片牆等），逐一實作為 Shopify 主題的 Section，以現有Theme 功能調整，幾乎無修改原始碼，方便品牌方後續自行更新、調整排序與內容。 會員與促銷機制串接依品牌需求規劃滿額免運、滿額贈品（辣餛飩、辣椒醬）等階梯式促銷提示條，以及會員回饋計畫頁面，讓行銷活動可以直接反映在前台。 社群與口碑內容整合把品牌長期累積的電視報導、網紅開箱文、YouTube 影片整理進官網頁面，並串接 LINE、Instagram、Facebook 等聯繫管道，讓官網不只是賣場，也是品牌信任感的展示櫃。 像素級細節校對針對按鈕圓角、間距、字距、圖片裁切比例等細節反覆比對設計稿與實際頁面，確保上線後的網站與設計師交付的視覺稿一致。 成果 上線後的官網完整保留了品牌方設計師的視覺規劃，同時具備 Shopify 電商該有的商品管理、促銷機制與會員系統彈性，讓「菜市仔嬤」能把 70 年累積的市場口碑，延伸到線上通路。服務包含後續的網站後台使用教育訓練，經營多年後網站已跟原版的設計及內容皆不同了，Shopify讓客戶自行經營及內容修改調整更容易。 前往 菜市仔嬤 汾陽餛飩 網站看看