# 商品列表

{% hint style="info" %}
**设置：**&#x7F51;站后台->店铺装修->主题装修->编辑->卡片装修->添加卡片->素材->选择商品列表
{% endhint %}

### 内容

* 添加专辑：支持绑定专辑

![](https://2759580381-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MMJo7oHWsP2ZtS_td9K%2F-MNMxVUPJE0J2YwFplKo%2F-MNMxd66w3uUDIKqWAHl%2F%E5%95%86%E5%93%81%E5%88%97%E8%A1%A8.png?alt=media\&token=4ac10120-2309-4e48-8aed-c52fa4ff618a)

### 设置

* 标题：设置标题文案
* 描述：设置描述文案
* 查看更多商品：开启后显示“查看更多商品“按钮并跳转到相应专辑页
* 文字布局：
  * 居左：文字（标签，商品标题，价格）居左
  * 居中：文字（标签，商品标题，价格）居中
* 格子间距：可设置商品与商品之间的间距为15px, 20px, 30px, 40px
* 商品分栏：可设置把商品分为2-6栏
* 商品行数：可设置展示商品的行数为1-3行

![](https://2759580381-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MMJo7oHWsP2ZtS_td9K%2F-MNMxVUPJE0J2YwFplKo%2F-MNMxiET6i6WmEg7OkD-%2F%E5%95%86%E5%93%81%E5%88%97%E8%A1%A8-%E8%AE%BE%E7%BD%AE.png?alt=media\&token=96419550-c40f-4ab0-a38d-85ef7c4aa6db)

### 字体排版

* 开启标题全大写：支持快速开启标题全大写
* 标题字号
* 标题字间距
* 描述字号
* 描述字间距
* 描述行高

![](https://2759580381-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MMJo7oHWsP2ZtS_td9K%2F-MNMxVUPJE0J2YwFplKo%2F-MNMyPWWsT24q-2G6L4x%2F%E5%95%86%E5%93%81%E5%88%97%E8%A1%A8-%E5%AD%97%E4%BD%93%E6%8E%92%E7%89%88.png?alt=media\&token=a3993101-776f-4c4c-bd17-72462384edce)

### 颜色

* 背景：设置卡片背景颜&#x8272;***（建议使用浅色背景）***
* 标题：设置标题颜色
* 描述：设置描述颜色
* 按钮边框：设置按钮边框颜色
* 按钮背景：设置按钮背景颜色
* 按钮文字：设置按钮文字颜色

![](https://2759580381-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MMJo7oHWsP2ZtS_td9K%2F-MNMxVUPJE0J2YwFplKo%2F-MNMyUjmfYMRl9SVkWgN%2F%E5%95%86%E5%93%81%E5%88%97%E8%A1%A8-%E9%A2%9C%E8%89%B2.png?alt=media\&token=1245877c-a10a-42cd-bba1-392d0d33729f)

### 布局

* 内容留白：设置当前图标文字卡片上，下，左，右的留&#x767D;***（单位为px,  只需输入数值，上下不输入时不留白，左右不输入时默认跟随全局）***
* 最大内容宽度：卡片内容的最大宽&#x5EA6;***（单位为px,  只需输入数值，不输入时默认跟随全局内容宽度）***

![](https://2759580381-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MMJo7oHWsP2ZtS_td9K%2F-MNMxVUPJE0J2YwFplKo%2F-MNMyk8kkoCH9iUrABX2%2F%E5%95%86%E5%93%81%E5%88%97%E8%A1%A8-%E5%B8%83%E5%B1%80.png?alt=media\&token=13a36212-4968-4e57-aae9-daf7cd7bfb09)
