Solved

Hide out of stock variants

organele
Tourist
7 0 1

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

Accepted Solutions (2)
PageFly-Amelia
Navigator
344 105 149

This is an accepted solution.

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 !important;
}

.product-form .selector-wrapper.selector-wrapper--swatch.selector-wrapper--swatch-image a.active {
    box-shadow: 0 0 0 4px #000 !important;
}

.product-gallery.half.column {
    position: sticky;
    top: 15px;
}

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.


Optimize your store’s mobile shopping experience with the Blum theme.

View solution in original post

PageFly-Amelia
Navigator
344 105 149

This is an accepted solution.

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-wrapper--swatch.selector-wrapper--swatch-image a.active {
    box-shadow: 0 0 0 4px #888 !important;
}

.product-gallery.half.column {
    position: sticky;
    top: 15px;
}

@media only screen and (max-width: 768px) {
    .product-gallery.half.column {
        position: initial;
    }
}

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.


Optimize your store’s mobile shopping experience with the Blum theme.

View solution in original post

Replies 12 (12)

PageFly-Amelia
Navigator
344 105 149

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

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.


Optimize your store’s mobile shopping experience with the Blum theme.

organele
Tourist
7 0 1

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. 

PageFly-Amelia
Navigator
344 105 149

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

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.


Optimize your store’s mobile shopping experience with the Blum theme.

organele
Tourist
7 0 1

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 too? at the moment you can't really tell what is selected without scrolling up to the main image.

 

We did want a sticky add-to-cart button that stops sticking once you get to the bottom of the swatches or maybe a sticky main image to make it better to view on products with a lot of colours but have struggled to find something that works on all fronts theme-wise. 

 

Thanks for your help it's really appreciated. 

PageFly-Amelia
Navigator
344 105 149

This is an accepted solution.

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 !important;
}

.product-form .selector-wrapper.selector-wrapper--swatch.selector-wrapper--swatch-image a.active {
    box-shadow: 0 0 0 4px #000 !important;
}

.product-gallery.half.column {
    position: sticky;
    top: 15px;
}

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.


Optimize your store’s mobile shopping experience with the Blum theme.

organele
Tourist
7 0 1

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

PageFly-Amelia
Navigator
344 105 149

This is an accepted solution.

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-wrapper--swatch.selector-wrapper--swatch-image a.active {
    box-shadow: 0 0 0 4px #888 !important;
}

.product-gallery.half.column {
    position: sticky;
    top: 15px;
}

@media only screen and (max-width: 768px) {
    .product-gallery.half.column {
        position: initial;
    }
}

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.


Optimize your store’s mobile shopping experience with the Blum theme.

organele
Tourist
7 0 1

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? 

 

PageFly-Amelia
Navigator
344 105 149

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

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.


Optimize your store’s mobile shopping experience with the Blum theme.

PageFly-Amelia
Navigator
344 105 149

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.

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.


Optimize your store’s mobile shopping experience with the Blum theme.

chantellev
Visitor
3 0 0

I am also chasing a solution for this, however am hoping to exclude some out of stock variants from being hidden. We are using Symmetry.

We have colour ways that are out of stock and discontinued that I want to hide but not delete from Shopify. We also have variants that are out of stock but coming back and therefore want to keep visible. 

https://baskeyewear.com.au/collections/all