Multiple images variant in Shopify

Multiple images variant in Shopify

sunday_april
Tourist
15 0 0

Hi all,

I followed this instruction (https://shopifytheme.blog/multiple-variant-images-in-shopify/) in order to make my variants display their selected images only on my product page. However, after creating new metafields and editing the codes, variant images didn't appear when selected. Can someone help me to troubleshoot this? 

I'm on Dawn 15.3.0

Link: https://0h7rnawa3ilg7msd-58952089718.shopifypreview.com
Product Name: Dogpack 

Thank you!!

Reply 1 (1)

EcomGraduates
Shopify Partner
853 71 124

shopify only lets you assign one image per variant by default but you can totally make it work with a little extra code

what you do is assign multiple product images with the same alt text or use a naming system that links them to the variant like all the red variant images have "red" in the alt or filename

then in your theme you write a lil JavaScript that listens for the variant change and shows only the images that match that variant and hides the others

you can also use app liek Variant Image Automator if you don’t wanna code it out but if you want to do it yourself it’s something like this

first give your images a naming pattern like
red-shirt-1
red-shirt-2
blue-shirt-1
blue-shirt-2

then in your code
when the variant changes
you loop through the images and check if the filename or alt matches the variant name and then show/hide accordingly


 If this fixed your issue, likes and accepting as a solution are highly appreciated
|  Build an online presence with our custom-built Shopify Theme: EcomifyTheme
|  Check out our reviews: Trustpilot Reviews
|  We are Shopify Partners: EcomGraduates Shopify Partner