> For the complete documentation index, see [llms.txt](https://help.spicegems.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.spicegems.com/evi-easy-variant-images/configure-multiple-images-on-the-product-variant/three-options-configuration.md).

# Three Options Configuration

## Step-1 **Add Product Images & Create Variant-Based Image Sets**

Open the product in your store admin and create image sets based on **Color, Size and Material variants**. Rename the images in sequence to keep them organized.

For example, if your product has three options — **Color, Size, and Material**, the image sets can be named using short initials of their variant combinations. 

For Yellow-Cotton-Small variant, the first picture in the set is named as YCS-1

<table><thead><tr><th width="224">Option</th><th width="156">Image Count</th><th>Images renamed </th></tr></thead><tbody><tr><td><strong>Yellow-Cotton-Small (YCS)</strong></td><td>3 images</td><td>YCS-1, YCS-2, YCS-3 </td></tr><tr><td>Yellow-<strong>Cotton-Medium (YCM)</strong></td><td>2 images</td><td>YCM-1, YCM-2</td></tr><tr><td><strong>Yellow-Linen-Small (YLS)</strong></td><td>3 images</td><td>YLS-1, YLS-2, YLS-3</td></tr><tr><td>Blue-Linen-Small (BLS)</td><td>2 images</td><td>BLS-1, BLS-2</td></tr><tr><td>Blue-Linen-Large (BLL)</td><td>3 images</td><td>BLL-1, BLL-2, BLL-3</td></tr><tr><td>Green-Cotton-Small (GCS)</td><td>3 images</td><td>GCS-1, GCS-2, GCS-3 </td></tr></tbody></table>

Arrange all color images sequentially.

{% hint style="info" %}
***Note:** To ensure the correct first image is assigned to each variant, please rename your images in a clear sequence based on **Color–Size–Material**.*

*For example:*

* ***Black – Medium – Cotton** → rename images as **BMC-1, BMC-2, BMC-3***
* *Assign **BMC-1** as the first image for the **Black / Medium / Cotton** variant.*

*Following this naming order will help the system correctly map images to their respective variants.*
{% endhint %}

<figure><img src="https://3313959449-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhDIlh1V92g9sY7zFnFuS%2Fuploads%2FFAWvg7ZBU0w46qhJ9TOe%2FScreenshot_1.png?alt=media&amp;token=55d0feed-d66c-4387-8606-37fef755d5a8" alt=""><figcaption></figcaption></figure>

## Step 2: **Assign Images to Each Variant Combination**

* Click on the arrow icon to open the variants of the color.

{% hint style="info" %}
***Note:** Shopify allows only **one featured image per variant**. When assigning images to a variant, make sure to select **the first image from the image set created for that specific variant**. This image will act as the variant’s featured image when the variant is selected.*
{% endhint %}

<figure><img src="https://3313959449-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhDIlh1V92g9sY7zFnFuS%2Fuploads%2F0BlSWFglHKxjbqQ4LZ8p%2FScreenshot_2.png?alt=media&amp;token=c9f17c6c-b182-43d6-9bd9-752a3fe4efc0" alt=""><figcaption></figcaption></figure>

* Under each Color, select the relevant **Size** variant image.

You can refer to the table above to see the image names assigned to each respective Color and Size variant.

For example:&#x20;

| Image Name (Search) | Assigned to the variant |
| ------------------- | ----------------------- |
| YCS-1               | **Yellow-Cotton-Small** |
| BCS-1               | Blue-Cotton-Small       |
| GLM-1               | Green-Linen-Medium      |
| RLL-1               | Red-Linen-Large         |

Repeat this process for all Color–Size variant combinations.

<figure><img src="https://3313959449-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhDIlh1V92g9sY7zFnFuS%2Fuploads%2F8t1I5OEU2k6VJ6oGiH4I%2FScreenshot_3.png?alt=media&amp;token=d0aa33cb-fc9e-4f3b-a826-25b582028e93" alt=""><figcaption></figcaption></figure>

{% embed url="<https://vimeo.com/1148288685?fe=ci&fl=sv&share=copy>" %}

* Repeat this for all Color–Size combinations.

## Step 3: Configuration Done

The final set up will look just like the snapshot below.

<figure><img src="https://3313959449-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhDIlh1V92g9sY7zFnFuS%2Fuploads%2F5QxdoJOnOZgxTZ7oNoXm%2FScreenshot_4.png?alt=media&amp;token=6bc56087-e681-4df4-9ac1-4e039c6fd04c" alt=""><figcaption></figcaption></figure>

### Step 4: Final Output

The images of the selected variant are visible as expected.

<figure><img src="https://3313959449-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhDIlh1V92g9sY7zFnFuS%2Fuploads%2Fu78yA69iDZ8kNPikKgqf%2FEVI-3-Options.gif?alt=media&amp;token=044cff4b-e98e-4f7e-b324-5e09da9d2665" alt=""><figcaption></figcaption></figure>