How to have multiple variant images appear on product page?

How to have multiple variant images appear on product page?

shopfied4010
Visitor
1 0 0

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 Shopify picture variant example.pngShopify picture variant example 2 by the side.png

Replies 5 (5)

Shadab_dev
Shopify Partner
160 5 18

@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

Thanks



If this is helpful, please Like and Accept the solution.
Buy me Coffee, if you feel i was helpful. Definitely a motivation to carry out gutting solutions. Need help with shopify liquid or any project in web dev- Feel free to Email Me

Thanks
rapskivor
Visitor
2 0 0

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

rapskivor
Visitor
2 0 0

and now i read what the guy below said 😄

Shadab_dev
Shopify Partner
160 5 18

@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

If this is helpful, please Like and Accept the solution.
Buy me Coffee, if you feel i was helpful. Definitely a motivation to carry out gutting solutions. Need help with shopify liquid or any project in web dev- Feel free to Email Me

Thanks

Small_Task_Help
Shopify Partner
528 16 36

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

Click here to Contact and Get Shopify Store Help
E-mail - hi@ecommercesmalltask.com
We are Shopify Experts   from Ecommerce Small Task Company.