Hiding additional images in product gallery

Site URL: https://www.craftsplosion.net/stock-items/p/5gpr2lwfbnldwgh1vgqc8vz2y8slf8

Does anyone know how to hide or remove additional images from a product gallery?  For example, in the wine glasses page I linked, I want to remove the 2nd (lower quality gif) and 4th (image with text and logo) images from the gallery on the product details page.  However, I want to leave them in the product editor since I'm using the gif as the alt image on hover for the thumbnail and the text/logo image for product variants.  Any help would be greatly appreciated!  Thanks!

Try edit product > Additional Info > Add Code Block > paste this code

<style>
  /* image 1 is nth-child(3), image 2 is nth-child(4)... */ 
  .ProductItem-gallery-slides>div:nth-child(4), .ProductItem-gallery-slides>div:nth-child(6) {
    display: none !important;
}
</style>

Thanks a ton, Tuan!  Turns out I can't use the text/logo image at all if it's hidden, so I deleted that part of the code out.  It's definitely an improvement just having that lower quality gif out of the gallery, though.  The only issue is that instead of displaying the gif, it displays a completely blank image.  The gif appears normally as the alt image for the thumbnail; it's just in the gallery that it displays as blank.  Do you think there'd be a way to remove that blank image entirely?  If there isn't a way, do you think it could be replaced with a different image (for example, our logo or a message)?

Thanks again!

Hi @tuanphan I have the same question but the code provided didn't do anything for me.

I want to keep the hover effect on the thumbnail, but I don't want the 2nd image to show on the products page because it pushes the Additional Info down too far. 

https://www.downtoearthadventures.com/adventures/wild-swimming

pw: downtoshirts

Thank you!

7 minutes ago, zala said:

Hi @tuanphan I have the same question but the code provided didn't do anything for me.

I want to keep the hover effect on the thumbnail, but I don't want the 2nd image to show on the products page because it pushes the Additional Info down too far. 

https://www.downtoearthadventures.com/adventures/wild-swimming

pw: downtoshirts

 

Thank you!

You mean hide top or bottom image?

@tuanphan bottom, thanks!

Hi @tuanphan, any luck with this? I've deleted the 2nd product image on the site in order to fix the spacing on the product page, but I'd love to keep the hover effect that the 2nd image creates on the thumbnail. 

Downtoearthadventures.com

Thanks!

10 hours ago, zala said:

Hi @tuanphan, any luck with this? I've deleted the 2nd product image on the site in order to fix the spacing on the product page, but I'd love to keep the hover effect that the 2nd image creates on the thumbnail. 

Downtoearthadventures.com

Thanks!

Add image 2, then add this to Design > Custom CSS

/* Hide bottom image */
.ProductItem-gallery-slides>div:nth-child(n+2) {
    display: none !important;
}

Quote

Hello  ! I'm also looking to hide the additional product images - I'd prefer them to be in a slideshow with only one row if images instead of 3 rows of images. Thank you! 

@tuanphan looking for help for this post above! Thank you!

4 hours ago, ossf said:

 

 

Add to Design > Custom CSS

@media screen and (max-width:640px) {
.ProductItem-gallery-thumbnails {
    display: none;
}
}

Hi @tuanphan I can see that the code you've provided for the original query targets additional images which is what I too am after, but what do I add to the code instead of 'display: none', to make the sidebar of additional images larger, as it currently shows half of them with a scroll bar and makes my site look tacky. I've tried adding (width: 100%) coding in, but it isn't altering anything even when adding !important.

So any width code i can mess with would be great thank you!

14 hours ago, jksnmedia said:

Hi @tuanphan I can see that the code you've provided for the original query targets additional images which is what I too am after, but what do I add to the code instead of 'display: none', to make the sidebar of additional images larger, as it currently shows half of them with a scroll bar and makes my site look tacky. I've tried adding (width: 100%) coding in, but it isn't altering anything even when adding !important.

 

So any width code i can mess with would be great thank you!

Can you share link to a product?

@tuanphan i seem to have solved it myself somehow? it now just shows the images underneath with no scroll bars

https://www.pretty-positive.co.uk/shop/p/self-care-isnt-selfish