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

Store Design
, , , , ,

Topic summary

A Shopify store owner using the Sense theme needed help changing colors for menus, variant pickers, and search bars across their site. The elements had poor visibility with white text on white backgrounds.

Desired changes:

  • Background: Black
  • Text color: White
  • Hover state: White background with black text
  • Mobile hamburger menu colors should remain unchanged

Affected elements:

  • Search bars (text input and results)
  • Variant pickers on product/service pages
  • Quantity selector fields

The user wanted a solution that would automatically apply to new pages and products added in the future.

Resolution:
A community helper provided CSS code to add to the base.css file in the theme’s assets folder. The code targeted specific selectors including #Search-In-Modal-1, .predictive-search--header, and .product-form__input elements, applying the requested color scheme.

The solution was confirmed successful by the original poster.

Summarized with AI on November 7. AI used: claude-sonnet-4-5-20250929.
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: