Hi,
I am designing our shopify store and adding a search bar, however the text in the search bar can’t be changed to a different color. Does anyone have a solution?
1 Like
Hello @lunalucenteskin
Please share the store URL.
Hi @lunalucenteskin ,
Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code
Step 2: Search file base.css, theme.css, styles.css or theme.scss.liquid
Step 3: Insert the below code at the bottom of the file → Save
span.m-search-form__label {
color: white !important;
}
Here is result:
Hope this can help you,
If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 
- In your Shopify Admin go to online store > themes > actions > edit code
- Find Asset > main.css and paste this at the bottom of the file:
.m-search-form__label {
color: #fff;
}
It unfortunately doesn’t work
1 Like
It unfortunately doesn’t work
Hi @lunalucenteskin ,
Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code
Step 2: Search file theme.liquid
Step 3: Inside head tags. You need create style tags. After insert my code inside it
span.m-search-form__label {
color: white !important;
}
Hope this can help you,
If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you
- In your Shopify Admin go to online store > themes > actions > edit code
- Find Layout > theme.liquid and paste this at the bottom of the file:
Hello @lunalucenteskin
Follow these Steps:
- Go to Online Store
- Edit Code
- Find your Assets main.css
- you already added CSS bottom in the update CSS
Header desktop transparent CSS
.transparent-on-top .m-header__right .m-search-form__label {
color: #fff;
}
The header desktop is transparent see image.
Header desktop transparent scroll down add new CSS.
m-header.transparent-on-top.stuck.scroll-up .m-header__right .m-search-form__label {
color: rgba(var(--color-foreground), .6);
}
Header desktop transparent scroll down see image.
Best Regards,
Dws_pvt_ltd