Show only variant images for selected variant | Dawn 9.0.0

Florina88
Tourist
10 1 1

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?

Replies 14 (14)
magecomp
Shopify Partner
255 19 28

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.
 
 
Helping voluntarily. Please like and accept the solution if it helps. Thanks!
Our Bestseller Shopify Apps    |      Mobile App Builder by MageComp    |      Limit Qty Purchase

Need a developer?  Just visit MageComp website
Thomas-1010
New Member
4 0 0

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
Astronaut
1245 112 141
  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.

banned
Florina88
Tourist
10 1 1

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
Shopify Partner
255 19 28

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

Helping voluntarily. Please like and accept the solution if it helps. Thanks!
Our Bestseller Shopify Apps    |      Mobile App Builder by MageComp    |      Limit Qty Purchase

Need a developer?  Just visit MageComp website
Florina88
Tourist
10 1 1

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
New Member
4 0 0

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

gr_trading
Shopify Partner
1403 131 151

Hi @Florina88 

 

we did this for DAWN 11 successfully.

 

If need a similar solution

 

For any custom development WhatsApp or connect at Email ID: gr.trading15@gmail.com for quick consultation. | YouTube Videos
To support Buy Me a Coffee
Atoban
Tourist
6 0 0

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
Shopify Partner
71 1 15

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

 

 

 

Hire Me:

WhatsApp: +91-9145985880
Email: mohdramzaan112@gmail.com
Skype: mohdramzaan112
Atoban
Tourist
6 0 0

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
Shopify Partner
1403 131 151

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.

For any custom development WhatsApp or connect at Email ID: gr.trading15@gmail.com for quick consultation. | YouTube Videos
To support Buy Me a Coffee
scaleupprint
Shopify Partner
25 4 7

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

Email: info@scaleupprint.com, website:www.scaleupprint.com
Try Scale-up Print Designer Web to print designer app for customization feature for your Shopify store.
For Shopify tips & tricks follow our YouTube channel
scaleupprint
Shopify Partner
25 4 7

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

Email: info@scaleupprint.com, website:www.scaleupprint.com
Try Scale-up Print Designer Web to print designer app for customization feature for your Shopify store.
For Shopify tips & tricks follow our YouTube channel