Re: Change search bar text and color

Solved

How can I modify my search bar text, color, and border shape?

omero
Explorer
58 0 12

Hello,

 

I need to change my search bar text and color. I want to reduce letter spacing of placeholder, and change color to black. I also need help making borders rectangle, and the section background gray.

 

My store url is: designsfordivine.com

 

I appreciate any help

Thanks very much

 

 

Accepted Solution (1)

webizito
Shopify Partner
83 5 6

This is an accepted solution.

Hello @omero 

.template-search__search .field__label {
  letter-spacing: 0;
  color: #000 !important;
}
.search__input.field__input{
  border-radius: 50px;
}


Please add this css in your base.css file.

Thanks.

✌ We are volunteering to help | Likes and Accept as Solution will be much appreciated.
Need a Shopify developer?  | Chat on WhatsApp | Hire us at Email: info@webizito.com || Website: www.webizito.com

View solution in original post

Replies 7 (7)

webizito
Shopify Partner
83 5 6

This is an accepted solution.

Hello @omero 

.template-search__search .field__label {
  letter-spacing: 0;
  color: #000 !important;
}
.search__input.field__input{
  border-radius: 50px;
}


Please add this css in your base.css file.

Thanks.

✌ We are volunteering to help | Likes and Accept as Solution will be much appreciated.
Need a Shopify developer?  | Chat on WhatsApp | Hire us at Email: info@webizito.com || Website: www.webizito.com
omero
Explorer
58 0 12

Hey, Thank you, this helped me edit the text so I accepted as solution. If you have an idea about how to make this part gray?

Screen Shot 2023-08-18 at 20.47.02.png

webizito
Shopify Partner
83 5 6

Only for mobile?

✌ We are volunteering to help | Likes and Accept as Solution will be much appreciated.
Need a Shopify developer?  | Chat on WhatsApp | Hire us at Email: info@webizito.com || Website: www.webizito.com
omero
Explorer
58 0 12

forgot to mention that, but yes for mobile only

webizito
Shopify Partner
83 5 6
@media only screen and (max-width: 767px) {
  .template-search__search{
      height: 100%;
      background-color: gray;
      padding: 20px 0 50px;
      display: block;
      margin: 0;
  }
}


Add this css

✌ We are volunteering to help | Likes and Accept as Solution will be much appreciated.
Need a Shopify developer?  | Chat on WhatsApp | Hire us at Email: info@webizito.com || Website: www.webizito.com
omero
Explorer
58 0 12

Hello, thanks very much, can you help me remove the right and left space?

 

omero_1-1692382441032.png

 

 

like this screenshot below

omero_0-1692382384326.png

 

 

webizito
Shopify Partner
83 5 6

Hello @omero 

.template-search__header{
    background-color: gray;
}


Add this css.
Thanks.

✌ We are volunteering to help | Likes and Accept as Solution will be much appreciated.
Need a Shopify developer?  | Chat on WhatsApp | Hire us at Email: info@webizito.com || Website: www.webizito.com