how to show only selected variant images dawn (and correct color pictures in the thumbnail carousel)

[BrucesWaynee]

Hi,

So i searched the entire webb and youtube on how to only show selected variant images on the product page. For an example, right now when i got to my shop and check the product page, and i choose the black sweatshirt, i can also see the other colors of the sweatshirt in the thumbnail carousel. I only want the thumbnail carousel to show the black color images. 

Im using the Dawn theme for shopify and i already checked this video: 
https://www.youtube.com/watch?v=BclQbxejpCc&ab_channel=WebSensePro

When I apply the code in the video, it works perfectly on the phone. I get the result i want. But when i use the desktop it split the pictures to 4 pictures of the color i want and it only works with the "stacked" option and not the thumbnail carousel option. I can still see the other colors in the thumbnail carousel option. 

Please help a fellow brother out 🙂 

Thanks in advance 

[Made4uo-Ribe]

Hi @BrucesWaynee 

This is a little complex code editing since it needs debugging. However, we have the code available in our website "How to Show Only Selected Variant Images" that works best with Shopify 2.0 free themes  but the code is not free. Other option is to hire a developer to add this feature for you. 

[BrucesWaynee]

Hi,

Which of the bundles is it since theres a lot and what does it cost? Do you guys guarantee customer satisfaction, which means that you will help until i get it exactly as I want? 


Thanks in advance. 

[Made4uo-Ribe]

Hi @BrucesWaynee 

Please check the code description first, and see if that is what you want. If not, you can contact us using Chat with us to customized the code for you. We do not leave our customers hanging. 

[BrucesWaynee]

I have no idea if thats the code I want - dont know anything about coding to be honest

[Made4uo-Ribe]

There is a video that you can view. You can also contact us using Chat with us in the website to assist you better

[farid-movsumov]

Hi @BrucesWaynee I hope you already found the solution to this problem on your shop. I would like to share the solution for people coming from search. We built Rubik Variant Images app which is solving the problem of displaying only selected variant images. I also recorded a video and explained how it works. 

[Mireta]

Hi @Made4uo-Ribe ,

I used your service before for color swatches, the service was great.

I have a question regarding these feature, is there a way to do it without the image Alt?
On step 3 you say "Add the image alt the same as the option. E.g. Option is "White", add a media alt "White." This is case sensitive."

But what if I'm using the Alt text to describe the image and all my images already have text set-up?
Is there another way to get to show the all the images of the selected color?
Thanks

[BrucesWaynee]

This is still up, searching for help 🙂 

[Guleria]

Hello @BrucesWaynee ,

Please note that this process involves editing your theme's code, and it's important to back up your theme and be comfortable with basic coding concepts before making any changes.

Access Theme Customization:

Log in to your Shopify admin panel and navigate to "Online Store" > "Themes." Find the "Dawn" theme and click on "Customize" to access the theme editor.

Edit Product Template:

In the theme editor, look for the option to edit the product template. This is where you'll make changes related to variant images and thumbnail carousels.

Modify Variant Images:

To show only selected variant images, you'll need to modify the product template code to display the appropriate images based on the selected variant. Look for the code that handles variant images. You might find something like this:

{% for image in product.images %}
  <img src="{{ image.src }}" alt="{{ image.alt }}" class="variant-image">
{% endfor %}

You'll need to modify this code to display only the images associated with the selected variant. Here's a simplified example:

{% for variant in product.variants %}
  {% if variant.id == selected_variant_id %}
    <img src="{{ variant.image.src }}" alt="{{ variant.image.alt }}" class="variant-image">
  {% endif %}
{% endfor %}

In this example, selected_variant_id should be replaced with the actual code that retrieves the selected variant's ID.

Correct Color Pictures in Thumbnail Carousel:

To correct color pictures in the thumbnail carousel, you'll need to ensure that each variant's image is associated with the correct color option. This involves assigning appropriate image URLs and alt text to each variant.

Save and Test:

After making these code changes, make sure to save your changes and test the product page to ensure that the variant images and color pictures in the thumbnail carousel are displaying correctly.

Thanks

[BrucesWaynee]

Hi!

Thank you so much for taking your time and helping me. I dont know anything about code but i learn fast. So this is the current code i find in my product-media-gallery.liquid, from 93 to 96: 

93: <li
94:  id="Slide-{{ section.id }}-{{ media.id }}{{ id_append }}"
95: class="product__media-item grid__item slider__slide{% if single_media_visible %} product__media-item--single{% endif %}{% if product.selected_or_first_available_variant.featured_media == null and forloop.index == 1 %} is-active{% endif %}{% if media.media_type != 'image' %} product__media-item--full{% endif %}{% if section.settings.hide_variants and variant_images contains media.src %} product__media-item--variant{% endif %}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--fade-in{% endif %}"

96: data-media-id="{{ section.id }}-{{ media.id }}"

Is the 94 i should replace with: {% for variant in product.variants %}
{% if variant.id == selected_variant_id %}
<img src="{{ variant.image.src }}" alt="{{ variant.image.alt }}" class="variant-image">
{% endif %}
{% endfor %} ?? 

Thanks in advance! 

[websensepro]

Try this code instruction. 

[MRamzan]

Guys you can follow this video. This has solved by just copy and paste code.

[ahmadirxhad]

I tried this method it is working but when we go to the mobile view and swipe the images of the variant the other variant images is shown how to resolve this issue?

[mrgargiu]

Can you provide instructions on how to implement this in Broadcast theme? Thanks!

[Vivek_goyal]

Hi @BrucesWaynee 

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 for 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

[Mireta]

Hi @Vivek_goyal, Finally a method that doesn't use the Alt text but still it's crazy to add all the file names of a color when you have thousands of products. It there a better/faster option?
I'm willing to pay.
Thanks!

[Vivek_goyal]

Hi @Mireta ,

Thank you for reaching out.

I understand that in case of thousands of products, adding file names can be cumbersome task. I believe, we can come up with some better solution with some additional custom code in your case. Kindly DM me with your details.

Thanks & Regards,

Scale-up Print

[topnewyork]

@BrucesWaynee 

Hi, You can do this very easily by following this video.

[MRamzan]

You can try this solution to display selected color images in your store:

[umidaydemir]

Hi,

There isn’t a no-code or no third-party app solution for the Dawn theme. To resolve this issue easily, you can use the Rubik Variant Images app.

You can give it a try: https://apps.shopify.com/rubik-variant-images/