How to have multiple variant images appear on product page?

Shopify Discussion
1

Hi

i was able to put variant colors and images in the product details. However i can only display the variant color by drop down box and i want the colors to be displayed either down below or by the side as photos.

which customers can click on then it appears.

I have attached photos as example of what i want,

thanks

Variant images down the bottom
Variant images down the bottom1655×898 192 KB

variant images on the side
variant images on the side1061×709 89.4 KB

2

@shopfied4010 I am sharing my store url and password check out and let me know if you need a feature like this.

https://shadabs-online-store.myshopify.com/
password: reafur

Check out this product.

Shadab_dev_0-1720408770601.png
Shadab_dev_0-1720408770601.png201×358 10.7 KB

Thanks

3

Hi,

You can use Variant Image Automator app or custom code

Open product-template.liquid or main-product.liquid -Add HTML for Color Swatches-Replace the dropdown with clickable color swatches

Example of code


    {% for variant in product.variants %}
        {% if variant.available %}
            
        {% endif %}
    {% endfor %}

need to add css and javascript as well

4

i was lookin around the forum for exactly this feature, how did u do it? Thank you, been lookin for a few hours :sweat_smile:

5

and now i read what the guy below said :grinning_face_with_smiling_eyes:

6

@rapskivor it did take some looking up since the code base of dawn 15.0 is drastically different from previous versions. But alhamdulillah after a lot of testing and stuff it worked out.

Let me know how could i assist you with all the details, your store url and exactly what you need.

Thanks

7

Here is a free solution