核心实施拆解
从选型到加购:三条关键前端链路
INIU 要解决的不是充电站缺少视觉,而是用户面对外形接近的移动电源、磁吸充电和线材时,无法立刻判断功率、容量、接口和体积是否匹配自己的设备。下面三条路径分别处理首屏规格核对、按设备功率收口目录,以及把便携判断接到移动端加购。
项目背景
先明确客户怎么选,再决定前端承担什么
电次数和场景说明,避免只按数字堆叠。
视觉与 UI 设计、Figma 原型、Shopify 前端模块、产品系列呈现、快捷购物与响应式交互。
01规格首屏
打开型号页,先回答这款能不能带动自己的设备
用户进入 P63、Carry P50 这类具体型号时,不必先读完卖点,就能核对最高功率、容量和端口是否覆盖手机、平板或笔记本。
- 01进入具名型号页
- 02在首屏并列读取容量、最高功率和端口
- 03用体积或真实设备对照确认便携后再选颜色
实现方法
- 容量、最高输出和接口组合固定在首屏主阅读区,卖点句与评价后置。
- 便携判断靠体积对照和设备示意完成,不把购买决策交给氛围图或装饰性渐变。
- 颜色只承担外观辨认,不编码功率或接口含义;缺货与优惠使用独立状态色,避免和品牌高饱和配色混读。
部署与验收
- 桌面端产品摄影与购买栏并置;移动端先露出可核对数字和主操作。
- 数字滚动、文字过渡和评价轮播可弱化或关闭,首屏规格层级保持不变,并保留减少运动偏好。
最终效果实现后的变化
- 打开 P63 或 Carry P50 时,用户能立刻区分 100W / 25000mAh 与 45W / 10000mAh 各自对应的使用对象。
- 后续型号沿用同一首屏字段位置,上新主要替换规格与媒体,不必重排信息层级。
02功率匹配
目录按设备功率需求收口,而不是按氛围图陈列
从手机、笔记本或出行场景进入后,筛选和产品页都用容量、功率、接口缩小范围;线材和磁吸圈在确认主机后再作为关联商品出现。
- 01从设备或出行场景进入系列
- 02按容量或功率缩小范围
- 03在型号页核对端口与体积
- 04确认颜色变体
- 05按需带上线材或磁吸圈
实现方法
- 交易目录以移动电源、磁吸充电和快充配件为轴,容量与输出功率作为主比较字段。
- 颜色进入商品变体;线材与磁吸圈保持关联商品,避免把配件塞进主机选项。
- 可售 SKU 与插头标准、认证说明分开维护,合规信息不当成选项值。
- 搜索在输入阶段返回商品与系列建议,把“充电宝”“100W”落到正确功率段,而不是一长串外形相似的结果。
部署与验收
- 场景入口、集合筛选和产品规格读取同一套容量、功率、接口字段,促销页不另建分类。
- 容量与功率作为跨市场主数据维护;地区插头和认证只出现在市场内容层。
- 组合优惠作为主机旁的运营模块更新,不改写商品变体结构。
最终效果实现后的变化
- 选型任务变成“设备需要多少瓦、这款能否提供”,而不是在外形相近的 SKU 里反复比价。
- 新品写入容量、功率和接口后即可进入筛选、搜索和关联推荐,减少多处手工分类。
查看脚本与 Shopify API 依据
predictive-search.jsShopify Predictive Search API03随身选购
在手机上把体积、颜色和加购收成一次判断
出行场景的购买发生在小屏:用户要同时看清体积、颜色和当前优惠,并在折叠规格后直接加购,而不是读完长页再回头找按钮。
- 01在列表核对容量、功率与可售状态
- 02需要时进入产品页比较体积和颜色
- 03展开接口与兼容说明
- 04在当前优惠状态下完成加购
实现方法
- 集合列表露出容量、功率和当前可售配置,允许在不打开长页时快速加购。
- 产品页默认折叠详细协议与认证,体积对比和端口示意保持可点开,并靠近购买区。
- 限时优惠作为独立状态贴近购买操作,不覆盖规格核对。
部署与验收
- 移动端缩短首屏到主按钮的距离,折叠规格不挡住加购,也不进入系统手势区。
- 商品区块在主题编辑器中加载或卸载时重新挂接画廊与加购,避免按钮失效。
- 列表快速加购和产品页加购进入同一抽屉购物车,数量修改后各入口回写一致状态。
最终效果实现后的变化
- 用户可以在手机上连续完成“够不够小、能不能充我的设备、现在能不能买”。
- 优惠或规格模块更新时,不必重做整条移动购买结构。
查看脚本与 Shopify API 依据
quick-add.jscart-drawer.jsShopify section events运营交接
上线之后,运营团队可以继续维护
- 目录按移动电源、磁吸充电和快充配件展开,容量、输出功率、接口与体积作为主比较轴。
- 颜色作为变体;线材和磁吸圈作为关联商品,不写进主机选项。
- 场景入口与集合筛选读取同一套规格字段,避免为促销页另做一套分类。
- 默认交易语境为美国英语;英国、加拿大和欧盟的插头、电压、质保与配送作为市场内容分开维护。
- 运营编辑落在语言文案、地区导航和促销模块;容量与功率主数据在各目的地之间共享。
- 地区选择不影响核心选型字段,合规说明保持为内容,而不是变体值。
资料说明公开来源与核验边界
公开资料来源
内容核验
行业、商品与公开功能依据品牌官网核验;无法从前台验证的 App、后台配置和经营数据不作推断。WESWOO 的工作范围只按项目记录和客户授权表述。
公开信息最近核验:2026-08-12