Hide the color variant on product pages

Store Design

Topic summary

A user seeks to hide the color variant selector on product pages while keeping the size option visible, as colors are already displayed through product variations in the Impact theme to avoid duplication.

Solutions Provided:

Multiple CSS-based solutions were offered:

  • Adding CSS to base.css targeting the first product option
  • Inserting code in theme.liquid before the closing tag
  • Adding CSS to theme.css to hide the product picker entirely
  • Using Custom CSS in Theme settings to hide the first variant picker fieldset

Resolution:

The issue was resolved using CSS code that targets the first variant option ([name="option1"]) with display: none !important;. The user confirmed this solution worked perfectly and improved their product page appearance. Other suggested solutions were tested but did not work for their specific setup.

Summarized with AI on November 2. AI used: claude-sonnet-4-5-20250929.
1

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.png745×541 24.6 KB

colour variant.png
colour variant.png745×541 24.6 KB

2

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

3

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

4

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

Result:

topnewyork_0-1737095724710.png
topnewyork_0-1737095724710.png321×397 15.8 KB

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

Thanks!

5

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
150.png698×462 9.81 KB

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

6

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
LizHoang_0-1737103964341.png1305×747 144 KB

7

Thank you Shreya,

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

Thank you so much for your help :slightly_smiling_face:

1 Like
8

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

9

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