Shopify themes, liquid, logos, and UX
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
Solved! Go to the solution
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:
If I managed to help you then, don't forget to Like it and Mark it as Solution!
Best Regards,
Moeed
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.
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:
If I managed to help you then, don't forget to Like it and Mark it as Solution!
Best Regards,
Moeed
June brought summer energy to our community. Members jumped in with solutions, clicked ...
By JasonH Jun 5, 2025Learn how to build powerful custom workflows in Shopify Flow with expert guidance from ...
By Jacqui May 7, 2025Did You Know? May is named after Maia, the Roman goddess of growth and flourishing! ...
By JasonH May 2, 2025