# 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**.

For example, if your product has three options (Color, Size and Material), combinations with different image sets:

* **Yellow / Small** – 3 images: Yellow-S1, Yellow-S2, Yellow-S3
* **Yellow / Medium** – 2 images: Yellow-M1, Yellow-M2 &#x20;
* **Blue / Small** – 2 images: Blue-S1, Blue-S2
* **Blue / Large** – 2 images: Blue-M1, Blue-M2
* **Green / Medium** – 2 images: Green-M1, Green-M2
* **Orange / Large** – 2 images: Orange-L1, Orange-L2

Arrange all color images sequentially.

{% hint style="info" %}
***Note:  To ensure the correct first image is assigned to each variant, rename color images in sequence (e.g., Black-1, Black-2, Black-3), and assign Black-1 to the Black variant."***
{% endhint %}

<figure><img src="https://3313959449-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhDIlh1V92g9sY7zFnFuS%2Fuploads%2Fy1HAzpWcGBrr9yAyNYNY%2FScreenshot_1.png?alt=media&#x26;token=15d3c801-e8db-4e8c-9d5d-09e38cb995cb" alt=""><figcaption></figcaption></figure>

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

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

<figure><img src="https://3313959449-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhDIlh1V92g9sY7zFnFuS%2Fuploads%2FtV2A3R8Ft8YXe2USt7F5%2FScreenshot_3.png?alt=media&#x26;token=dd16451e-abd5-4788-8557-542cc865db32" alt=""><figcaption></figcaption></figure>

* Click the **arrow icon** next to the Colour option to open its variants.
* Under each Color, select the relevant **Size** variant image.

For example:&#x20;

Select **Yellow-S1** for the **Yellow / Small** variant\
Select **Yellow-M1** for the **Yellow / Medium** variant\
Select **Blue-L1** for the **Blue / Large** variant\
Select **Green-1** for the **Green / Medium** variant\
Select **Orange-L1** for the **Orange / Large** variant

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%2FGo2jsmnCF6pe4B3ruJ1F%2FScreenshot_2.png?alt=media&#x26;token=3e67c8ae-731c-4e62-b4c2-7a2a0d7ddd90" alt=""><figcaption></figcaption></figure>

{% embed url="<https://vimeo.com/1139224184?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%2FZOvZkqep5e3reOzqtJOs%2FFinal-output.png?alt=media&#x26;token=a76e18d8-841d-45f0-9687-2cd625f36bf9" 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%2FogQDhNJXtMJ8RtRnFeDX%2F2-options.gif?alt=media&#x26;token=db4cb41e-59fb-4273-b565-ca2111391c09" alt=""><figcaption></figcaption></figure>
