Add product variant images to swatch

Highlighted
Excursionist
20 0 3

Hey there,

I implemented a swatch variant selector in a product page with a help of an tutorial video, but in that I was able to add swatches with just a color pic that I have in the assets folder... I would like to implement now variant images to be in a place of the color pics that I currently have.

 

 

<label>{{option.name}}</label>
                    {%assign index = forloop.index %}  
                    <div class="variant-swatches">
                      {% for value in option.values %}  
                        <input class="single-option-selector-{{ section.id }}" id="color-{{forloop.index}}" type="radio" name="color" value="{{ value | escape }}" data-index="option{{index}}" {% if option.selected_value == value %}checked{% endif %}/>
                        <label for="color-{{forloop.index}}">
                            <img src="{{ product.selected_or_first_available_variant.featured_image | img_url: "small" }}"/>
                        </label>
                      {% endfor %}       
                    </div>

 

 

The close that I could get on implementing this feature was by adding "product.selected.featured_image" to the image src but with this, all the pics on the swatch are the same. (the first one selected as the parameter said). I feel this can possible be an easy fix, like finding the rich parameter to the img src but I'm not familiar with HTML and can't really find usefull info do to it by myself.

I also have {{value}} in a code wich can possible help we came to a solution since I just need to know a way to get that {{value}} correspondent picture of the product. Any thoughts?

1 Like
Highlighted
Shopify Partner
7457 1032 2592

@DaamnShop 

Welcome to the Shopify community!
and Thanks for your Good question.

Please share your site URL,
So I will check and provide a solution here.

please flow this step

https://community.shopify.com/c/Shopify-Design/Product-pages-Add-color-swatches-to-products/td-p/616...

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
1 Like
Highlighted
Excursionist
20 0 3

Hey @KetanKumar,

Thanks for helping me out! I saw that article too but it's different from what I want to do sinc eit doesnt have the variant pictures on it for me to navigate throught prodcut variants... It only display the colors and thats what I have for now

https://daamnshop.tk/collections/best-sellers/products/comfy-beach-sofa
pass: Fabio

0 Likes
Highlighted
Shopify Partner
7457 1032 2592

@DaamnShop 

Thanks but sorry i can't see any product swatch can you please add give me product link

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
1 Like
Highlighted
Excursionist
20 0 3

@KetanKumar  Yeah sure

https://daamnshop.tk/collections/best-sellers/products/comfy-beach-sofa

You can see it above the add to cart buttom

0 Likes
Highlighted
Shopify Partner
7457 1032 2592

do you have upload variant.featured_image on product admin?

i can't see thi

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
1 Like
Highlighted
Excursionist
20 0 3

What do you mean with product admin? I changed the line of code wich takes the variant image to show up to <img src="{{variant.featured_image | img_url: "small" }}"/> and still not working yet

0 Likes
Highlighted
Excursionist
20 0 3

Ok, I understand... Yes I uploaded every variant.featured image to the product and as you can see they work ok with the variant options

Capturar.JPG

0 Likes
Highlighted
Shopify Partner
7457 1032 2592

no see this step

https://help.shopify.com/en/manual/products/product-media/add-images-variants

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
1 Like
Highlighted
Excursionist
20 0 3

Yeah, already added it, If you test it on the product page youll see it's working... 

 

Capturar.JPG

0 Likes