placing search box in place of search icon

[momsabhiruchi]

hello everyone, can anyone please guide me on, how to replace a search icon with search box

i am using dawn theme 15.1.0 version

looking forward to the guidance

thank you

[sahilsharma9515]

Hi @momsabhiruchi 

Can you please provide your store URL and password as well if applicable, so that I can provide you solution that can work for your store.

Best regards

Sahil

[momsabhiruchi]

here are my store details

https://moortikar.myshopify.com/

password: rtebra

[sahilsharma9515]

Hi @momsabhiruchi Thanks for the URL, I have looked into the site, here is the base code that you can use this is not the exact code that you can directly copy and paste in your theme file, you need to modify the base code according to your theme.

Please follow the steps mentioned below:

1. Locate the Search Icon in the Header

• Go to your Shopify Admin.
• Navigate to Online Store > Themes.
• Click Actions > Edit Code next to your active theme.
• Find the header.liquid file (or similar) under the Sections folder.

2. Modify the Search Icon to a Search Box

• Look for the code related to the search icon, and replace it with code like this:

<form action="/search" method="get" class="search-form">
  <input type="text" name="q" placeholder="Search..." class="search-input" />
  <button type="submit" class="search-button">Search</button>
</form>

Style the Search Box

• Open your theme.css or theme.scss (under Assets) and add custom styles for the search box:

.search-form {
  display: flex;
  align-items: center;
}

.search-input {
  padding: 8px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.search-button {
  background-color: #000;
  color: #fff;
  padding: 8px 12px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

Note: As mentioned earlier, you need to edit the base code above according to your theme files.

Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

Best Regards

Sahil