核心实施拆解
从选型到加购:三条关键前端链路
SALIGIA 的价值在系列影像和身体版型,不在把单品铺成普通时装网格。主题前端要做的是:让 Greek、Obscura、Measured Tension 继续保有编辑气质,同时让衣类入口、尺码、缺货和退换从黑色摄影里被分开、被点到,桌面与手机共用同一套系列和商品组件。
项目背景
先明确客户怎么选,再决定前端承担什么
用户从 Underwear、Briefs、Trunks、Jockstrap、Swim 或 Greek、Obscura、Measured Tension 等系列进入,先被视觉和轮廓吸引,再通过版型、尺码、颜色、面料和退换确认。Member Shop 与 Mystery Box 服务核心用户。
Shopify 主题前端优化;UI/UX 调整;系列与商品页面组件;导航、交互和移动端适配。
01系列入口
先进入系列气质,再进入可买的衣类
把首页与 Featurette 的编辑节奏接到 Underwear、Briefs、Trunks、Jockstrap、Swim 等衣类,以及可独立上新的胶囊,让用户先认风格,再进入具体商品。
- 01以宽幅系列影像进入品牌
- 02分开衣类入口与胶囊入口
- 03在集合页继续阅读轮廓和面料
- 04从商品卡走进具体版型
实现方法
- 浏览主轴是系列影像,衣类集合与胶囊系列并行,而不是把全部 SKU 平铺成货架。
- 系列页把摄影、系列说明和商品卡分成可单独替换的组件,Featurette 与 Greek、Obscura、Measured Tension 走同一套浏览节奏。
- Swiper 只负责系列与内容切换,不压过主导航和衣类入口。
部署与验收
- 桌面用宽幅战役画面进入衣类;手机裁切雕塑感摄影,系列和筛选热区仍要够大。
- 胶囊上新主要更换系列影像和集合内容,不必重做导航结构。
- 动效保持克制,焦点从系列影像到商品卡再到购买控件,避免轮播挡住路径。
最终效果实现后的变化
- 用户能分清看系列和选衣类,品牌气质不会被商品列表冲掉。
- 新品胶囊可以沿用同一套系列组件上线,浏览顺序保持连续。
查看脚本与 Shopify API 依据
swiper-bundle.esm.browser.min.jsSwipertheme.aio.min.jsvendor.aio.min.js02版型确认
让尺码、缺货和退换从黑色摄影里被点到
用户被轮廓吸引之后,仍要在同一商品页完成版型、尺码、颜色、面料和售后确认,购买控件不能沉进影像。
- 01阅读轮廓、面料和模特说明
- 02选择尺码与颜色变体
- 03核对缺货、护理和退换
- 04加购并看到可搭配单品
实现方法
- 尺码和颜色进入 variant;护理、支撑和模特说明作为内容字段,不占用选项值。
- 尺码、价格和加购从黑色背景高对比分离;缺货尺码使用独立状态,不和可售选项同一层级。
- 加入与变更购物车走 Shopify Ajax Cart;相关商品推荐补同系列或可搭配单品,不打断当前版型确认。
部署与验收
- 手机端优先保留身体轮廓的裁切,尺码和退换入口保持可点热区。
- 礼盒配置与基础内衣分开维护,组合商品状态不覆盖普通尺码选择。
- 画廊和加购留在主题内核与商品媒体层;尺码建议放在变体旁边,不改写 variant 契约。
最终效果实现后的变化
- 用户可以在不离开系列气质的前提下确认版型并加购。
- 缺货、护理和退换在购买前可见,敏感品类的犹豫不必翻到政策页才出现。
查看脚本与 Shopify API 依据
theme.aio.min.jsvendor.aio.min.jspagefly-product-media.jsSizingPlugin.prod.jsgiftbox-config.jsCart Ajax: addCart Ajax: changeProduct Recommendations API运营交接
上线之后,运营团队可以继续维护
- 衣类集合承接 Underwear、Briefs、Trunks、Jockstrap、Swim;Greek、Obscura、Measured Tension、Featurette 作为胶囊独立维护。
- 尺码与颜色进入 variant;护理、支撑、模特说明放在内容字段,不占用选项。
- 礼盒与基础内衣分开配置;Member Shop、Mystery Box 作为核心用户入口,不混进常规衣类网格。
- 公开店面以英语交易、默认美元,系列影像和商品主数据可跨市场共用。
- 全球配送、税费和内衣退换按目的地维护,并在购买前可被读到。
- 运营编辑落在系列导航、尺码说明、礼盒文案和政策模块;地区差异作为内容和库存处理,不必改主题交互内核。
资料说明公开来源与核验边界
公开资料来源
内容核验
行业、商品与公开功能依据品牌官网核验;无法从前台验证的 App、后台配置和经营数据不作推断。WESWOO 的工作范围只按项目记录和客户授权表述。
公开信息最近核验:2026-08-20