Project Showcase

ROBINMAY

SHOPLINE 前台客製與功能開發・Liquid.js

// 專案持續時間 2024.11 ~ 2026.12

為 ROBINMAY 進行 SHOPLINE 前台客製化與功能開發。
品牌從舊版編輯器升級至新版時,原有客製化全面移除,
因此從零開始,基於新版編輯器進行全站元件與頁面客製化開發。

後續協助開發小雜誌與分類頁、選單列改版,以及選單主題切換機制,
並簽署兩年期長期維運合約,維持網站穩定性。

專案自 2024 年 11 月啟動,持續維運與功能擴充至 2026 年底,
配合品牌離開 SHOPLINE 平台前的過渡期維護。

挑戰與解法

// 每個功能點都是在平台限制下,用客製化方式解決實際業務需求。

01基於新版編輯器進行前台客製化與功能開發

在 SHOPLINE 新版編輯器架構下進行深度客製,確保功能穩定並符合品牌設計需求。

02依據非正規設計稿進行頁面實作與元件調整

面對非標準網頁設計稿,基於開發經驗完成客製化需求,完整還原品牌視覺與互動細節。

03實作多語系與動態路由切換,支援選單主題切換

針對雙語進行客製化開發,並可依路由動態更換選單主題,以配合品牌活動檔期,自由切換選單主題,打造更具品牌識別的瀏覽體驗。

04重構篩選器與選單展開邏輯

重新調整商品列表頁之篩選器架構與全站選單目錄的展開內容呈現方式,使其符合品牌設計規範與使用習慣。

05長期合作維運,歷經多次改版與功能擴充

自專案上線後持續維護至 2026 年底,期間配合品牌需求進行多次改版與新功能開發。

頁面展示

Home - RM

// 主品牌首頁,依路由自動切換呈現,以展現多主題切換機制。

Home RM
Home RM - 手機

Home - ROBINMAY

// ELLY 設計師主題首頁,依路由自動切換呈現,以展現多主題切換機制。

Home ROBINMAY
Home ROBINMAY - 手機

Home - EVOLUTION

// EVOLUTION 主題首頁,依路由自動切換呈現,以展現多主題切換機制。

Home EVOLUTION
Home EVOLUTION - 手機

Category

// 重構篩選器與商品元件架構,以符合品牌設計規範。

Category
Category - 手機

Product

// 商品細節頁高度客製化,並配合品牌視覺調整各區塊架構及功能。

Product
Product

Magazine

// 使用 Liquid.js 全客製化小雜誌首頁、分類頁,提供 tab 切換功能與懶加載文章功能。

Magazine
Magazine - 手機

Promotion

// 基於平台限制,客製化活動促銷頁面架構與注意事項區塊。

Promotion
Promotion - 手機

Menu

// 高度客製化選單架構與展開邏輯,支援三層分類與標題設計,符合品牌多重內容的展示需求。

Menu
Menu - 手機版