FROM CACHE - en_header

Minimal Theme Search Bar

Solved
DizzyDuck
Tourist
7 0 4

Hi all,

Really new to this so no idea on coding 😬

I’m using the minimal theme and my search bar shows in header on desktop but not on mobile.

Is there any way of fixing this?

Thank you

Accepted Solution (1)

Accepted Solutions
SumanSaurabh
Excursionist
30 8 14

This is an accepted solution.

PS: After adding always visible search bar in the header on mobile, you may want to remove the search bar which is already in the menu drop down (when menu expands). If you wish to hide the search bar which is in menu drop down, you can do the following:

1. From your Shopify admin, go to Online Store > Themes.

2. Find the theme you want to edit, and then click Actions > Edit code.

3. In the Snippet directory, click to open your mobile-nav.liquid file.

4. Scroll till bottom and locate the following piece of code:

    <li class="mobile-nav__link">
      {% if section.settings.header_search_enable %}
        <div class="header-bar__module header-bar__search">
          {% include 'search-bar' with 'header' %}
        </div>
      {% endif %}
    </li>

5. Enclose the above piece of code within {% comment %}    ...  {% endcomment %} tag, so this will look like as below:

    {% comment %}
    <li class="mobile-nav__link">
      {% if section.settings.header_search_enable %}
        <div class="header-bar__module header-bar__search">
          {% include 'search-bar' with 'header' %}
        </div>
      {% endif %}
    </li>
    {% endcomment %}

6. Save the changes.

 

Suman Saurabh | Expert in Shopify Development
Was my reply helpful? Please Like & Accept Solution
Want to hire me? Send PM or Skype: omnisitecreations

View solution in original post

Replies 8 (8)
SumanSaurabh
Excursionist
30 8 14

Hi,

The search bar appears when expand the menu in Minimal theme on mobile devices. If you still want to add search bar in the header which is visible on top in the header I have a solution for you that requires some coding.

This solution requires editing of your theme code. Most of the files that make up a theme contain Liquid, Shopify's templating language. Theme files also contain HTML, CSS, and JavaScript. Edit the code for a theme only if you know HTML and CSS, and have a basic understanding of Liquid. To know more what is theme editing, please visit:

https://help.shopify.com/en/manual/online-store/os/using-themes/managing-themes/duplicating-themes

Before you customize your theme, it's a good idea to duplicate your theme to create a backup copy. This makes it easy to discard your changes and start again if you need to.

Steps to duplicate a theme:

1. From your Shopify admin, go to Online Store > Themes.

2. For the theme that you want to duplicate, click Actions > Duplicate.

 

Solution of your specific issue (for latest Minimal Themes):

1. From your Shopify admin, go to Online Store > Themes.

2. Find the theme you want to edit, and then click Actions > Edit code.

3. In the Section directory, click to open your header.liquid file.

4. Find the following line of code:

<div class="wrapper post-large--hide announcement-bar--mobile">

5. Paste the following code just after the above line:

<div class="header-bar__module header-bar__search">
   {% include 'search-bar' with 'header' %}
</div>

6. Save the changes.

I hope this helps.

Thanks!

 

Suman Saurabh | Expert in Shopify Development
Was my reply helpful? Please Like & Accept Solution
Want to hire me? Send PM or Skype: omnisitecreations
DizzyDuck
Tourist
7 0 4

Hi Suman,

you are amazing. Thank you so much.

I am really grateful but can I ask how can I moved the search bar to be below the menu and cart bar?

Is this possible? If it isn’t I’m happy with the solution you’ve already provided.

I have attached a picture as I’m not great at describing. 

thanks again 

9C493237-E95D-4E69-95DA-EBF3889BE009.jpeg

 

 

SumanSaurabh
Excursionist
30 8 14

Hi,

You'll first need remove the old code which you obtained from previous reply of this post. Now, you'll need to do the following:

1. In the header.liquid file, find the following line of code:

 

{% include 'mobile-nav' with linklists[section.settings.nav_menu] %}

 

2. Copy and paste the below code snippet just after it:

 

    <div class="post-large--hide">
      <div class="header-bar__module header-bar__search">
       {% include 'search-bar' with 'header' %}
      </div>  
    </div>          

 

I hope this will work for you.

Thanks!

 

 

Suman Saurabh | Expert in Shopify Development
Was my reply helpful? Please Like & Accept Solution
Want to hire me? Send PM or Skype: omnisitecreations
SumanSaurabh
Excursionist
30 8 14

This is an accepted solution.

PS: After adding always visible search bar in the header on mobile, you may want to remove the search bar which is already in the menu drop down (when menu expands). If you wish to hide the search bar which is in menu drop down, you can do the following:

1. From your Shopify admin, go to Online Store > Themes.

2. Find the theme you want to edit, and then click Actions > Edit code.

3. In the Snippet directory, click to open your mobile-nav.liquid file.

4. Scroll till bottom and locate the following piece of code:

    <li class="mobile-nav__link">
      {% if section.settings.header_search_enable %}
        <div class="header-bar__module header-bar__search">
          {% include 'search-bar' with 'header' %}
        </div>
      {% endif %}
    </li>

5. Enclose the above piece of code within {% comment %}    ...  {% endcomment %} tag, so this will look like as below:

    {% comment %}
    <li class="mobile-nav__link">
      {% if section.settings.header_search_enable %}
        <div class="header-bar__module header-bar__search">
          {% include 'search-bar' with 'header' %}
        </div>
      {% endif %}
    </li>
    {% endcomment %}

6. Save the changes.

 

Suman Saurabh | Expert in Shopify Development
Was my reply helpful? Please Like & Accept Solution
Want to hire me? Send PM or Skype: omnisitecreations
DizzyDuck
Tourist
7 0 4

Thank you so much Suman,

Both codes worked perfectly and your instructions were brilliant for a complete coding novice.

 

Amazing, thanks again 😊

Michelle_Spear
Tourist
4 0 5

Hi -when i look at our snippets i only see a mobil-menu.liquid

i dont see a nav anywhere-can i add the search bar code to this? 

ozhotdeal
Excursionist
15 0 6

Thanks so much @SumanSaurabh , i've been looking for the answer and i found it from you, want to say thanks so much for your time and help us, much appreciate, the result as the photo attached.

Have a nice day.

IMG_4778.jpg

jugaad
New Member
1 0 0

Hii Suman . Thanks for your help it worked on phone but in desktop it is showing two search bar. I have attached you the image . Please guide me the solution 

jugaad_0-1627592059576.png