# 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="https://3264408981-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3ClFZbSMFYUfUOKXAOru%2Fuploads%2FULJzymtjUfu7CL1UOcD2%2Fimagekijvs.jpg?alt=media&#x26;token=e9d0f4bf-609a-4a8d-a7df-a65ff6d347d8" 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="https://3264408981-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3ClFZbSMFYUfUOKXAOru%2Fuploads%2FDZ9xBRyHiApDEWcdlWMX%2Fimagegvzrl.jpg?alt=media&#x26;token=0a3c8734-72a9-4c23-a10b-d61dda11ffae" 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="https://3264408981-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3ClFZbSMFYUfUOKXAOru%2Fuploads%2FnubDFtoVOCx7byoR6GLB%2Fimagedyd1s.jpg?alt=media&#x26;token=29e29946-38b7-47bb-a784-f905e0906d40" 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="https://3264408981-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3ClFZbSMFYUfUOKXAOru%2Fuploads%2FCry2apkarGDK6zQYZ9KY%2Fimage0cn6h.jpg?alt=media&#x26;token=116349ba-815d-4077-86fa-d8f81d2febd4" 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="https://3264408981-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3ClFZbSMFYUfUOKXAOru%2Fuploads%2Ff6VSNYETr8j3sKPGEyIZ%2Fimage078y7.jpg?alt=media&#x26;token=a312bd0e-54d5-48ed-a597-23038fc4bf93" 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="https://3264408981-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3ClFZbSMFYUfUOKXAOru%2Fuploads%2F5nWTBjogGerM4RlgFcSz%2Fimager1i16.jpg?alt=media&#x26;token=93887aff-3146-414a-87f8-ebb9ba5309da" 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.