# 显示变体样本

显示颜色样本能让顾客更直观地了解产品外观，减少因色差带来的退货率，并有效提升购物体验与转化率。通过直观且专业的色板展示，店铺不仅能彰显品牌形象与专业度，也能在激烈的电商竞争中更胜一筹。

### 显示颜色样本

如图所示，为产品添加颜色属性。

{% hint style="warning" %}
选择系统提供的颜色选项而非自定义的颜色选项
{% endhint %}

<figure><img src="https://311909351-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4wWUtlp1MoEyUGy5ARSJ%2Fuploads%2Fgit-blob-1d03b0b3fd02545ac952b637c21098d9199125fe%2F%E5%BD%95%E5%B1%8F2024-12-27%20%E4%B8%8B%E5%8D%888.18.41%20(1).gif?alt=media" alt=""><figcaption></figcaption></figure>

添加成功后，颜色样本将自动显示，如下图所示。

<figure><img src="https://311909351-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4wWUtlp1MoEyUGy5ARSJ%2Fuploads%2Fgit-blob-0610bd39ec35138b5bc13c7717cadcee5ae1a3fa%2Fimage.png?alt=media" alt=""><figcaption></figcaption></figure>

### 显示图片样本

首先需要在产品编辑页面为产品变体添加图片。

<figure><img src="https://311909351-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4wWUtlp1MoEyUGy5ARSJ%2Fuploads%2Fgit-blob-30065885fa3ad2bfe459b3dd01051bc9b24b3b92%2F%E5%BD%95%E5%B1%8F2024-12-27%20%E4%B8%8B%E5%8D%888.32.06.gif?alt=media" alt=""><figcaption></figcaption></figure>

接着，在模板编辑页面（产品页面）中，点击“变体选择器”块并启用“显示变体图片”功能。

<figure><img src="https://311909351-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4wWUtlp1MoEyUGy5ARSJ%2Fuploads%2Fgit-blob-f58ca124f3e78ea15a61914b637b01ea1d91ed92%2Fimage.png?alt=media" alt=""><figcaption></figcaption></figure>