Hello,
I’m currently using the Debut theme and I’m looking to use my variant images as my main/first image within the slider slideshow. Clicking the product, the product page loads and has an option for “Color”. What I’m want is for the customer to click on the desired “Color” from the drop down and the variant image associated with that color replaces the first main image within the slideshow. Is this possible? I’ve looked through so many tutorials and I can’t seem to find anything about this. I’ve gotten to the point where the variant images aren’t displayed unless the associated “Color” is selected. Thank you
1 Like
@beaconandharbor
Welcome to the Shopify community!
Thanks for your good question.
Please share your store URL.
So that I will check and let you know the exact solution here.
Hello,
Yes, this is possible, it requires a bit of work with theme and liquid language.
Have fun with Shopify,
Hello @beaconandharbor ,
I have got what you’re willing to achieve on the existing product page with the product variant selection.
This is your store https://beaconandharbor.com/, right? So I did select the color from the dropdown(REF: https://prnt.sc/26xh7lz)) and the image should according to the selected color variant, right?
Let me check with the team and will get back to you with the updates.
Thanks,
Jeet
To explain you better, variant images are stored in the same product images object as every product, but quite roughly. To get images of each variant, it takes some digging and exploring the javascript array and narrowing it for your option (aka option1 == “color”) or so. That would explain a little, have fun with Shopify
beaconandharbor.com, No.3 product is what I’m referring to.
I’ve found my issue. I was getting a “$ is no defined” error under the inspect/console. My issue was that I was trying to use jquery before the jquery library was pulled up. That is the reason the $() function wasn’t working. I just added the jquery library in the theme.liquid file to solve this.