How can I modify the search icon in my website header?

Hi. As you can see on my website, when you click on the search icon, it opens and then you can search. I would like to have the icon in the header to look something like this just narrower.

noapaxx_0-1677742309710.png

So if it is possible, please help me. Thanks. www.luxur-looks-myshopify.com pass:luxurlooks

Hello @noapaxx

I can not access to your store

Kind & Best regards,
GemPages Support Team

@GemPages www.luxur-looks.myshopify.com

Hi @noapaxx ,

To add a search bar directly in the header near the menu we need to customize the header.liquid code. This requires customization so we suggest you to hire a developer.

Hi @noapaxx

This is Victor from PageFly - Shopify Page Builder App, I’d like to suggest this idea:

Online Store ->Theme ->Edit code

Assets ->component-search.css

.search__button .icon {
    width: 15px !important;
}

Hope you find my answer helpful!

Best regards,

Victor | PageFly