Hi everyone, Does anyone know if it’s possible to hide out-of-stock variants on the canopy theme automatically when they are out of stock? I’m using Canopy Theme Thank you

You can try the CSS code below First CSS code is to hide out of stock items Second CSS code is to make the selected item more obvious. Third CSS code will make your the gallery sticky on scroll until the end of the swatches. #clickyboxes-option-colour li:has(> .unavailable) { display: none !…

Step 1: Online Stores > Themes > Edit code Step 2: Choose file base.css or theme.css Step 3: Add code #clickyboxes-option-color li:has(.unavailable) { display: none !important; } Hoping my solution helps you solve your problem. Best regards, Amelia | PageFly

Thanks for your reply. I’ve just given this a try and It doesn’t seem to be working. We are using the colour swatches, not sure if the code would need tweaking for this? Thanks for your help.

Could you please share the URL link of your store so we can check it for you?

No problem, hopefully this share link works as we haven’t gone live with it yet. https://oroqh6eutfazdap7-80345071940.shopifypreview.com/products/stylecraft-special-dk-100g?pos=1&… I don’t suppose you also know whether it’s possible to make the circle around the selected colour swatch more obvious…

Thank you so much, it’s working much better on the desktop end now. I’ve just had a look on the mobile site thought and there seems to be an issue where the swatches are going in front of the main image instead of behind, any idea how to fix this? Thanks

Hello @organele Sorry I missed out the mobile part, Here’s the CSS code in full again fixing the mobile issue. You can remove the previous one and paste this instead #clickyboxes-option-colour li:has(> .unavailable) { display: none !important; } .product-form .selector-wrapper.selector-wrapp…

Could you show me one of those products? I can take a look. Also any other products with other variant types

Yes please see the link below. Thank you https://2z0iozpp22etqd0b-80345071940.shopifypreview.com/products/knitpro-waves-soft-grip-crochet-hoo…

There doesn’t seem to be any distinct difference to highlight out of stock options in the dropdown menu. It would be possible by editing the site’s Liquid code, but it’s better for you to switch this to a swatch also so that the above CSS code works with it automatically.

Hide out of stock variants

Store Design

organele May 7, 2024, 12:49pm 9

Thank you!

I noticed on products we are using other variant types like dropdowns, the out of stocks are still showing, is there a way to tweak it so it hides on all types?

Topic		Replies	Views
Hide out of stock variants on Canopy Theme Technical Q&A javascript , css , html , shopify-theme	21	218	November 1, 2025
Code to Hide variants with 0 stock level Store Design product-page	13	262	March 27, 2025
Hide specific variants from a product - Dawn 9.0.0 Shopify Apps third-party-apps , shopify-apps	3	106	November 14, 2024
Trying to hide variants that are out of stock Store Design css , shopify-themes , product-page	7	161	January 9, 2026
Change color of drop-down out of stock variants Store Design	14	139	June 28, 2022

Hide out of stock variants

Related topics