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

0 Likes

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

 

 

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
0 Likes

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
0 Likes
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
New Member
1 0 0

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? 

0 Likes