How can i remove search-bar from header and add direct below on header?

Store Design
, ,

Topic summary

Issue: User wants to relocate the search bar from within the header to directly below it in their Shopify store.

Solution Steps Provided:

  1. Access Theme Code: Navigate to Shopify Admin → Online Store → Themes → Actions → Edit code

  2. Locate Search Bar Code: Open Sections folder → Find header.liquid file → Search for code generating the search bar (typically looks like {% include 'header/search' %} or similar)

  3. Remove from Header: Comment out or delete the search bar code using Liquid comment tags:

{% comment %}
{% include 'header/search' %}
{% endcomment %}
  1. Add Below Header:
  • Copy the search bar code
  • Open Snippets folder → Find search-bar.liquid file
  • Paste the code directly below the header code in header.liquid
  1. Save & Preview: Test changes to verify the search bar appears below the header

Status: Original poster asks follow-up question about adding the search bar below header, suggesting they need clarification on the relocation step. Discussion remains open with implementation guidance provided but not yet confirmed as resolved.

Summarized with AI on November 20. AI used: claude-sonnet-4-5-20250929.
1

full process to remove search feature from header and add the searchbar.

2

To remove the search bar from the header and add it directly below on the header in Shopify, you will need to make changes to your theme’s code. Here are the general steps:

  1. From your Shopify admin, go to Online Store > Themes.
  2. Click the “Actions” button for the theme you want to edit, then select “Edit code” from the drop-down menu.
  3. In the left-hand panel, open the “Sections” folder, then select “header.liquid” file.
  4. Look for the code that generates the search bar in the header. It may look something like this:

{% section 'header-search' %}

  1. Comment out or delete the code to remove the search bar from the header.
  2. Open the “Snippets” folder and select “search-bar.liquid” file.
  3. Copy the code for the search bar.
  4. Go back to the “header.liquid” file and paste the code directly below the header code.

Save the changes and preview your store to see if the search bar has been removed from the header and added directly below it. If you encounter any issues or errors, you can always revert the changes or seek assistance from Shopify’s support team or a Shopify expert.

3

To remove the search feature from the header and add a search bar in Shopify, you’ll need to modify your theme files. Here’s a step-by-step guide:

  1. Access the theme editor: Go to your Shopify admin dashboard and navigate to “Online Store” → “Themes”. Find the theme you’re using and click on the “Actions” dropdown, then select “Edit code”.

  2. Locate the header section: In the theme editor, find the file that controls the header section. This file is typically named header.liquid or similar. Open it in the code editor.

  3. Remove the existing search feature: Search for the code that generates the search feature in the header. It may look something like this:

{% include 'header/search' %}
  • Delete or comment out this line of code to remove the existing search feature. You can comment it out by wrapping it with {% comment %} and {% endcomment %} tags like this:
{% comment %}
{% include 'header/search' %}
{% endcomment %}
​
4

and how can i add this below header?