Shopify themes, liquid, logos, and UX
Hi,
Is anyone able to help me out with a code to hide the color variant on product pages. I want to keep the size option but hide the color option (as colors are being displayed through product variations on Impact, I don't want to display it twice).
Anyone able to help out with this?
Solved! Go to the solution
This is an accepted solution.
Hey @Ludus,
You can add this CSS in your base.css file. This will hide your first product option that's 'Litur-color'.
.variant-picker__option:has([name="option1"]) {
display: none !important;
}
Let me know if you've anymore questions for me, would love to help.
Cheers!
Shreya | Revize
Hi Ludus can you give me the link to your shopify website and password if there's any ?
This is an accepted solution.
Hey @Ludus,
You can add this CSS in your base.css file. This will hide your first product option that's 'Litur-color'.
.variant-picker__option:has([name="option1"]) {
display: none !important;
}
Let me know if you've anymore questions for me, would love to help.
Cheers!
Shreya | Revize
Thank you Shreya,
This solution worked perfectly and now my product pages look better!
Thank you so much for your help 🙂
Hi @Ludus
1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file
3. In theme.liquid, paste the below code before </head>
<style>
.variant-picker__option-info {
display: none !important;
}
.block-swatch {
display: none !important;
</style>
Result:
If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!
This solution does not work, but I have a code that works now 🙂
Hello @Ludus
Go to online store ----> themes ----> actions ----> edit code ---->theme.css
add this code at the end of the file and save.
.product-info__product-picker {
display: none !important;
}
result
If this was helpful, hit the like button and accept the solution.
Thanks
This solution does not work, but I have a code that works now 🙂
Hi @Ludus
You can follow this instruction:
1. Go to Shopify > Theme > Customize
2. Copy and paste this code on Theme settings > Custom CSS section
variant-picker.variant-picker > fieldset.variant-picker__option:nth-child(1) {
display: none !important;
}
Result :
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025