X through a sold out variant (Symmetry Theme) Help

CamrinAce · ‎02-16-2024

Hi all, hope everyone is well.

I recently started using the symmetry theme and I wanted my sold out variants to look like this picture above with the variant being translucent and a X crossed over it on the product page. Is there any code I can add that can give me a result like this? Thank you

My website is: https://www.newworldvisionz.com

password is: nwv2

ThePrimeWeb · ‎02-16-2024

Hey @CamrinAce,

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

<style>
label[title="Sold out"]:before {
    content: '';
    border-top: 1px solid rgba(75,75,75,0.5);
    height: 1px;
    position: absolute;
    top: 50%;
    width: 70px;
    rotate: 45deg;
}

label[title="Sold out"]:after {
    content: '';
    border-top: 1px solid rgba(75,75,75,0.5);;
    height: 1px;
    position: absolute;
    top: 50%;
    width: 70px;
    rotate: 135deg;
}


label.opt-label.opt-label--btn.btn.relative.text-center {
    height: 50px !important;
    width: 50px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    max-height: 100px !important;
    max-width: 100px !important;
    padding: 0 !important;
}
</style>

Screenshot is for reference only, the correct code to paste is the one shown above.

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

ThePrimeWeb · ‎02-16-2024