# Change product image upon option selection

### Step 1. Create Your Options

In the **Basic tab,** enter option values and upload an image that matches or is associated with the product variant you want shown.

**The option value** you created here will be used in later steps.

<figure><img src="/files/3Dm4ZfX3WDW6oSPH806X" alt=""><figcaption></figcaption></figure>

### Step 2. **Enable Image Switching feature**

In the **Advanced settings** tab, select **"Change product image on option selection"**

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

### Step 3: Set the Desktop Layout to "Thumbnail"

* In the Theme Editor, open the **Default Product** template and locate the **Product Information** section.

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

* Update the **Desktop Layout** setting to **Thumbnails**, as this layout will be the foundation for enabling the image change functionality.

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

### Step 4: Upload Your Product Images

* Upload all relevant images to your Shopify product media.
* Ensure the image you want to show for a specific option is already attached to the product.

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

### Step 5. Set Alt Tags for Images

* Click on each image to find **Alt text** field, the **Alt text** of each image must exactly match the **Value title** of its corresponding option value.
* This connection allows the product image to update automatically when a customer selects an option.

For instance, if your option values are **"Cyan Blue"**, **"Green"**, and **"Black"**, you should set the Alt texts of the related images to **"Cyan Blue"**, **"Green"**, and **"Black"** accordingly.

<figure><img src="/files/3wT20QLIPut4PQ82bjOz" alt=""><figcaption></figcaption></figure>

> NOTE: This feature **only works on the product page**. It may not function correctly on other pages like collection or homepage, because those pages usually do not display product image thumbnails in the same dynamic way.

That's it! Your product images will now dynamically change when a customer selects an option.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://options-docs-v2.avisplus.io/storefront-display/change-product-image-upon-option-selection.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.