Show specific images when selecting a variant

Store Design
, ,
1

Hello,
Im trying to show specific images when a variant is selected in DAWN but nothing is working.

For example:

I want the White Caps only to show when selecting the white color variant and make all the other images hidden.
The same thing goes with each color.

I even changed the ALTs on each image but still not working.
Can anyone help me with this? Thanks.
www.studioblank.store

2

you can only hide the images that are attached to the other variants. so if you have 4 images and 4 variants with one connected to each it will work. but if you have 10 images and 4 variants it will only hide the 3 that are attached to the other ones. kinda stinks but that is how it woks.

1 Like
3

I’ve done this to a different store that I was working on few months ago but I lost the custom Liquid code I used.
I remember, I added a string of code in the theme.liquid file and it worked perfectly without giving ALTs to the images.
I will let you know if I found the solution.

4

ah, well lots of things can be done by changing the code. that would be a decent amount of coding as there would need to be a way to select which images go to which variant as there isn’t a way to connect them as is

I’d Google for some instructions on how to code it

GL!

1 Like
5

Hey I think I found the solution but it disables the ability to zoom in the images.

Better than having all images in one variant imo.

Step 1: Add a definition to the variants metafield.
Go to your dashboard > settings > custom data > variants > add definition.
Name it Variant Gallery
Select type “File”
Choose List of Files and save it.

Step 2: Attach the variant images to each variant.
Go to your dashboard > products
Choose the product and scroll down to the variants tab
Select the variant that you want to add images to and scroll down until you see Metadata
Click on Variant Gallery and choose the images you want for that variant (you have to do this step for each variant)

Step 3: Edit product-media-gallery.liquid file
Go to Online Store > Edit code > product-media-gallery.liquid

Replace the entire liquid code with this one.

{% comment %}
  Renders a product media gallery. Should be used with 'media-gallery.js'
  Also see 'product-media-modal'

  Accepts:
  - product: {Object} Product liquid object
  - variant_images: {Array} Product images associated with a variant
  - limit: {Number} (optional) When passed, limits the number of media items to render

  Usage:
  {% render 'product-media-gallery' %}
{% endcomment %}
{%- liquid
  assign has_variant = false
  if product.has_only_default_variant == false
    assign has_variant = true
  endif

  if has_variant
    assign media_count = product.selected_or_first_available_variant.metafields.custom.variant_gallery.value.count
  else
    assign media_count = product.media.size
  endif

  if media_count == 0 or section.settings.mobile_thumbnails == 'show' or section.settings.mobile_thumbnails == 'columns' and media_count < 3
    assign hide_mobile_slider = true
  endif

  if section.settings.media_size == 'large'
    assign media_width = 0.65
  elsif section.settings.media_size == 'medium'
    assign media_width = 0.55
  elsif section.settings.media_size == 'small'
    assign media_width = 0.45
  endif
-%}

Step 4: Add Javascript to product-info.js
Press CTRL + F and find if (!variantFeaturedMediaId) return; and place this code right below it

if (this.querySelector('media-gallery').getAttribute('has_variant') === 'true') {
const mediaGallerySource = this.querySelector('media-gallery');
const mediaGalleryDestination = html.querySelector(`media-gallery`);
mediaGallerySource.outerHTML = mediaGalleryDestination.outerHTML;
return;
}

And that’s all :slightly_smiling_face:
I hope this is clear.
Let me know if you need help!

Reference:
https://youtu.be/uVTO7t6etVs

6

aren’t all you product images the same size?

not sure what the code does.

7

Well yes. Even if your images aren’t the same size, you can still add any image as a variant image to any product using the metadata method mentioned.
Replacing the existing code with this one will make the main product page display the variant images that are connected with the product from the metadata.

Now I’m not sure why the zooming doesn’t work anymore and not only that, I ruined my entire store trying to fix that :{

8

dang. I would like to attach more images to the variants but would not consider doing that with metafields. If I would code something in the admin to do it I would but for me it isn’t a big deal. I understand that something like a clothing website it would be important

1 Like