Portfolio

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

協助品牌完成跨境電商網站建置，整理商品與頁面架構，建立更清楚的品牌與轉單流程。

針對品牌視覺與購物體驗進行調整，提升整體一致性與商業呈現。

etheryal｜韓國服飾選品 Wix 架站案例   etheryal 是一個專注於韓系時尚的線上選品平台，選品風格主打簡約、知性、帶有高級感的穿搭美學，目標客群為熱愛韓系時尚、重視質感與個人風格的女性族群。此次專案由我協助全站規劃與建置，採用 Wix 平台 完成網站製作。 # 韓系風格導入官網設計 - 風格定位： 白底留白設計 × 黑灰主色系，呼應韓系時尚質感 - 首頁排版： 採大圖 Hero Banner，搭配當季選品主題與推薦品項 - 購物體驗： 商品分類清晰（上衣 / 褲裝 / 洋裝 / 鞋包配件） - 多圖展示： 商品頁支援多角度展示圖，提升購買說服力 # 技術實作與架構 主題與佈局設計 - 主題客製改版- 針對商品分類做清晰導覽設計- 商品頁支援多圖展示、規格說明與風格故事介紹段落 購物功能整合 - 設定金流- 加入折扣碼、會員註冊系統、快速瀏覽- 加入 Instagram Gallery 區塊，提升品牌社群互動與轉單率 SEO 與行銷設定 - 設定 SEO 標題 / 說明 / 圖片 alt 描述（優化搜尋曝光）- 製作 FAQ 頁面、退換貨政策等購物說明，提升品牌信任感- 手機版 RWD 優化，保證在手機上操作順暢 官網連結 [前往 etheryal 官方網站]   客戶回饋 「網站看起來就像品牌延伸的一部分，乾淨又不失細節，很符合我們的需要，教學仔細售後服務非常好，我們自行維護非常容易」

為 DANWU 設計師品牌打造 Shopify 官網，整合品牌哲學、婚紗訂製與設計師商品，展現高端品牌形象與流暢購物體驗。