案例作品集 浏览精选项目

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

电动自行车

CYCROWN

CYCROWN 的美国商城以多车型、多价格带和强促销运营为特点,必须用筛选、比较、分期和配件关系防止用户只看折扣。

访问项目官网
CYCROWN Urban X 城市通勤电动自行车
品牌官方公开视觉

核心实施拆解

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

CYCROWN 面向美国骑手销售城市通勤与全地形电动自行车。Urban X、Nomad Pro 等车型分属不同路况,页面上又同时存在分期、配件和持续闪购。真正要稳住的不是把活动铺满首屏,而是让场景入口、可售车辆和促销层各管一段:先选对用途,再确认买的是哪一台车,最后才处理券和加购。

项目背景

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

购买决策

用户按骑行场景和预算进入,再以功率、电池、传感器、速度、续航、车架与载重筛选 Urban X、Nomad Pro、Roma、CycHunter 等车型。Affirm、评价、视频和本地支持完成决策。

交付边界

WESWOO 的重点应是用商品数据和场景筛选稳定强促销商城,让型号适配始终先于折扣;同时把配件、App 和支持连接到车辆生命周期。

01场景入口

通勤和胖胎不要从同一个门口进来

用户应按路况进入集合,而不是被首页倒计时直接送进当时最便宜的车型。

  1. 01从通勤或胖胎场景进入
  2. 02用测验或筛选收窄车型
  3. 03在集合页对照功率、续航和车架
  4. 04打开对应型号产品页

实现方法

  • 首页用 category-tab-content.js 在通勤与胖胎分区之间切换,场景集合承接用途分流,而不是把全部车型摊成一张折扣表。
  • ebike-quiz-simple.js 按骑行场景做车型适配,把用户送进合适的产品范围,而不是直接落到价格最低的 SKU。
  • search.js 调用 Predictive Search API,在输入阶段返回车型与系列建议,与集合使用同一套用途词汇。

部署与验收

  • 车型 Tab、测验文案和系列内容可以单独更新,不必改动 variant 矩阵或加购请求。
  • 测验弹层避开主购买控件;搜索保留加载与无结果状态,避免把人丢进空列表。
  • 骑行故事作为内容维护,不写进可售车辆的选项值。
最终效果实现后的变化
  • 用户先确认通勤还是全地形,再面对具体价格和促销。
  • 新型号进入既有场景集合和测验范围后,就能被首页分区与搜索找到。
查看脚本与 Shopify API 依据
category-tab-content.jsebike-quiz-simple.jssearch.jsPredictive Search API
02购买对象

颜色和电池进变体,锁具头盔不要写进选项

产品页要让人看清即将加购的是哪一台车;配件只作为关联商品出现,不能改写 SKU。

  1. 01选择颜色或电池包
  2. 02同步画廊、价格和库存
  3. 03用规格与实骑内容确认这台车
  4. 04把锁具、头盔作为相关商品加入

实现方法

  • 可售 SKU 只由 product 与 variant 管理,颜色或电池包驱动媒体、价格和商品表单,配件不进入主机选项。
  • 画廊用 Swiper 组织实骑画面与车架、轮胎、电池特写,规格卡独立于促销条,避免彩色车身盖住关键适配信息。
  • Product Recommendations API 按当前车辆上下文给出锁具、头盔等关联商品,骑行内容不进入变体矩阵。

部署与验收

  • 画廊、规格和购买栏分开维护,主题编辑器重载 section 后重新绑定轮播、变体和表单。
  • 桌面并列媒体与购买栏;移动端把长参数收入折叠面板,倒计时和优惠入口压在主购买控件之下。
  • 产品卡在集合页露出功率、续航等关键指标,折扣不能代替型号说明。
最终效果实现后的变化
  • 加购对象始终是选定的车辆 SKU,配件不会把变体矩阵撑乱。
  • 用户能同时看清路况画面和功率、续航、尺寸,而不是只看见车身颜色或券层。
查看脚本与 Shopify API 依据
theme.jsswiper-bundle.min.jsProduct form behaviorVariant behaviorMedia/model behaviorProduct Recommendations API
03加购与促销

闪购可以催单,但不能改写购物车里的车

优惠券、倒计时和分期都允许存在,前提是它们停在展示层,购物车始终认得当前车辆。

  1. 01确认当前车辆 variant
  2. 02通过 Ajax Cart 加入购物车
  3. 03用返回结果更新抽屉行项目
  4. 04在展示层处理优惠券和分期

实现方法

  • cart.js 通过 Cart Ajax 的 add、change、update 提交,抽屉和行项目以接口返回的购物车数据为准。
  • coupon-drawer.js 与 custom-countdown.js 自己维护优惠券和倒计时,促销层不写入商品表单字段。
  • 分期说明出现在产品页和购物车抽屉的展示层,不作为主机选项值参与加购。

部署与验收

  • 闪购文案、倒计时和券抽屉可单独发布,不必改加购请求。
  • Section Rendering 或主题编辑器重载后,购物车、测验和轮播重新绑定,避免旧监听残留。
  • 无脚本时仍可提交主题自带的商品表单,促销模块失败不阻断购买。
最终效果实现后的变化
  • 用户加购后看到的是选定车型,折扣不会覆盖 SKU 身份。
  • 运营更新闪购和优惠券时,不必改动变体矩阵和加购流程。
查看脚本与 Shopify API 依据
cart.jscoupon-drawer.jscustom-countdown.jsCart Ajax: addCart Ajax: changeCart Ajax: updateaffirm-product-handler.jsaffirm-cart-drawer-embed-handler.jsSection Rendering APIShopify section eventsShopify theme editor mode

运营交接

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

商品与内容
  • 集合按通勤与全地形(胖胎)用途分流,Urban X、Nomad Pro 等型号以独立 product 上架。
  • 颜色或电池包进入 variant;锁具、头盔作为关联配件,不写入主机选项。
  • 功率、续航、车架和 Class 作为可比较字段维护,骑行内容与可售 SKU 分开。
市场与日常运营
  • 交易语境为美国英语与美元;Class、英里续航、本地服务和分期说明按美国站维护。
  • 分期文案留在产品页和购物车抽屉的展示层,不进入车辆选项值。
  • 车型 Tab、促销条、测验文案和政策模块可分别更新,闪购不必改加购流程。
资料说明公开来源与核验边界

公开资料来源

内容核验

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

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

你的下一步

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

讨论你的项目