DMB. Brandshop
DMB. 是维也纳 Demner Group 旗下创意机构，Brandshop 用来销售他们创意工作的实体副产品：年鉴、海报、活动印刷品和限量设计物件。我们构建了一个中英/德语思路下的 headless Shopify + Next.js 店铺，读起来像作品集，直到你意识到每件东西都可以买。
年份
2024
项目
机构作品集与 headless 商店
范围
作品集设计、headless Shopify 实现、双语内容模型
行业
创意机构、设计零售
技术
Figma
Next.js
Shopify (Storefront API)i18n
Vercel亮点
- 编辑化、字体主导的产品索引
- Shopify 后端与完全定制 Next.js 前端
- EN/DE 双语内容模型与同步产品数据
- 保留机构语气的趣味购物车与文案
- 与店铺并列的作品集 WORK 区域
- 清晰连接 Demner Group 兄弟品牌
影响 / 改变
品牌表达
Before：标准电商模板会削弱机构语气。After：店铺读起来像 DMB. 项目，同时仍然像商店一样好用。
电商灵活性
Before：创意布局会受到主题机制限制。After：Shopify 负责电商，Next.js 让前端拥有编辑化表达空间。
双语运营
Before：双语内容容易造成重复产品管理。After：EN 和 DE 共享同步产品数据，并支持各自语言的可编辑文案。
需求与挑战
客户需求
“Brandshop 是我们创意工作的副产品：年鉴、海报、限量印刷品。网站要像一个 DMB. 项目，而不是 Shopify 商店。用户应该先认出这是我们的作品，再注意到这里有购物车。”
挑战
- 打造不像模板 Shopify 主题的机构感店铺
- 平衡趣味、文案丰富的机构语气和实用结账流程
- 在不重复 CMS 的情况下运行 EN/DE 双语目录
- 可信地融入 Demner Group 品牌体系
我们的做法
作品集能量，商店机制
产品索引采用强字体和留白的编辑化表达，但每个标题都是产品卡片，浏览作品和购物几乎融为一体。
Headless 释放创意自由
我们保留 Shopify 作为电商引擎，用 Next.js 重建前端，让设计团队可以像做定制页面一样处理每个页面。
双语从设计开始
EN 和 DE 共享产品模型，但文案完全可编辑，团队无需重复录入 SKU，也能保持两种语言的锋利语气。
成果
项目亮点
字体型产品索引
首页上的 44. Yearbook、Elementary ECO 和 On Behalf of Nature 像杂志专题一样排版，但每一个都是产品页入口。
趣味购物车
即使是空购物车和结账文案也保持品牌语气，电商界面尽量安静，让品牌先说话。
双语 UX
语言切换能在产品、购物车和内容页保留上下文，让德语体验成为一等版本。
