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

BrucesWaynee
Tourist
7 0 2

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 

Replies 17 (17)

Made4uo-Ribe
Shopify Partner
5991 1443 1782

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. 

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
For FREE, premium codes, and trusted, knowledgeable Shopify developers, visit us at

Made4uo.com


BrucesWaynee
Tourist
7 0 2

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
Shopify Partner
5991 1443 1782

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. 

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
For FREE, premium codes, and trusted, knowledgeable Shopify developers, visit us at

Made4uo.com


BrucesWaynee
Tourist
7 0 2

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

Made4uo-Ribe
Shopify Partner
5991 1443 1782

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

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
For FREE, premium codes, and trusted, knowledgeable Shopify developers, visit us at

Made4uo.com


Mireta
Excursionist
20 0 1

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
Tourist
7 0 2

This is still up, searching for help 🙂 

Guleria
Shopify Partner
3084 604 861

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

- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on store Hire me.
- Email: guleriathakur43@gmail.com - Skype: navrocks1 ,
- Try GEMPAGES a great page builder
-Advance Search Filter
BrucesWaynee
Tourist
7 0 2

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
Shopify Partner
1045 144 149

Try this code instruction. 

Need a Shopify developer?
Hire us at WebSensePro
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel or buy us a Cofee here

MRamzan
Shopify Partner
165 1 21

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

 

Hire Me:

WhatsApp: +91-9145985880
Email: mohdramzaan112@gmail.com
Skype: mohdramzaan112
ahmadirxhad
Visitor
1 0 1

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
Visitor
1 0 0

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

scaleupprint
Shopify Partner
40 4 11

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

If you find my post helpful, please like and accept solution
Advanced Product Customizer Image Swatch, Color Swatch, unlimited product options, product designer for personalized products
Email: info@scaleupprint.comFor Shopify tips & tricks follow our YouTube channel
Mireta
Excursionist
20 0 1

Hi @scaleupprint, 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!

scaleupprint
Shopify Partner
40 4 11

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

If you find my post helpful, please like and accept solution
Advanced Product Customizer Image Swatch, Color Swatch, unlimited product options, product designer for personalized products
Email: info@scaleupprint.comFor Shopify tips & tricks follow our YouTube channel

topnewyork
Navigator
274 30 40

@BrucesWaynee 

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

Need a Shopify developer?
Hire us at topnewyorkwebdesign.com
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel