Have your say in Community Polls: What was/is your greatest motivation to start your own business?

Re: how to show only selected variant images dawn (and correct color pictures in the thumbnail carou

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 20 (20)

Made4uo-Ribe
Shopify Partner
9035 2160 2664

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. 

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
Create custom Shopify pages effortlessly with PageFly's drag-and-drop ⚙️.
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
9035 2160 2664

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. 

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
Create custom Shopify pages effortlessly with PageFly's drag-and-drop ⚙️.
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
9035 2160 2664

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

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
Create custom Shopify pages effortlessly with PageFly's drag-and-drop ⚙️.
farid-movsumov
Shopify Partner
99 6 32

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
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
3643 733 1026

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

- Drop an email   if you are looking for quick fix or any customization
- Email: guleriathakur43@gmail.com
- Try GEMPAGES a great page builder
- If you want to help me please PAYPAL
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
1288 145 166

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

Free Shopify Beginner Tutorial

MRamzan
Shopify Partner
392 3 36

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
Tourist
5 0 1

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

Vivek_goyal
Shopify Partner
53 5 14

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

ScalePrint Designer & Variants: Offer customizable products in your Shopify store with ease. (Try for free)
Need a Shopify developer? Hire Us
Email: info@scaleupprint.com For Shopify tips & tricks follow our YouTube channel
Mireta
Excursionist
20 0 1

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
Shopify Partner
53 5 14

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

ScalePrint Designer & Variants: Offer customizable products in your Shopify store with ease. (Try for free)
Need a Shopify developer? Hire Us
Email: info@scaleupprint.com For Shopify tips & tricks follow our YouTube channel

topnewyork
Globetrotter
748 124 139

@BrucesWaynee 

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

Need a Shopify developer?
Hire us at Top New York Web Design
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Try Big Bulk Discount To Boost Your Store Sales with Volume/Tier Discount

MRamzan
Shopify Partner
392 3 36

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

 

Hire Me:

WhatsApp: +91-9145985880
Email: mohdramzaan112@gmail.com
Skype: mohdramzaan112

umidaydemir
Shopify Partner
24 0 0

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/