Solved

X through a sold out variant (Symmetry Theme) Help

CamrinAce
New Member
5 0 0

IMG_9061.jpeg

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

Accepted Solution (1)

ThePrimeWeb
Shopify Partner
1842 520 400

This is an accepted solution.

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.

ThePrimeWeb_0-1708129775850.jpeg

 

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 2 (2)

ThePrimeWeb
Shopify Partner
1842 520 400

This is an accepted solution.

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.

ThePrimeWeb_0-1708129775850.jpeg

 

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!
CamrinAce
New Member
5 0 0

Thank you!! It came out perfect!