Change Variant Dropdown Background Color on Brooklyn

Solved
bangersupplyco
Tourist
7 0 0

Hello,

I have been searching for hours for a way to change my Product Variant's dropdown color, specifically the white background that is there by default. My site URL is bangersupplyco.myshopify.com (though I am working on a theme separate from the Live version, which currently has the fix already)

Here is a screenshot of the area to which I'd like to change the color: 

 

Your help is highly appreciated, thanks!

0 Likes
Pallavi
Shopify Expert
1103 146 178

Hello There,

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

.selector-wrapper select#ProductSelect-product-template-option-0 option {
background-color: #f1cb39!important;
}

Screenshot :- https://prnt.sc/10666xw

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
bangersupplyco
Tourist
7 0 0

Sorry for the confusion, I believe this is the fix for my Live Theme (which is not Brooklyn). I am in the process of designing a new theme that is better optimized for Mobile users on the Brooklyn theme and using this code did not change what I wanted exactly. Here is a screenshot of the area I am trying to change, it is the white background in this dropdown, as well the variant text should be grayed out for sold out variants. (As it is on my website currently, second picture)

 

Thanks again!

0 Likes
Pallavi
Shopify Expert
1103 146 178

Share me preview link

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
bangersupplyco
Tourist
7 0 0

Sorry, I created a proper preview link: https://i8a483t36v5jvpx8-26432995416.shopifypreview.com

0 Likes
Pallavi
Shopify Expert
1103 146 178

This is an accepted solution.

Hello There,

1. Go to Online Store->Theme->Edit code
2. Asset->/timber.scss.css.liquid->paste below code at the bottom of the file.

select#SingleOptionSelector-0 option {
background-color: #f1cb39!important;
}

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
bangersupplyco
Tourist
7 0 0

Thanks a ton!

0 Likes
Pallavi
Shopify Expert
1103 146 178

Kindly feel free to get back to me if you need any further assistance Thanks!

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing