Remove Color Variant from Spotlight Theme

Store Design
1

I want to hide the color variant from certain products. A couple of my vendors don’t have different color options available but they need the Color to be set as default White in order for their sync settings to work.

I continually get questions from customers about “why is there an option for white but the clothing isn’t white”

I just want to be able to hide the color variant on certain products. I have searched around a lot and the answers I found were not helpful/old/confusing :disappointed_face: I’m using the spotlight theme

Thanks kind strangers!

willsanquil_0-1727792958620.png
willsanquil_0-1727792958620.png1254×907 137 KB

2

Can you pls share your site URL.

Thanks,
Santanu

3

https://sanquilly.myshopify.com/

4

When seeking help communicate unambiguously link directly to an url that shows an issue, don’t make others dig.

5

For dawn based themes to hide the first productOption for some products use an alternate template assigned to those products and a custom-css setting:

variant-radios fieldset:first-child { display: none; }

https://help.shopify.com/en/manual/online-store/themes/os20/theme-structure/templates#create-a-new-template (i.e. product.hidefirstoption.json)

https://help.shopify.com/en/manual/online-store/themes/theme-structure/extend/add-css

6

Thank you for the help, this is so close! if I use your code in the variant picker’s custom CSS section it removes the Size. What I want to hide is the color. I can modify the code to take away the first-child section and that’ll make it all invisible but that doesn’t work. I’ve read through some of those links you attached but I’m not seeing what that particular part of the variant picker is called so that I can specifically say THAT part is hidden. Also I apologize for not using best practices when asking for help I’ll take that to heart.

willsanquil_0-1727818267743.png
willsanquil_0-1727818267743.png363×167 4.16 KB

7

Hi @willsanquil

This is Richard from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the 

{% if product.url == '/products/cyberhuahua' %}

{% endif %}

OR to hide all Color

Note: change the product URL to match with your product
Hope this can help you solve the issue

Best regards,

Richard | PageFly

8

Add css in your css file-
.product #variant-radios-template–20775397261603__main .js.product-form__input:last-child {display: none}