# 产品卡片

此设置允许您全局设置产品卡片的显示效果，确保产品展示符合品牌风格并提升用户体验。

### **基础设置**

1. **显示供应商**:
   * 启用此选项后，产品卡片中将显示供应商名称，有助于用户了解产品的来源信息。
2. **限制标题长度：**
   * 启用该选项后，卡片产品标题长度被限制在 30 字符以内。
3. **启用快速添加按钮**:
   * 启用此选项后，产品卡片上将显示快速添加购物车的按钮，用户可以直接将产品添加到购物车中，提升购物体验的便利性。
   * 可设置添加按钮图标，可选项有：**眼睛**，**购物车**，**袋子**

### **产品图片设置**

1. **媒体适应：**
   * 可选择的填充方式有：**覆盖**（撑满）和**包含**（保持原图比例）。
2. **媒体图像内边距**:
   * 通过滑块调整产品图片的内边距，您可以控制图片周围的空白区域，以实现最佳的视觉效果。
3. **媒体图片背景透明度：**
   * 媒体图片背景的颜色和文字颜色一致，通过该选项可设置背景颜色透明度，适合产品图片为透明图片的情况下使用。
4. **悬停显示第二张图片**:
   * 启用此选项后，当用户将鼠标悬停在产品图片上时，将显示产品的第二张图片。此功能可以帮助用户在不离开当前页面的情况下查看产品的不同角度或颜色。
5. **悬停时图片切换方式：**
   * 支持的选项有**淡入**和**推出。**

### **颜色/图像样本设置**

1. **启用颜色/图像样本**:
   * 启用此选项后，产品卡片将显示第一个关联了[颜色元字段](https://help.shopify.com/manual/custom-data/metafields/category-metafields/using-category-metafields)的多属性，显示效果如下：\
     ![](https://311909351-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4wWUtlp1MoEyUGy5ARSJ%2Fuploads%2Fgit-blob-91bf64bf7847452daf64995212f4837a043d8042%2Fimage.png?alt=media)
2. **变体图片预览类型**:
   * 启用此选项后，产品卡片将显示产品的变体图片，显示效果如下：\
     ![](https://311909351-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4wWUtlp1MoEyUGy5ARSJ%2Fuploads%2Fgit-blob-606c8081524423b939379168acef59a0c268bb8d%2Fimage.png?alt=media)
   * <mark style="color:orange;">**注意：**</mark><mark style="color:orange;">需要在产品编辑页面为每个变体添加图片</mark>

### **产品评分设置**

1. **显示产品评分**:
   * 启用此选项后，产品卡片将显示产品的评分，帮助用户做出购买决策。
   * <mark style="color:orange;">**注意**</mark><mark style="color:orange;">: 产品评分功能需要安装第三方产品评价应用，并且该产品必须拥有客户评价数据才能显示评分。推荐的评价应用包括 Alireview、Loox Review、Judge.me 等。确保这些应用已正确安装和配置，以便在产品卡片上显示评分信息。</mark>
2. **星星大小**:
   * 设置产品评分星星的大小，可以选择小、中、大三种尺寸，确保评分显示符合页面设计。
3. **显示评分**:
   * 启用此选项后，将显示产品的评分数值，为用户提供更多产品参考信息。