Re: Dawn Theme > Customizing > Adding Full Search Bar To Header Section

Dawn Theme > Customizing > Adding Full Search Bar To Header Section

Penrose
Tourist
14 0 3

Hi

 

We've built our site using the Dawn theme and I want to change the search functionality placement.

 

Right now its the default setup: click the search icon on the far right for the modal to popup/overlay on the header section. I'd like to change this from the icon-activated search modal to a permeant (without clicking search icon) search bar where the main menu is positioned (when set to "middle left icon" in the theme settings.

 

I made a mockup to provide a better idea visual of the idea...

 

I'm aware out of the box it'll require customizing the div tags and css, which I can handle. Just checking if anyone has tried this before and can give me any tips to help jump start on getting it going?

 

New Project.png

Reply 1 (1)

ZenoPageBuilder
Shopify Partner
1052 203 221

Hello @Penrose 👋

Many of our users have built their own search field using our app Zeno Builder. The way we do is to add this Liquid code (simplified) to the theme

 

<form action="/search" method="GET">
  <input type="search" name="q">
  <button type="submit">Search</button>
</form>

 

You can go to Edit theme, remove the old search code and use this code instead, feel free to modify HTML/CSS to match your brand.

 

Hope that helps!

Zeno Page Builder - Build responsive & SEO-optimized Landing pages, Blog posts, Product pages and more...
Learn more at zenobuilder.com