> For the complete documentation index, see [llms.txt](https://easify.gitbook.io/easify-product-options/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://easify.gitbook.io/easify-product-options/guide-to-options/advanced-features/switch-product-images-upon-option-selection-beta.md).

# Switch Product Images Upon Option Selection (Beta)

*(**Linking Custom Product Options with Product Images**)*

The Image Switcher feature enables you to connect your custom product options to specific product images. When customers select an option on your Shopify product pages, the product image will automatically update to reflect their choice.

{% hint style="info" %}
This feature is available on **Free plan**.
{% endhint %}

{% hint style="info" %}
This feature is applicable for the following option types: [Dropdown](/easify-product-options/guide-to-options/28-option-types/dropdown.md), [Radio Button](/easify-product-options/guide-to-options/28-option-types/radio-buttons.md), [Button](/easify-product-options/guide-to-options/28-option-types/buttons.md), [Checkbox](/easify-product-options/guide-to-options/28-option-types/checkbox.md), [Color Swatch](/easify-product-options/guide-to-options/28-option-types/color-swatches.md), and [Image Swatch](/easify-product-options/guide-to-options/28-option-types/image-swatches.md).
{% endhint %}

{% hint style="info" %}
Images only change on the product page — not in the cart or checkout. Selecting an option switches the image shown; it doesn't select a different variant.
{% endhint %}

[*Example:*](https://easify-custom-product-options.myshopify.com/products/glasses)

{% tabs %}
{% tab title="Black Glasses" %}

<figure><img src="https://3599217945-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1LQaNLzwT65jc247sV0f%2Fuploads%2FVZJwPPRyThEBtwMV2L8W%2Fimage.png?alt=media&amp;token=e98a7e82-8e97-40cd-9ef2-d3aef03de054" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Red Glasses" %}

<figure><img src="https://3599217945-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1LQaNLzwT65jc247sV0f%2Fuploads%2FsWp2nB2ksQdWvX8HXQL7%2Fimage.png?alt=media&amp;token=bfc5c211-0435-4467-91f6-6e1e75f13d6f" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="White Glasses" %}

<figure><img src="https://3599217945-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1LQaNLzwT65jc247sV0f%2Fuploads%2FK1nXGOyWJ7FJiJtD9dCY%2Fimage.png?alt=media&amp;token=fed7dd7e-0791-40c4-9755-650727f9f8e6" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

{% stepper %}
{% step %}

### Add Option Values

In the **Basic settings** tab, enter all the necessary information for your options as you normally would.

The Option value labels you create for the option values will be used in later steps.

<figure><img src="https://3599217945-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1LQaNLzwT65jc247sV0f%2Fuploads%2FFWdQiPuQ576ond9Id35b%2Fimage.png?alt=media&amp;token=beffac6b-9bc0-43de-bdcf-11ba79763021" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}

### Enable Image Mapping

After adding your option values, switch to the **Advanced settings** tab.

Find the checkbox labeled **Change product image on option selection** and select it.

{% hint style="info" %}
This checkbox is not selected by default, so be sure to check it to enable the image mapping feature.
{% endhint %}

<figure><img src="https://3599217945-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1LQaNLzwT65jc247sV0f%2Fuploads%2F8rwwvJ77FSQkmI1vSjC2%2Fimage.png?alt=media&amp;token=4a67b67e-50d2-483c-bb32-668639ff740c" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}

### Upload Product Images

Upload the product images that correspond to your custom options on the Shopify product editing page.

![](https://3599217945-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1LQaNLzwT65jc247sV0f%2Fuploads%2FxeeTHMtpXvYayNUSFQJO%2Fproduct%201024x537.png?alt=media\&token=09c1b85c-6bc4-4d58-ac01-886637387705)
{% endstep %}

{% step %}

### Set Alt Tags for Images

After uploading your images, click on each one to add **Alt text**.

The **Alt text** for each image must match the **Label** of the corresponding option value you created earlier.

This ensures that when customers select an option, the product image switches accordingly.

For example, if your option values are labeled "Pink", "Blue", and "Purple", assign the Alt texts to the images as "Pink", "Blue", and "Purple" respectively.

![](https://3599217945-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1LQaNLzwT65jc247sV0f%2Fuploads%2FhkXMZzwrnztD64U1qMtQ%2Falt%201024x575.png?alt=media\&token=059d4594-5d52-4040-bd47-ea886497ec20)

After entering the Alt text, remember to click **Save** to save your settings.

{% hint style="info" %}
The option value labels must match the Alt text exactly, including capitalization.

Any discrepancies will prevent the image-switching function from working properly.
{% endhint %}
{% endstep %}

{% step %}

### Verify Image Changes

After completing the steps above, visit the product page to ensure that the product images change correctly based on the selected options.
{% endstep %}
{% endstepper %}

## Need Assistance?

This guide is designed to work with most stores. However, if you’ve configured everything correctly and the product image still doesn’t change as expected, there may be a minor adjustment needed in your theme.

Don’t worry! Just reach out to our support team via the **in-app live chat**, and we’ll assist you quickly!
