Sense Theme | Change ALL menu and variant picker background/text color/highlight color

Store Design
, , , , ,
1

Hello,

Thank you in advance for your help,

May I please have assistance with changing the background color, highlight-hover color, and text color of every menu, variant picker, etc.

When I type in any Search bar, the text and the background is white, as well as the results. In the variant picker, the text only shows when its highlighted, the background result color changing blue.

For all variant pickers, search menus, quantity fields I would like:

  • The background to be Black

  • The text color to be White

  • When an option is hovered, Id like the background of the option to be White and the text Black

(at that point I believe I will be able to update the colors if needed later on)

If there is a way to have these settings be the same, even as I add New pages, variant pickers with products, new sections, that would be amazing.

Examples shown below:

option selectors.png
option selectors.png907Ă—405 142 KB

Searchbarmenu.png
Searchbarmenu.png1297Ă—253 32.8 KB

(Home page search bar with “test” text)

(Variant picker on All services page)

NOTE:

It is worth mentioning that I want to keep the current colors on the slider/hamburger menu for mobile- shown below

menu color.png
menu color.png714Ă—673 50.6 KB

2

Hi @MoreThanJordan ,

To fix the issue please share your store link with us. So we can help you with detailed solutions.

If you need further assistance, feel free to reach out!
I hope this helps! If it does, please like it and mark it as a solution!

Regards,
Sweans

1 Like
3

Good afternoon Sweans and thank you for your help :D,

My store link: morethanjordan.com

4

Hi @MoreThanJordan ,

Thank you for sharing the store link. Please see the solution below:

  1. In your Shopify admin, navigate to “Online Store” under Sales Channels. Click the three dots next to the theme you wish to edit, then select “Edit Code”.

  2. Next you can find base.css file from assets folder

Add this css code:

#Search-In-Modal-1,
.predictive-search.predictive-search--header , 
.product-form__input.product-form__input--dropdown select ,
#Search-In-Modal{
background: #000;
}

#Search-In-Modal-1 , 
.predictive-search.predictive-search--header , 
.product-form__input.product-form__input--dropdown select *{
color: #fff;
}

.select__select:hover {
background: #fff;
color: #000;
}

If you need further assistance, feel free to reach out! I hope this helps! If it does, please like it and mark it as a solution!

1 Like
5

@Sweans AHHH ~ You are AMAZING!!!

Thank you sooo much for your help on this, it worked like a charm, and I appreciate it very much! Have a wonderful rest of your week.

:sparkles: ? :folded_hands:t4: