Hello,
Would it be possible to hide the size button itself when all colours are out of stock for that size? That seems cleaner than only hiding the colour heading and have size button for nothing left ?
Thank you,
Hervé from Paris
Hello,
Would it be possible to hide the size button itself when all colours are out of stock for that size? That seems cleaner than only hiding the colour heading and have size button for nothing left ?
Thank you,
Hervé from Paris
Yes, and you probably don’t need new code for it. The rule you already added isn’t colour-specific — it hides any option button flagged unavailable, sizes included.
What decides whether a size gets flagged is option order. Horizon judges each option against the ones above it, so if Colour sits above Size, a size is only judged against the colour currently selected and stays visible. Put Size first instead: Products > your product > Variants, drag Size above Colour, save. A size with no in-stock colour is then flagged unavailable and disappears with the same CSS, and the shopper picks size first, then only the colours that exist for it.
One thing to check after reordering: your variant images stay attached to colour, so confirm the gallery still switches correctly on a couple of products.
If this was helpful, please mark it as the Solution.
Yes, that’s definitely possible. Instead of only hiding the color heading, you can update the variant picker logic to check whether a size has at least one available color. If all color variants for a particular size are out of stock, you can hide that size button entirely.
This provides a much cleaner user experience because customers will only see sizes that are actually available. If you’re using a Shopify 2.0 theme, let us know which theme you’re using (Dawn, Horizon, Prestige, etc.), and we can suggest the appropriate approach.
Best regards,
Devcoder ![]()
I think what you’re looking for makes sense from a UX perspective. If all color variants under a particular size are sold out, hiding the Size button entirely would create a much cleaner experience than leaving customers with a selectable size that has no available options.
If you’re using Shopify’s native variant picker, this behavior is usually controlled by your theme, and most themes don’t automatically hide a parent option based on the availability of its child variants. Achieving this often requires some theme customization.
If you’re open to using a product options app, you could also take a look at Easify Custom Product Options. It lets you build Size and Color as linked options using Conditional Logic, so customers only see the relevant choices based on their previous selection. While the exact behavior still depends on your inventory setup and theme, it can help create a much cleaner option selection experience without heavily modifying your theme.
If you can share which theme you’re using, I’d be happy to suggest the most suitable approach.![]()
Yes, it’s definitely possible, but it depends on how your theme handles variant availability. Instead of only hiding the color swatches, the size selector can be filtered so it only shows sizes that still have at least one available variant. Some themes support this out of the box, while others require a small tweak to the variant picker code.