核心实施拆解
从选型到加购:三条关键前端链路
AMZcycle 卖的是通勤、越野、砾石和载货电助力车。用户真正要完成的,是先按用途看懂 Defender、Paladin 等车型差异,再把身高对应的车架尺码变成可售配置。下面只写这两条决定选车和下单的链路。
项目背景
先明确客户怎么选,再决定前端承担什么
用户按 E-Urban、E-XC、E-Gravel 或 E-Cargo 进入,再根据用途、身高、尺寸、功率、续航和载重比较 Paladin、Ranger、Aerolife、Wildlife 等型号。试骑/本地车店、融资、质保和配送解除最后风险。
WESWOO 的重点是让高端车型按场景、尺寸和规格被理解,并把本地服务能力嵌入交易信任;商城不应只像产品目录,也要承担选车和售后承诺。
01场景短名单
用骑行用途做成可对齐的候选,而不是一组长续航文案
从 E-Urban、E-XC、E-Gravel 或 E-Cargo 进来的用户,应能用同一组电机、扭矩、续航、重量和载重字段比较车型,再进入独立产品页确认。
- 01按骑行场景或选车指南进入范围
- 02用统一规格对齐候选车型
- 03打开独立车型页确认结构和实骑
实现方法
- 公开目录以使用场景为主轴组织车型,Defender、Paladin 等保持独立产品页,让短名单发生在集合和比较层,而不是靠无法筛选的长描述。
- 电机、续航、重量、载重进入可比较的内容层;白底侧视和参数图标负责对齐差异,户外实骑图只证明地形能力,不替代规格阅读。
- Predictive Search 在输入阶段返回商品与集合建议,用户从车型名或用途词也能回到正确产品范围。
部署与验收
- 场景文案、规格字段和比较卡放在集合/产品模板与主题设置中维护,上新砾石或城市车型时复用同一结构。
- 首页与列表轮播由 Swiper 承担,Shopify section 更新后随主题运行时重新初始化,避免编辑器保存后卡片滑动失效。
- 锁具、包袋等配件按车型兼容放在主车确认之后,不在短名单阶段抢决策。
最终效果实现后的变化
- 用户可以按路况收窄到少数车型,再带着明确用途进入产品页。
- 新型号只要沿用场景和规格字段,就能进入同一套浏览、比较和搜索,而不必另做一套选车页。
查看脚本与 Shopify API 依据
Predictive Search APItheme.jsswiper-bundle.min.jsSwiperShopify section events02尺码成交
让车架尺码成为加购对象,而不是旁边一张对不上号的几何表
身高和车架尺寸必须驱动颜色、库存和加入购物车的变体;尺码说明要贴在它影响的选项旁边,用户不应看着 A 尺码图表却把 B 尺码送进结算。
- 01确认车型与用途
- 02对照身高选择车架尺码
- 03同步颜色、价格与可售状态
- 04把该变体加入购物车
实现方法
- 车架尺码与颜色作为 Shopify 产品变体进入购买任务,可售配置写在产品/变体对象上,而不是写在无法提交的说明文案里。
- 尺码引导紧挨变体控件;产品页加载 SizingPlugin,把当前车型的几何建议留在购买区,避免用户离开选项去读另一张表。
- 加购通过 Cart Ajax add 提交当前变体,数量变更走 Cart Ajax change,页面上的尺码、颜色与购物车行项目保持同一身份。
部署与验收
- 规格、尺码说明、Class 法规和售后文案放在模板与主题设置中,不写进 theme.js,便于按车型改内容。
- 变体与表单逻辑集中在 theme.js,section 重新加载时重新挂接购买区,不假设一次页面加载可以管全部编辑器更新。
- 尺码不可售、缺货和可加购分成独立状态;尺码插件按产品页加载,失败时仍保留原生变体选择。
最终效果实现后的变化
- 用户在同一购买区完成“这台车适不适合我”和“我要哪一个尺码/颜色”。
- 运营增加颜色或尺码时维护变体与库存即可,不必为每个车型重做一版购买流程。
查看脚本与 Shopify API 依据
theme.jsSizingPlugin.prod.jsCart Ajax: addCart Ajax: changeShopify section events运营交接
上线之后,运营团队可以继续维护
- 目录按 E-Urban、E-XC、E-Gravel、E-Cargo 等使用场景展开,Defender、Paladin 等车型保持独立产品,方便按地形做短名单。
- 车架尺码与颜色作为可售变体;电机、扭矩、续航、重量、载重作为可比较字段维护。
- 锁具、包袋等配件按车型兼容关联,放在主车确认之后补充。
- 公开口径为英语与默认 USD,结账预加载使用 en-US;Class 表述、区域库存、配送和质保作为可编辑内容维护,不写进 theme.js。
- 本地车店、融资说明和售后网点放在主题设置或内容区块,美国市场可单独更新。
- 钱包与付款条款可在主题层出现提示;目的地规则仍由内容和库存承担。
资料说明公开来源与核验边界
公开资料来源
内容核验
行业、商品与公开功能依据品牌官网核验;无法从前台验证的 App、后台配置和经营数据不作推断。WESWOO 的工作范围只按项目记录和客户授权表述。
公开信息最近核验:2026-08-12