Hide the color variant on product pages

Solved

Hide the color variant on product pages

Ludus
Excursionist
13 0 11

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?

 

colour variant.png

colour variant.png

Accepted Solution (1)

ShreyaRevize
Shopify Partner
55 5 11

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

 

With 7+ years of experience helping Shopify merchants succeed | www.untechnickle.com
Creator of Revize – Empowering customers to fix mistakes and buy more after purchase 
Let shoppers edit shipping addresses, change variants/quantities, add products, and more!
https://apps.shopify.com/revize | hello@untechnickle.com

View solution in original post

Replies 8 (8)

hasbi_expatify
Shopify Partner
18 0 1

Hi Ludus can you give me the link to your shopify website and password if there's any ?

If you like our solution, please like and mark it as a solution.
Don't hesitate to reach us for more Shopify solutions. Thanks 
Website: Expatify Indonesia
Email: hasbi@expatify.co.id

ShreyaRevize
Shopify Partner
55 5 11

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

 

With 7+ years of experience helping Shopify merchants succeed | www.untechnickle.com
Creator of Revize – Empowering customers to fix mistakes and buy more after purchase 
Let shoppers edit shipping addresses, change variants/quantities, add products, and more!
https://apps.shopify.com/revize | hello@untechnickle.com
Ludus
Excursionist
13 0 11

Thank you Shreya,

 

This solution worked perfectly and now my product pages look better!

 

Thank you so much for your help 🙂

topnewyork
Astronaut
1166 154 197

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:

topnewyork_0-1737095724710.png

If my reply is helpful, kindly click like and mark it as an accepted solution.

Thanks!

Need a Shopify developer? Hire us at Top New York Web Design
Boost Your Store Sales with Volume/Tier Discount Try Big Bulk Discount
Create New Shopify Store For Just 1$/Month
Ludus
Excursionist
13 0 11

This solution does not work, but I have a code that works now 🙂

Rahul_dhiman
Shopify Partner
740 143 150

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
150.png

If this was helpful, hit the like button and accept the solution.
Thanks

Want to modify or custom changes or bug fix on store . Or Need help with your store? Or -Want Complete Storefront

Contact here


BEST CUSTOMER ACCOUNTS APP WITH CUSTOM WISHLIST OPTION 
TRY OUR APP :

PWC: Customer Accounts & Pages

Ludus
Excursionist
13 0 11

This solution does not work, but I have a code that works now 🙂

 

 

LizHoang
Shopify Partner
946 113 143

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 :

 

LizHoang_0-1737103964341.png

 

Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

Check our Joy Rewards & Loyalty Program