How to have multiple variant images appear on product page?

[shopfied4010]

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 

[Shadab_dev]

@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.

Thanks

[rapskivor]

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

[rapskivor]

and now i read what the guy below said 😄

[Shadab_dev]

@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

[Small_Task_Help]

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

<div class="variant-colors">
    {% for variant in product.variants %}
        {% if variant.available %}
            <label class="color-swatch" style="background-color: {{ variant.option1 | handleize }};" data-variant-id="{{ variant.id }}" title="{{ variant.option1 }}">
                <input type="radio" name="variant" value="{{ variant.id }}" class="variant-input">
            </label>
        {% endif %}
    {% endfor %}
</div>

need to add css and javascript as well

[Hey_Jak]

Here is a free solution