Solved

Hide out of stock variants on Canopy Theme

LWSOnline
Excursionist
17 1 3

Hi, 

Does anyone know if it's possible to hide out-of-stock variants on the canopy theme automatically when they are out of stock? 

Thank you

 

Accepted Solution (1)
ThePrimeWeb
Shopify Partner
2138 614 487

This is an accepted solution.

Hey @LWSOnline,

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

ul#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;
    }
}



Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

View solution in original post

Replies 15 (15)

ThePrimeWeb
Shopify Partner
2138 614 487

Hey @LWSOnline,

I referred to the original theme and tested this, you'll have to test it out yourself. 

Go to your Theme customizer and in it's settings paste this into the Custom CSS box and save it

ul#clickyboxes-option-color li:has(> .unavailable) {
    display: none !important;
}
Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
LWSOnline
Excursionist
17 1 3

Hi @ThePrimeWeb 

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. 

ThePrimeWeb
Shopify Partner
2138 614 487

No problem. If you can provide the store URL, I can just quickly check what needs to be done.

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
LWSOnline
Excursionist
17 1 3

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. 

ThePrimeWeb
Shopify Partner
2138 614 487

Hey @LWSOnline,

 

This worked for me.

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. 

ul#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;
}

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
LWSOnline
Excursionist
17 1 3

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

ThePrimeWeb
Shopify Partner
2138 614 487

This is an accepted solution.

Hey @LWSOnline,

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

ul#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;
    }
}



Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
LWSOnline
Excursionist
17 1 3

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? 

 

 

 

ThePrimeWeb
Shopify Partner
2138 614 487

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

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
LWSOnline
Excursionist
17 1 3
ThePrimeWeb
Shopify Partner
2138 614 487

Hey @LWSOnline,

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.

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
LWSOnline
Excursionist
17 1 3

No worries, thanks for your help!

LWSOnline
Excursionist
17 1 3

Hi @ThePrimeWeb 

Sorry to bother you again. I don't suppose you know how we can set the product image on the product page to remain contained in a square? Currently the box changes size for every variant you click.

ThePrimeWeb
Shopify Partner
2138 614 487

Hey @LWSOnline,

 

You can share the link to your store if you need it coded. 

 

Also, I would rather you resize the actual images to make all of them the same size rather than limiting it by code because it removes your flexibility next time if you decide to do rectangular pictures, it won't allow you since the code forces square. 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
LWSOnline
Excursionist
17 1 3

Hi

Thank you for your reply. Our preview link is:

 

https://4320e6-3.myshopify.com/?_ab=0&_fd=0&_sc=1&key=ef327d0d37d4181fc4c10349d57ce0a106bec1382ddd56... 

We do make all new images square now and plan to in the future. At the moment we have thousands of older product images that are all different sizes which are causing issues. We do plan to eventually go through all of them and change them to square but sadly we don't have the time right now so we are hoping for a quick fix as we are eager to go live sooner rather than later. 

Thanks for your help.