# How to show Images of the Selected Variant only

{% hint style="warning" %}
This feature is advanced so make sure the App is properly working on your store before continuing.
{% endhint %}

<figure><img src="https://content.gitbook.com/content/FsTehcp0UagrhFdqy3QI/blobs/RM3jyWK5275jtGHWIgEa/Screenshot%20-%202023-04-20T193906.061.png" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Hint: start with one **simple** Product or create a demo Product to understand the base principle. In this example we use a Product with 2 Images per 2 Variants.
{% endhint %}

## Demo Product

In this guide we are going to work on a simple Product that has 4 Images:

<figure><img src="https://content.gitbook.com/content/FsTehcp0UagrhFdqy3QI/blobs/h8bM3i3oK8CLKR9N7k9y/Screenshot%20(27).png" alt=""><figcaption></figcaption></figure>

&#x20;and 2 variants:

<figure><img src="https://content.gitbook.com/content/FsTehcp0UagrhFdqy3QI/blobs/jJVTIpnAGUoBbt7wAsuI/Screenshot%20(28).png" alt=""><figcaption></figcaption></figure>

&#x20;

## Intro

By default Shopify does not allow assigning multiple Images to a Variant. You can only select one Featured Image for each Variant:

<figure><img src="https://content.gitbook.com/content/FsTehcp0UagrhFdqy3QI/blobs/eUwqqn2TfFQoYgGyCGsU/Screenshot%20(29).png" alt=""><figcaption></figcaption></figure>

Most Shopify Themes simply show all Images of a Product and "scroll" to the Featured Image when a Variant changed:

<figure><img src="https://content.gitbook.com/content/FsTehcp0UagrhFdqy3QI/blobs/ol07GCcMUHsSkyTm99TY/Screenshot%20(30).png" alt=""><figcaption></figcaption></figure>

With the help of our Product Page Slider App you will be able to assign multiple Images to a Variant and only show relevant Images for each Variant. For example, if "Blue" Variant is selected - only blue Images will be visible:

<figure><img src="https://content.gitbook.com/content/FsTehcp0UagrhFdqy3QI/blobs/VOkQOrbCYwkuR1Wy1Lq3/Screenshot%20(31).png" alt=""><figcaption></figcaption></figure>

## Step 1: Order your Images

It is very important to keep your Images organized especially when dealing with numerous Variants. For our App to work properly it's required to not mix Images of different Variants.

What it means for our Demo Product is that **all** Images of the "Blue" Variant go first and then followed by all "Sandy" Images. For example, having one "Sandy" Image in between of two "Blue" Images is **not valid**.

You can always reorder Images in the Product Settings page by drag\&dropping them:

<figure><img src="https://content.gitbook.com/content/FsTehcp0UagrhFdqy3QI/blobs/eJhlGhBytSKcmdb8uthW/Screenshot%20(32).png" alt=""><figcaption></figcaption></figure>

## Step 2: Assign Featured Image to Variants

Now you should assign the very first Image of each Variant to it's Featured Image:

<figure><img src="https://content.gitbook.com/content/FsTehcp0UagrhFdqy3QI/blobs/Y4WfYW6blVNekXAPY2S6/Screenshot%20(33).png" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
If you have some Variants that are not supposed to have it's own Images (for example if you have "Size XL") - just leave the Featured Image empty.&#x20;
{% endhint %}



## Step 3: Enable the App's option

In the App's Configuration page go to "Extra Features" Tab. Check the "Show only Selected Variant Images" and click "Apply Changes":

<figure><img src="https://content.gitbook.com/content/FsTehcp0UagrhFdqy3QI/blobs/EtDCWw5mmL6xxAHXZtjY/Screenshot%20-%202023-04-20T193906.061.png" alt=""><figcaption></figcaption></figure>

## Step 4: Open your store and check the result

If you followed all the steps you should see the effect live on your store. If you notice any issue - feel free to contact our support team.



## Extra 1: Can I add Video slides?

Yes, you can add Videos just as Images. Videos will be assigned to Variants following the same convention described above. The only limitation is that a Video cannot be selected as the Featured Image so you should put a Video after the Featured Image.



## Extra 2: Show some Images for all Variants

You can have some Images "Common" for all Variants without the need to duplicate them. For this just put the "Common" Images at the very beginning **before the very first Variant:**

<figure><img src="https://content.gitbook.com/content/FsTehcp0UagrhFdqy3QI/blobs/5HQK9qeXMLRhjioB0lKg/Screenshot%20(35).png" alt=""><figcaption></figcaption></figure>

These "Common" Images will be appended **at the end** for each Variant:

<figure><img src="https://content.gitbook.com/content/FsTehcp0UagrhFdqy3QI/blobs/lNKz23pwcIofG9RYeOkE/Screenshot%20(36).png" alt=""><figcaption></figcaption></figure>

Following this rule you can have as many "Common" Images and Video as needed.

