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.
{%assign index = forloop.index %}
{% for value in option.values %}
{% endfor %}
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?
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
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
Already have the variant.featured_media for all the variants and I have also the variable {{value}} in the function which gives me the variant name. Is there anything I can do to get the variant pictures from that {{value}} data?
hey not sure if you found a solution for this, but I encountered something similar and here is a way that worked for me! Basically - you need to create a variant array and loop through it using Liquid. Here is the code that worked for me. (I would just tweak as necessary in your codebase).
