> For the complete documentation index, see [llms.txt](https://ascent.webvista.studio/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ascent.webvista.studio/webvista-studio-docs/main-pages/main-product/yin-cang-qi-ta-bian-ti-tu-pian.md).

# 隐藏其它变体图片

隐藏其它变体图片效果预览：

{% embed url="<https://ascentelevated.myshopify.com/products/midtown-tennis-skirt8?variant=50047753912604>" %}

通过为产品图片添加 `alt` 属性，将图片按变体分组，可以实现仅显示当前变体图片集合的效果。以下是具体步骤：

<figure><img src="/files/gq3aZNJxg1h4uctOKMXA" alt=""><figcaption><p>只显示当前变体的图片集合</p></figcaption></figure>

### 给产品图片添加Alt 属性

在产品编辑页面中，选择需要分组的图片并为其添加 `alt` 属性值，例如 `###Purple`

相同 `alt` 属性值（带有 `###` 前缀）的图片会被归为同一组。

{% hint style="warning" %}
`alt` 属性值必须以 `###` 作为前缀，才能实现分组功能。
{% endhint %}

<figure><img src="/files/GXdK98AYmkjeqJCyiRGg" alt=""><figcaption><p>添加 Alt 属性值</p></figcaption></figure>

### 设置变体图片

在变体设置中，为每个变体指定主图，主图所在分组的所有图片将在选择该变体时显示。

<figure><img src="/files/tqLHFSsAqzOcVcJ362tq" alt=""><figcaption></figcaption></figure>

### 启用隐藏其它变体图片设置

在模板编辑页面，进入产品设置，开启“隐藏其他变体图片”选项。开启后，仅显示当前变体的图片组，隐藏其他图片。

<figure><img src="/files/LJG7rXJaFAucQUK7wkZH" alt=""><figcaption></figcaption></figure>