SO LOST! How to add search search bar in the header?

gerlikask
Tourist
22 0 1

Hi there. I'm trying to add the search bar back to the header on my webpage. I've played around with different codes and placements, but haven't succeeded yet. I don't understand exactly WHERE and WHAT CODE in need to insert.

 

Thanks so much in advance! xx

 

https://powdercandleaustralia.com.au/

Replies 2 (2)
nidhipatel
Pathfinder
89 17 17

Hi @gerlikask

 

For Adding search in The header you need to add following code: 

Create one snippet: SALES CHANNELS > Online Store > Themes > Actions > Edit code > Snippet > search-bar.liquid and include below code in search-bar.liquid snippet

<form action="{{ routes.search_url }}" method="get" class="search-bar" role="search">
  <input type="hidden" name="type" value="product">

  <input type="search" name="q" value="{{ search.terms | escape }}" placeholder="{{ 'layout.search_bar.placeholder' | t }}" aria-label="{{ 'layout.search_bar.placeholder' | t }}">
  <button type="submit" class="search-bar--submit icon-fallback-text">
    <span class="icon icon-search" aria-hidden="true"></span>
    <span class="fallback-text">{{ 'layout.search_bar.submit' | t }}</span>
  </button>
</form>

image-20220525-051214.png

Next you need to include this snippet in header file: SALES CHANNELS > Online Store > Themes > Actions > Edit code > Sections > header.liquid and include search-bar snippet above cart button code: 

{% include 'search-bar' %}

image-20220525-051146.png

 

Thank you.

If our answer is helpful then please feel free to Like and Accept it as solution!
Hire our Shopify Developers for all your small & big needs:
New Store Development | Custom Theme Development | Site Speed Optimization
Email: hello@mintyourstore.com | Instagram: @mintyourstore
gerlikask
Tourist
22 0 1

Thank you! This brings me to my second question. How can I add cart button into the header? I removed that a while back, and can't get it back now