案例作品集 浏览精选项目

Shopify Plus 升级月费减免+最高抵扣$4800开发费用 - WesWoo专属优惠

食品与调味品

RishRight

RishRight 用食谱、风味和组合装把中式辣椒油带入英国日常餐桌;Shopify 的重点是降低新品类理解和首次尝试成本。

访问项目官网
RishRight 辣椒油与佐餐搭配内容
品牌官方公开视觉

核心实施拆解

从选型到加购:三条关键前端链路

RishRight 要把中式香脆辣椒油放进英国日常餐桌,关键不是再堆红色装饰,而是让没吃过这品类的人先看懂辣度、用途和盒内有什么,再决定买一瓶还是先尝一组。食谱、风味说明、单瓶、礼盒和购物车因此共用同一套可运营的商品信息,而不是另建一座无法结账的内容站。

项目背景

先明确客户怎么选,再决定前端承担什么

购买决策

用户可以从 Yo Po、Fresh Qin、Garlic Blend、Traditional 或 Golden Drizzle 单品进入,也可以用 Ultimate Taste Box/Gourmet Set 降低试错;食谱、搭配、评价、线下门店和免邮门槛完成判断。

交付边界

Shopify 食品品牌前端、商品与套装、食谱内容、快捷加购和响应式体验。

01尝鲜选择

让顾客在尝鲜礼盒和风味单瓶之间做出清楚选择

不熟悉中式辣椒油的人可以先用礼盒降低试错;已经有口味偏好的人则应能直接回到对应单瓶。两条路径共用同一批风味线,不能做成两套互不相认的商品。

  1. 01从风味线或礼盒进入
  2. 02看清辣度、用途和盒内组成
  3. 03在单瓶与尝鲜盒之间选择
  4. 04加购后看到可继续尝试的口味

实现方法

  • 辣椒油单瓶与 Ultimate Taste Box、Gourmet Set 保持为独立商品:系列按风味线组织,规格用变体管理,礼盒不并进单瓶的选项。
  • 产品页同时给出单瓶购买和礼盒入口,先完成风味、辣度、用法判断,再决定低风险尝鲜还是认准一瓶。
  • product-form.js 与 product-info.js 处理当前商品的变体和加购;Product Recommendations API 按当前商品上下文把礼盒与同风味单瓶互相带出。

部署与验收

  • 用法、配料和搭配拆成绑定产品对象的 section 与 block,运营可在主题编辑器里重排,不必改商品表单脚本。
  • 订阅能力留在应用扩展层,不并入商品表单,避免礼盒与单瓶的库存、数量状态互相覆盖。
  • 抽屉加购后同步刷新数量说明和相关商品区,使盒装与单瓶的可售信息仍然分得开。
最终效果实现后的变化
  • 第一次购买可以先尝一组,复购可以精准回到某一风味单瓶,两条任务不再抢同一个按钮。
  • 新风味沿用单瓶与礼盒的商品关系即可进入推荐,不必另做一套搭配表。
查看脚本与 Shopify API 依据
product-form.jsproduct-info.jsProduct Recommendations APIquick-add.jsquantity-popover.jscart-drawer.jscart.jsCart Ajax: add
02食谱购买

让食谱指向能加购的商品,而不是另开一座博客

顾客往往先看到一道菜,再问“用哪一瓶”。食谱、搜索和搭配必须指向同一批可售 SKU,用法才不会停在阅读里。

  1. 01从菜式或风味名开始
  2. 02落到对应可购买商品
  3. 03在食谱与产品页之间核对用法
  4. 04把那一瓶或礼盒加入购物车

实现方法

  • 食谱页反向引用可购买的单瓶和礼盒,用法说明绑定商品对象,而不是锁在一次性文章里。
  • predictive-search.js 对接 Predictive Search API,输入阶段就能把 Yo Po、辣椒油等词带到商品与风味线,而不是一长串无关结果。
  • 产品页的搭配区块通过 schema settings 读取同一产品对象,使食谱里的那瓶油与加购对象保持一致。

部署与验收

  • 食谱、门店和俱乐部文案放在主题设置中维护,不改动商品表单脚本。
  • 主题编辑器重排食谱或搭配区块时遵循 section 生命周期,只重挂当前模块。
  • 核心风味说明跨页面复用;配料、过敏原和保质按英国站单独编辑,避免营销稿覆盖合规字段。
最终效果实现后的变化
  • 看过菜式的人可以直接买到盘里那一瓶,而不必再从首页把口味猜一遍。
  • 运营更新一道食谱或一个搭配区块,产品页上的可购商品会跟着同一数据走。
查看脚本与 Shopify API 依据
predictive-search.jssearch-form.jsPredictive Search APIShopify theme editor mode
03食品阅读

把瓶身、辣椒质地和成品菜放进同一阅读顺序

食品页要先让人看出盒内有什么、什么味道、怎么吃,再出现购买。风味标签和过敏原披露必须能被扫读,不能靠一层红色空气来冒充辣度。

  1. 01先看瓶身、质地或盒内单品
  2. 02扫读风味与辣度
  3. 03展开配料和过敏原
  4. 04确认后加购

实现方法

  • 瓶身、辣椒质地和成品菜近景落在同一食欲比例里,内容顺序固定为盒内有什么、什么味道、怎么吃、如何购买。
  • 风味与辣度同时使用色票和文字,礼盒媒体要能逐瓶核对盒内单品,而不是只给一张礼盒外观。
  • 过敏原与配料使用高对比、可放大的披露状态,视觉上与营销标题分开;media-gallery.js 管理瓶身与菜品媒体,details-disclosure.js 承担折叠阅读。

部署与验收

  • 移动端抽屉购物车和快速加购避开配料折叠区,不让购买浮层盖住合规信息。
  • 需要看清标签时走 product-modal 放大,轮播由 Swiper 承担,不把配料塞进装饰动效。
  • 页面区块可在编辑器中调整顺序,加购与媒体脚本仍绑定产品对象,不随排版改写。
最终效果实现后的变化
  • 顾客能在加购前看清自己买的是哪一种辣度、盒里有哪些瓶子、能不能吃。
  • 购买浮层出现时,配料和过敏原仍然可被找到,食品信息不会被购物车盖掉。
查看脚本与 Shopify API 依据
media-gallery.jsdetails-disclosure.jsproduct-modal.jsSwiperquick-add.jscart-drawer.jsanimations.js

运营交接

上线之后,运营团队可以继续维护

商品与内容
  • 单瓶辣椒油与 Ultimate Taste Box、Gourmet Set 分成独立商品,系列按 Yo Po、Fresh Qin 等风味线维护,规格走变体。
  • 配料、过敏原、食用场景写入可编辑产品字段;食谱页引用这些可购买商品,而不是把用法写进一次性长文。
  • 礼盒媒体需要能核对盒内单品;推荐位读取同一商品对象,避免再手填一套与目录不一致的搭配。
市场与日常运营
  • 店面以英语和英镑服务英国消费者,结账预载 en-GB;配料、过敏原、保质、配送与退换按英国食品与零售政策维护,不从营销文案生成。
  • 免邮门槛、线下门店和会员活动作为运营配置,不写进商品表单脚本。
  • 核心风味说明可跨页面复用;价格、库存和活动只在英国站编辑。
资料说明公开来源与核验边界

公开资料来源

内容核验

行业、商品与公开功能依据品牌官网核验;无法从前台验证的 App、后台配置和经营数据不作推断。WESWOO 的工作范围只按项目记录和客户授权表述。

公开信息最近核验:2026-08-12

你的下一步

让品牌独立站成为可持续增长的基础设施

讨论你的项目