Help Removing Overlay on Sold Out Product

Highlighted
New Member
2 0 0
Hi guys, Long time forum reader, first timer poster. I've managed to get by reading previous posts until now! I'm a bit stuck here. Trying to remove the big red cross over my sold out variations. Happy for it to come up as "Sold out" rather than price, however still want it so that people can still view the variations etc. Don't want to allow overselling though. https://www.stealthboards.com/collections/pro-models/products/stealth-boards-bullet-kinetic Anyone able to point me in the right direction. Thanks, Jono
0 Likes
Highlighted
Shopify Staff
Shopify Staff
630 16 197

Hi Jono! 

Liam here from Shopify - thank you for your question :)


Great to see you are looking to set up your product page exactly how you would like, so let's see how you can remove those overlays. The easiest way to do this might be to add some CSS to your stylesheet. 


You can find the stylesheet within the Edit HTML section in the Assets folder and you're looking for a file called stylesheet.css.liquid and you will be adding your changes to the very bottom of this file. It's very important not to change any code in the middle of the file as the SCSS file cannot be rolled back, so if there's a problem with new code it is easy to find it at the bottom. You could add this code to the bottom of your stylesheet.css.liquid:

.swatch .swatch-element.soldout .crossed-out { 
  display: none;
}


I hope this helps Jono, if you have any other questions, please let me know.


Cheers,

Liam

Partner Education | support@shopify.com

Liam Griffin
Shopify | Developer Community Manager
0 Likes
Highlighted
New Member
2 0 0

Yep, perfect!

Thanks for your help, Liam.

0 Likes
Highlighted
New Member
2 0 0

Hey! I can't find the stylesheet under the assets HTML. I am using the minimal theme.

0 Likes
Highlighted
New Member
1 0 0

Hey Liam,

Hoping you can help with something similar!

I would like our color swatches to never cross out, even if all variations in that color are out of stock. I would rather the color remain no not crossed out, and then the variants of size and fit would be crossed out.

https://ketlmtn.com/collections/mens/products/badlands-lightweight-short

Currently, when selected on certain variants, the colors will X out which might cause people to think that color is out of stock for all variants when in reality the color is only out of stock for that color/size variation.

0 Likes