小程序组件为电商小程序系统对基础数据的展现提供了美观、高效、灵活的有力保障，搭建一个高大尚的小程序页面，需要靠功能齐全，配置简单易用的组件。简洁美观大方的页面，也会给客户带来时尚、专业、认可的体验，增加访问和交易量。最近为了满足设计出美观大方的小程序页面，最近小猪电商产品组对商品分组组件和商品组件进行了大量的优化和调整，今天小编就来介绍下。

一、商品分组组件：

1、列表样式新增横向滑动：

商品分组中的商品列表图片展示样式有：大图、小图、一大两小、详细列表样式，一行三列、横向滑动，其中一行三列和横向滑动为本次新增样式。一个列表可采用多种形式进行展示，这样呈现细节更丰富，给人的视觉感受更强烈，进而提高转化率。列表样式展示主要根据产品属性决定，来进行列表选择。

(大图)

(详细列表)

(一行3列)

(横向滑动)

通过横向滑动进行查看，简单易懂的交互就能展示最多的商品信息，用于商品非常丰富时首页展示，增加商品露出率。在横向滑动里面，还可以选择两行模式，即两行同时滑动。

2、商品样式优化：

新增无边透明白底、卡片投影、描边白底等，这种视觉修饰方法，让商品样式展示更美观。

(无边白底)

(卡片投影)

(描边白底)

商品的卡片样式，使得用户在浏览商品的时候更便捷。能够吸引用户在浏览中二次跳转，给其他页面引流，增加用户的使用时长和参与度，减少页面流失。

3、购买按钮样式可自定义：

在商品图片展示样式中的卡片样式模块中可选择显示购买按钮。总共支持6个样式，其中新增3个样式，此3个样式可以自定义按钮文案。如下图所示：

4、显示内容新增商品角标：

商品角标，就是商品标签，附着在商品主图上的图标角标的文案内容，如果满足了用户的兴趣点，是能够提高点击转化的。

新品、热门、NEW、HOT、爆标五个标识，如下图所示：

5、顶部导航菜单增加吸顶功能

所谓吸顶，即顶部导航菜单滚动到顶部后，固定在顶部，继续向上滑动内容一直可见顶部导航菜单;而非吸顶模式，顶部导航菜单滚动到顶部后，不固定在顶部，继续向上滑动内容，顶部导航菜单滑动走不可见。

通过向上滚动后，中部TAB吸顶，滚动到底后可选择：向上滑动自动切换下一个TAB或者直接固定在顶部。

这样有指向性的设计，能为用户缩小筛选产品范围，帮助用户发现需求。可根据用户有无指向性商品需求，以及电商平台的商品多少来自由设置。

6、新增标题样式：

主要有3个菜单切换样式：矩形、椭圆形、线性。

7、新增页面边距：

调整页面边距0-30像素，0表示无边距。　比如，选择0边距，则内容贴合在屏幕边缘，影响可读性、美观度。一般留白区域是20px或者30px的宽度。如果界面内容比较多，可以选择用20PX。

(0边距)

(30边距)

8、图片填充

通过刻意使用大量留白、填充，能够使布局排版显得干净和精致，让界面设计显得更高大上。可以创造出一个强大的焦点，为电商商品渲染更有价值的标签。

(填充)

(留白)

9、新增商品图片倒角：

圆角和直角，使用圆角图片会有更好的装饰性，比较有亲和力，视觉上非常美观好看。

(商品图片直角图)

(商品图片圆角图)

二、商品组件：

1、新增选择商品

将商品组件拖拽至模板中，选择商品组件的模板，不同模板展示效果不同，在商品列表中，可选择已上架商品、商品分组、新建商品等三类。

温馨提示：商品管理后端拖动商品图片，可以更换位置。

2、模板样式优化：

商品组件模板样式，主要有：大图样式、一行2个、一行1个、一大2小，如下图：

现新增大图滑动、小图滑动、一行3个等样式。将商品图片组件拖拽至模板中，选择该图片组件的模板(大图滑动、小图滑动、一行3个)，上传图片，每张图片都可链接跳转到所选择的指定页面，如下图：

3、新增图片显示比例：

主要规格有：1:1 3:1 3:2 3:4，通过设置图片展示比例，能够让界面视觉体验更舒适，同时有助于集中视觉焦点，承载更重要的信息，让整个界面布局更加合理。如下图所示：

4、新增圆角半径

商品组件的圆角半径可设置0-50区间。

(圆角半径0)

(圆角半径50)

5、新增两行模式：

商品图片列表样式的横向滑动里面，可以选择两行模式，即两行同时滑动。

注:仅在小图滑动模式下可用。

6、显示内容：

显示的内容有：商品名称、售价、划线价(未填则不显示)、添加到购物车(一行3个样式下，不显示)

以上就是小猪电商商品分组、商品组件功能优化内容，预计将于近期更新。如果您有任何问题，欢迎咨询小猪电商官网客服哦。