> 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/two-options-configuration.md).

# Two Options Configuration

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

Open the product and create image sets for each Color and Size variants. Rename the images in sequence to keep them organized.

For example, for a product with four Color and Size variants:

<table><thead><tr><th width="194">Option</th><th width="165">Image Count</th><th>Images renamed</th></tr></thead><tbody><tr><td>Yellow-Small</td><td>3 images</td><td>Yellow-S1, Yellow-S2, Yellow-S3</td></tr><tr><td>Yellow-Medium</td><td>2 images</td><td>Yellow-M1, Yellow-M2</td></tr><tr><td>Blue-Small</td><td>2 images</td><td>Blue-S1, Blue-S2</td></tr><tr><td><strong>Blue-Large</strong></td><td>2 images</td><td>Blue-M1, Blue-M2</td></tr><tr><td><strong>Green-Medium</strong></td><td>2 images</td><td>Green-M1, Green-M2</td></tr><tr><td><strong>Orange-Large</strong></td><td>2 images</td><td>Orange-L1, Orange-L2</td></tr></tbody></table>

Arrange all color images sequentially.

{% hint style="info" %}
***Note:  To ensure the correct first image is assigned to each variant, rename color & size images in sequence (For example, Black (Black-S1, Black-S2, Black-S3), and assign Black-S1 to the Black variant."***
{% endhint %}

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

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

* Click the **arrow icon** next to the Colour option to open its variants.

{% 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="/files/TxCzQ0xbeghxGe3kqUjJ" alt=""><figcaption></figcaption></figure>

* Under each Color, select the relevant **Color**-**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;

<table><thead><tr><th width="162">Search Image</th><th>Assigned to the variant</th></tr></thead><tbody><tr><td>Yellow-S1</td><td>Yellow-Small</td></tr><tr><td>Yellow-M1</td><td>Yellow-Medium</td></tr><tr><td><strong>Blue-L1</strong></td><td> <strong>Blue-Large</strong></td></tr><tr><td><strong>Green-M1</strong></td><td><strong>Green-Medium</strong></td></tr><tr><td><strong>Orange-L1</strong></td><td><strong>Orange-Large</strong></td></tr></tbody></table>

Repeat this process for all colour–size variant combinations.

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

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

* Repeat this for all colour–size combinations.

## Step 3: Configuration Done

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

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

### Step 4: Final Output

The images of the selected variant are visible as expected.

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