Impact Selected size does not appear as sold out

Solved

Impact Selected size does not appear as sold out

oguzsanci1
Shopify Partner
6 0 2

oguzsanci1_0-1741936601014.png

 

oguzsanci1_1-1741936601056.png

 

How can i make it so when its selected it will still be crossed off, i want it for all product pages.

Hope you can help.

 

Here's the link to the product

Here's the link to the site

Accepted Solution (1)

Moeed
Shopify Partner
7722 2071 2550

This is an accepted solution.

Hey @oguzsanci1 

 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
:checked+.block-swatch.is-disabled {
    background-image: linear-gradient(to bottom right, #0000 50%, currentColor 50% calc(50% + 2px), #0000 calc(50% + 2px));
}
</style>

RESULT:

Moeed_0-1741937365780.png

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Best Regards,
Moeed

- Need a Shopify Specialist? Chat on WhatsApp

- Get a quick Shopify quote – Click here!

- Custom Design | Advanced Coding | Store Modifications


View solution in original post

Replies 2 (2)

Dan-From-Ryviu
Shopify Partner
12031 2353 2530

Please add this code at the bottom of your theme.css file and check again.

.product-info__variant-picker :checked+.block-swatch.is-disabled {
    background-image: linear-gradient(to bottom right, #0000 50%, currentColor 50% calc(50% + 2px), #0000 calc(50% + 4px));
}

 

- Helpful? Like & Accept solution! - Support me? Buy me a coffee
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Moeed
Shopify Partner
7722 2071 2550

This is an accepted solution.

Hey @oguzsanci1 

 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
:checked+.block-swatch.is-disabled {
    background-image: linear-gradient(to bottom right, #0000 50%, currentColor 50% calc(50% + 2px), #0000 calc(50% + 2px));
}
</style>

RESULT:

Moeed_0-1741937365780.png

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Best Regards,
Moeed

- Need a Shopify Specialist? Chat on WhatsApp

- Get a quick Shopify quote – Click here!

- Custom Design | Advanced Coding | Store Modifications