Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

Hiding additional images in product gallery

Recommended Posts

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!

Link to post
  • Replies 2
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

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

  /* 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;


You can send your question to my email to get detail answer. / How to Setup Password & Share URL

--- Happy New Year

Link to post

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!

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...