How can I remove product thumbnails while still offering the variants?

Highlighted
New Member
27 0 0

I'm trying to sell multiple colors of Men's and Women's shirts on the same product page - like this: https://www.birdfurtees.com/products/please-let-there-be-a-dog-at-this-party-tshirt

Is there any way to remove the thumbnails, but keep the variants? So when someone selects Men's white, the white variant pops up, but there is no white thumbnail? It just looks really cluttered.

0 Likes
Shopify Staff
Shopify Staff
520 0 58

Hi Joshua!

Liam here from Shopify - thank you for your question :)

Great to see you are looking to optimise exactly how your product pages look, so let's see how we can set this up for you. I have gone ahead and edited your product.liquid file so that the thumbnails below the main image are hidden. However the variant dropdown with still display the correct image according to what is being selected. I left a note on line 25 of the product.liquid to show you what code I have added. 

Hope this helps Joshua, if you have any other questions, just let me know!

Cheers,
Liam

Shopify Guru
support@shopify.com

1 Like
New Member
27 0 0

Liam you're the best! Thank you so so much, I was not expecting a quick answer, and especially not someone to actually fix it for me. Woohoo! This is really great. Just one thing, is it possible to still display selected thumbnails? I do want to keep the photos of the models wearing the shirts, for instance. Sorry to bug you about that. 

0 Likes
Shopify Staff
Shopify Staff
520 0 58

Hi again Joshua.

Thank you for getting back in touch. Liam here again. 

I tried a few different options here and I was not able to hide only those images which are assigned to variants. It could be possible to create a rule where if an image is tagged with a specific keyword it would be hidden, or visible. Hopefully someone from the Shopify forum community can help out with advice on how to set up this conditional rule. In the meantime, would you like all the images returned to the product page, or is the current configuration okay for the moment?

I hope this helps Joshua. Please let me know if I can help you with anything else.

Liam Griffin | Customer Success Guru

0 Likes
New Member
27 0 0

Hey Liam, thanks for trying. I think for now I'll keep the current configuration. I like it better without thumbnails. But maybe I'll set the model photo as the first variant image so that it shows up. 

0 Likes
Shopify Partner
2433 0 436

Hi Josh, 

you may do the opposite -- keep displayed only those thumbs which are not variant images. For this you need to open you product.liquid  template, locate this code (two places -- around lines 24-30 and around lines 47-53) 

  {% for image in product.images %}
    <li class="grid__item ...
          ...
    </li>
  {% endfor %}

and add a condition, like this 

  {% for image in product.images %}
    {% unless image.attached_to_variant? %}
      <li class="grid__item ...
          ...
      </li>
     {% endunless %}
  {% endfor %}

UPD. Edited to better highlight the change

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com! My post solved your problem? This is my Paypal too :)
0 Likes
New Member
27 0 0

You're amazing! It worked. Thank you so much for taking the time to figure this out. This is awesome.

0 Likes
Shopify Staff
Shopify Staff
520 0 58

Hi Tim & Joshua,

Great to see this has worked! Thanks Tim for your input here- awesome solution!!

 

Liam Griffin | Customer Success Guru

0 Likes
New Member
3 0 1

can this be shared so we can all use this?

 

Hi Joshua!

Liam here from Shopify - thank you for your question :)

Great to see you are looking to optimise exactly how your product pages look, so let's see how we can set this up for you. I have gone ahead and edited your product.liquid file so that the thumbnails below the main image are hidden. However the variant dropdown with still display the correct image according to what is being selected. I left a note on line 25 of the product.liquid to show you what code I have added. 

Hope this helps Joshua, if you have any other questions, just let me know!

Cheers,
Liam

Shopify Guru
support@shopify.com

1 Like
New Member
1 0 1

Hi All,

i'm also trying to hide variant thumbnails as there are too many sometimes.

Any chance to share the code?

thanks in advance

1 Like