Solved

Change Variant Dropdown Background Color on Brooklyn

bangersupplyco
Tourist
8 0 2

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!

Accepted Solution (1)
ZestardTech
Shopify Expert
5395 971 1293

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

View solution in original post

Replies 9 (9)

ZestardTech
Shopify Expert
5395 971 1293

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
8 0 2

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!

ZestardTech
Shopify Expert
5395 971 1293

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
8 0 2

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

ZestardTech
Shopify Expert
5395 971 1293

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
8 0 2

Thanks a ton!

ZestardTech
Shopify Expert
5395 971 1293

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
TBtabithaf
New Member
5 0 0

Hi there! I'm currently experiencing a similar issue and can't find a solution.

 

my client's store with the white text on white drop down can be found here: https://grow.canadasforesttrust.ca/products/canadian-offsetter

 

any chance you can help me out?