为线上店铺打造吸睛又实用的视觉与功能体验,助力提升品牌形象、优化用户浏览路径、促进转化成交,送水宝提供了全面的自助积木方式来帮助商户完成靓丽的商城首页。
目前装修模块下提供了基础组件12个、营销组件2个,商户可根据业务开展来搭建自己的商城首页,也可为多门店搭建不同的首页显示方式。

(1)基础组件
- 标题文本:可输入标题及文字介绍,支持显示位置、标题大小、描述大小、标题粗细、标题颜色和描述颜色自定义设置;
- 富文本:支持图文编辑器混合排版丰富的输出文本及图片等;
- 辅助分割:常用于装修组件之间的距离分割,使其组件之间上下不粘合,合理利用组件具有一定的美化及提升用户视觉体验的作用;
- 图片广告:用于展示品牌宣传图、促销活动海报、新品上市图等视觉内容,以高冲击力的画面吸引用户注意力,快速传递核心营销信息,提升活动曝光和转化概率。
- 魔方:属于模块化导航组件,以多格 / 多区块的形式整合各类功能入口(如分类、会员中心等),支持自定义布局和跳转链接,帮助用户快速找到目标功能,优化页面导航效率。
- 商品搜索:提供关键词检索功能,支持按商品名称、品类、属性等维度精准查找商品,搭配搜索历史、热门推荐等附加功能,降低用户查找商品的成本,提升购物便捷性。
- 图文导航:结合图片与文字两种形式呈现导航入口,相较于纯文字导航更直观,常用于展示核心品类、特色服务或专题活动,兼顾美观性与实用性,引导用户点击进入对应页面。
- 电梯导航:适用于长页面场景的快捷导航组件,固定在页面顶部,包含首页、分类、购物车、底部等关键位置的快速跳转按钮,帮助用户一键回到目标区域,减少页面滑动操作。
- 商品:核心展示组件,用于陈列商品列表或单品详情,支持配置商品图片、价格、销量等信息,满足用户浏览、挑选商品的核心需求。
- 视频:通过动态视频内容展示商品使用场景、品牌故事、产品功能演示等信息,相较于图片更具感染力和说服力,帮助用户更全面地了解商品价值,增强购买意愿。
- 公告:用于发布平台通知、活动规则、售后政策、系统维护等重要信息,支持置顶展示和时效设置,确保用户及时获取官方动态,提升信息触达率和用户知情权。
- 附近门店:本地化服务组件,基于用户定位展示周边线下门店的商品、优惠、配送等信息,适用于线上线下一体化运营的商家,方便用户到店体验、自提商品或享受线下服务。
(2)营销组件
- 优惠券:营销转化类核心组件,用于发放满减券、折扣券、无门槛券、品类券等多种优惠权益。可配置使用门槛、有效期、适用范围等规则。核心作用是降低用户购买决策成本,刺激下单转化,提升客单价,同时也能用于唤醒沉睡用户、促进复购。
- 限时折扣:营造紧迫感的促销组件,通过设置固定的折扣时间段、优惠力度,搭配倒计时动态展示,突出 “限时特惠” 的稀缺性。适用于新品推广、库存清理、节日大促等场景,能够快速吸引用户注意力,促使用户缩短决策周期、即时下单,帮助商家在短时间内提升商品销量和活动热度。
(3)组件数量
- 装修模块下分别定义了在每一个页面模板下使用的组件数量,商户可通过组件下的数值查看当前使用了每个组件的数量和组件最大限制数量;
- 目前平台对各个组件的最大使用数量为:标题文本10个、富文本10个、辅助分割50个、图片广告10个、魔方10个、商品搜索1个、图文导航10个、电梯导航1个、商品10个、视频5个、公告1个、附近门店1个、优惠券1个、限时折扣1个;
- 商户请合理的安排页面模板下的组件,通过功能与视觉的科学搭配,打造流畅、贴心、高效的使用体验,让用户在浏览、决策、互动的全流程中感受到被重视,降低用户的操作成本与提升用户的信息获取效率与决策意愿,更重要的是,合理的组件搭配不是功能的简单堆砌,而是根据不同用户群体的使用习惯优化体验 —— 比如为新手用户简化导航层级,为资深用户提供更精准的搜索与筛选功能,让每一类用户都能找到适合自己的使用方式。这种从细节处优化体验的思路,最终会转化为用户的满意度与留存率,真正体现出 “以用户为中心” 的设计理念。
(4)组件使用
- 1.进入装修界面首先点击页面设置,进入页面设置后,输入模板名称,例:首页,可选模板为全部门店适用或指定某个门店适用该模板;
- 2.从左侧装修组件栏中点选需要显示的组件至预览页面中,选中组件时将显示右侧栏组件属性设置区域,可根据组件提供的设置属性进行功能设定;
- 3.预览页面区始终为从上至下排列组件,商户可根据实际情况进行组件排列,在存在多个组件时,可通过选中右侧组件列表来快速定位,需要对组件上下顺序进行排序时可在组件列表下按住组件进行上下拖拽进行排序,也可通过选中预览区中的组件点选上下按钮进行排列操作,如去除组件可选中组件点击删除按钮即可剔除组件。
- 4.在完成页面组件设定后即可保存或预览整个店铺的首页,至此装修首页完成;
提示:在使用每个组件的区间我们强烈建议插入辅助分割组件,分割组件优先选用辅助空白类型,并将其空白高度设为10px为佳,这样每个组件的上下间隔都会有一定空白使整个页面保持较高的辨识度和极佳的用户体验感。