How to display search bar on mobile with minimal theme?

[DizzyDuck]

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

[SumanSaurabh]

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!

[DizzyDuck]

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 

 

[SumanSaurabh]

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!

[SumanSaurabh · 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.

[DizzyDuck]

Thank you so much Suman,

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

Amazing, thanks again 😊

[RGWELD]

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]

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.

[jugaad]

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 

[Transit_Design]

Suman, Thank you! This worked on mobile, but now I have 2 search bars on my desktop header. Do you know how to fix this?