How to hide images of products that are not available

Technical Q&A
, , ,

Topic summary

A user working with the Kalles theme has successfully hidden unavailable product swatches using CSS code in base.css. However, product images for sold-out variants still display in the gallery.

Current situation:

  • CSS hides disabled variant swatches (e.g., fuchsia color option)
  • Corresponding product images remain visible in the image gallery
  • User seeks a non-app solution to hide these images when quantity is 0

Specific concern:

  • How to handle cases where one variant has multiple images

Status:

  • Website URL shared (madelinelove.com)
  • Helper initially couldn’t identify the issue, viewing all variants as available
  • User clarified: the problem is that images of sold-out variants (like the fuchsia necklace) remain visible even though the color swatch is hidden

Unresolved:
No solution has been provided yet for hiding variant images based on inventory levels.

Summarized with AI on October 29. AI used: claude-sonnet-4-5-20250929.
1

I am using the Kalles theme - I have added the following code:

.js.product-form__input.product-form__input–pill input.disabled + label {
display: none;
}

to my base.css

This hides the swatches of products that are not available but customers can still see images of the products that are unavailable. Is there a non-app way to hide these images if product quantity is 0? What if I have multiple images of one variant?

Thanks!

2

Here is an image of the product - this product is unavailable as you can see on the swatches, however, the image still appears.

Screenshot 2025-04-10 at 3.13.29 PM.png
Screenshot 2025-04-10 at 3.13.29 PM.png1641×559 353 KB

3

Hi @sjfield15 .

Can you please share the website URL? If it’s password-protected, a password would be needed, too. It would be much easier to debug and solve.

4

https://madelinelove.com/

5

@sjfield15 , sorry, I can’t spot any unavailable products. All of the variants shown are available and can be added to the cart.

6

The photos have the unavailable products. For example, the photo of the fuchsia necklace I posted - there is no fuchsia product swatch available because the fuchsia is sold out. I want that photo to not be shown as well.