How can I add a permanent search bar below the main menu on my webpage?

Store Design
, , ,
1

Hello,

I need to add a search bar right below the Main Menu at the top of my page. I want this to be always visible, instead of using the lens and emergent search drawer.

It’s ok if it involves using custom code, I just need a bit of help since I’m new at using Shopify and editing the code.

  • Currently, I’m using the Dawn theme.

After this, it would be good to know how to hide the lens search button next to the cart and account icons at the top (it would become redundant).

Thanks!

2

Sure! To add a search bar right below the main menu in the Dawn theme and hide the lens search button, you can follow these steps:

  1. Log in to your Shopify admin.
  2. Go to “Online Store” and click on “Themes”.
  3. Find the Dawn theme and click on “Actions” > “Edit code”.
  4. In the left sidebar, under “Sections”, click on “header.liquid” to open the header section file.
  5. Look for the code that corresponds to the main menu and locate the closing tag </nav>.
  6. Right below the closing </nav> tag, add the following code snippet to insert the search bar:
<form action="/search" method="get" class="search-bar">
<input type="text" name="q" placeholder="Search" class="search-bar__input">
<button type="submit" class="search-bar__submit">Search</button>
</form>

This code creates a search bar with a text input field and a search button. You can customize the placeholder text and styling as needed.

  1. Save the changes.

To hide the lens search button, follow these steps:

  1. In the same “header.liquid” file, locate the code that displays the lens search button. It might look something like this:
<button class="header__search-toggle" aria-label="{{ 'layout.navigation.search' | t }}">
<svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-search" viewBox="0 0 37 40">
<!-- SVG icon code -->
</svg>
</button>
  1. Wrap this code with an if statement to conditionally show or hide it. Replace the existing code with the following:
{% if template != 'search' %}
<!-- Your existing code for the search button here -->
{% endif %}

This code checks if the current page template is not the search page (template != 'search') and only displays the search button in that case.

  1. Save the changes.

After making these modifications, you should have a search bar below the main menu, and the lens search button will be hidden except on the search page.

Remember to test your changes and make a backup of your theme before making any modifications to the code.

1 Like
3

hi

i understand this is an old post but im struggling with getting this search bar function, hiding the lens button etc on the Dawn theme.

I think im placing the code in the wrong place, would you be able to look at the code and see where it needs placing?

4

Thank You.