Show only variant images for selected variant | Dawn 9.0.0

[Florina88]

Hi all,

I would like to assign more than one image to each product variant so the customer will see only the black handbag when selecting the black variant, only the brown handbag when selecting the brown variant, etc. on the product page.

I'm comfortable with coding and I found great tutorials for older versions of Dawn, but these don't work for the most recent version 9.0.0.

Can anyone help?

[magecomp]

Hello @Florina88 

Try this in case this helps

{% for variant in product.variants %}
  {% if variant.selected %}
    <img src="{{ variant.image.src }}" alt="{{ variant.title }}" />
  {% endif %}
{% endfor %}

This code will loop through the product variants and display the image for the selected variant.

Here is an example of how this code would look in a product template:

<div class="product-image">
  {% for variant in product.variants %}
    {% if variant.selected %}
      <img src="{{ variant.image.src }}" alt="{{ variant.title }}" />
    {% endif %}
  {% endfor %}
</div>

This code should display the image for the selected product variant on the product page.

[Thomas-1010]

hi, Im trying to show only the specific pictures related to the (color) variant of each product. is this the code necessary? could you please clarify the process of where to paste it? many thanks

[NomtechSolution]

1. Open the product-template.liquid file in your theme editor.
2. Locate the section where the variant selection options are being rendered. This is usually done using the form element and the variant object.
3. Inside the loop that renders each variant, you can access the variant.image object to display the corresponding variant image. To display all the images associated with the variant, you can loop through variant.images and render each image.
4. Update your code to include a loop that displays all the variant images. Here's an example:

{% for variant in product.variants %}
  <option value="{{ variant.id }}">{{ variant.title }}</option>
{% endfor %}

...

{% for variant in product.variants %}
  {% if variant.image %}
    {% for image in variant.images %}
      <img src="{{ image.src | img_url }}" alt="{{ image.alt }}" />
    {% endfor %}
  {% endif %}
{% endfor %}
​

In the above example, the first loop renders the variant options in the variant selector. The second loop checks if the variant has an image associated with it (variant.image). If it does, it loops through each image (variant.images) and renders them using the img tag.

[Florina88]

Hi @NomtechSolution and @magecomp, thanks for your suggestions. However, I'm not having trouble displaying the variant image (the image that is assigned to the variant), but I want to make sure that - besides the assigned variant image - only images of the same variant appear in the thumnails.

Or in other words: I want to assign more than one image to each product variant. Per default, it is only possible to assign one single image to each variant.
Any ideas?

[magecomp]

https://apps.shopify.com/easy-variant-images
This app can help you in that case.

[Florina88]

I've looked for apps, but I don't want to pay $ 7,50 per month and up for this basic functionality. It should be possible to change the code to achieve this. Even better, the next Update of Dawn should offer the option to assign more than one image to each variant, and also have global images that show for each variant of a product. Just a thought...

[Thomas-1010]

hi, is this an alternative to the previous code posted?

[gr_trading]

Hi @Florina88 

we did this for DAWN 11 successfully.

If need a similar solution

[Atoban]

Hi, I followed your youtube tutorial using Dawn 11.0, but sadly I dont end up with what you show here. When selecting a variant, nothing happens. All of the images have the correct variant alt text to them, but it doesn't work.

My guess is that "Hide other variants’ media after selecting a variant" option is only designed to manage a single image per variant, the one that you can assign to a variant in the product editor page.

Are you using a standart Dawn version for this?

[MRamzan]

Here we have the perfect FREE solution. I solved it.

[Atoban]

Thank you for your response. After taking a step back at this, I realized that having just a color as an alt text could be too harmful to SEO to be worth it. This alt-text workaround might be interesting for some, but I don't want to risk it. Again, thank you for your time and your work.

Additional info: I got in touch with a proper Shopify Theme developper, and he basically told me "deal with it, we won't help. Hire a guy if you want to."

So yeah, this feature should be native on Dawn without using alt text which is already dedicated to SEO, but for whatever reason it's not available or planned. Seems to be some serious rocket science.

[gr_trading]

Hi @Atoban 

I understand your concern about the SEO impact of unwanted ALT text, this feature can also be achieved using the metafield.

Ping us on WhatsApp or e-mail if interested. Details are in the post footer.

[scaleupprint]

Hi @Atoban 

I hope you are doing well.

Instead of using alt-text, we can achieve showing the images of selected variant using the variants metafields as well. Here are the steps to do so -

1. Create variant metafields to store name of images
2. Add image names as values in product variant metafield
3. Apply a custom code in liquid to identify the images of variants
4. Add JS code to show only selected variant images.

Here is a demo video to show above steps: https://youtu.be/E3TKR5bb-B4

Please let me know if more details are needed.

Thanks & Regards,

Scale-up print

[scaleupprint]

Hi @Florina88 

I hope you are doing well.

We can achieve showing the images of selected variant using the variants metafields as well. Here are the steps to do so -

1. Create variant metafields to store name of images
2. Add image names as values in product variant metafield
3. Apply a custom code in liquid to identify the images of variants
4. Add JS code to show only selected variant images.

Here is a demo video to show above steps in the Dawn theme 12.0.0: https://youtu.be/E3TKR5bb-B4

Please let me know if more details are needed.

Thanks & Regards,

Scale-up print