Simple theme - move search bar and resize header

Highlighted
Tourist
12 1 0

Hello,

Our site is here: https://liquidispose.co.uk/

We're looking to re-locate the search bar to a more prominent position on the page - perhaps to the menu - is this possible?

Also, we'd like to match the font size of the text above the collection list on the homepage to that of the menu. We'd also like to make this bold. Can anyone help?

Thanks, Lucy.

0 Likes
Highlighted
Shopify Partner
1838 174 631

Hi Lucy,

re-locate the search bar to a more prominent position on the page - perhaps to the menu - is this possible?

Yes it is. How comfortable are you editing template code when following step by step instructions? The change does require a few more steps than usual, but nothing extraordinry - in fact, I've already made the change in-browser simply to make sure it is possible ;-)

we'd like to match the font size of the text above the collection list on the homepage to that of the menu

You'd need to edit theme.scss.liquid style for that by navigating over to Online Store > Themes > Actions drop down then choose Duplicate to make a backup before we apply changes (just in case). Then Actions > Edit code and open the file Assets / theme.scss.liquid

Within that file search for

h2 {
  font-size: em(floor($font-size-header * 0.85)); //20px
}

Now you can set it to

h2 {
  font-size: $font-size-nav;
  font-weight: 700;
}

Beware this will affect all headings of type H2, not just the collection heading.

Best wishes!

I turn coffee in to code - since 1998
0 Likes
Highlighted
Tourist
12 1 0

Hello Karl,

Thank you very much for your response. I'm fairly comfortable with editing code - the search bar in that location is perfect. I'd be very grateful if you could do step-by-step instructions.

Thank you also for the font change information!

Lucy.

 

0 Likes
Highlighted
Shopify Partner
1838 174 631

Alright then, time to get a cup of brew and get started.

Step 0 - Duplicate your theme

Don't skip this step. We will be making quite a number of individual changes, each introducing potential to break stuff and you do not want to be stuck with a broken live store. Navigate to Online Store > Themes then Actions > Duplicate.

Step 1 - Moving the search form element

Actions > Edit code and then open Sections / header.liquid. Look for this bit of code and cut it - we will be pasting it in another section.

<form action="/search" method="get" class="search-bar small--hide" role="search">
  {% comment %}<input type="hidden" name="type" value="product">{% endcomment %}
  <button type="submit" class="search-bar__submit">
    {% include 'icon-search' %}
    <span class="icon__fallback-text">{{ 'general.search.submit' | t }}</span>
  </button>
  <input type="search" name="q" class="search-bar__input" value="{{ search.terms | escape }}" placeholder="{{ 'general.search.placeholder' | t }}" aria-label="{{ 'general.search.placeholder' | t }}">
</form>

Now open Sections / sidebar.liquid and look for

<ul class="list--nav">

Right after that we want to add a new list item that will hold our form so let's add it as so

<li class="site-nav__item small--hide">
  <!-- replace this comment with the form -->
</li>

Replace the comment in there with the pasted form we cut beforehand. You should now have this

<li class="site-nav__item small--hide">
  <form action="/search" method="get" class="search-bar small--hide" role="search">
    {% comment %}<input type="hidden" name="type" value="product">{% endcomment %}
    <button type="submit" class="search-bar__submit">
      {% include 'icon-search' %}
      <span class="icon__fallback-text">{{ 'general.search.submit' | t }}</span>
    </button>
    <input type="search" name="q" class="search-bar__input" value="{{ search.terms | escape }}" placeholder="{{ 'general.search.placeholder' | t }}" aria-label="{{ 'general.search.placeholder' | t }}">
  </form>
</li>

What we have now is a new static list item in the sidebar navigation that holds the search form. We added a small--hide class to it because in mobile view, we do not want to show the search form and its list item in the menu. However, the search form isn't styled up nicely now that it sits elsewhere.

Step 2 - Styling the search form again

Open Assets / theme.scss.liquid and search for the commented section "Navigation styles" where you will find the site-nav__item class. We need to add a few nested classes here

.search-bar {
  padding: 4px 0; 
}

That one is to pad the form a bit within the list item so that the list items are uniform in height. 

.search-bar__submit {
  background: transparent;
  border: 0;
}

That's to remove the default button styling and leave us with the search icon itself. 

.search-bar__input {
  background: transparent;
  border: 0;
  width: calc(100% - 66px);
}

Last but not least, this styles up the input element and most importantly takes care of its width using that CSS calc function. So you should be left with following once all is done and dusted:

/*====== Navigation styles ======*/

@include media-query($medium-up) {
  .site-nav__item {
    border-bottom: 1px solid $color-border;

    &:first-child {
      border-top: 1px solid $color-border;
    }
  }

  .site-nav__grandchild {
    margin-left: 10px;
  }
  
  .search-bar {
    padding: 4px 0; 
  }
  
  .search-bar__submit {
    background: transparent;
    border: 0;
  }
  
  .search-bar__input {
    background: transparent;
    border: 0;
    width: calc(100% - 66px);
  }
}

Step 3 - Just kidding

That's it. Test that all is working

  • Resize the window while still remaining in desktop view to make sure the form element sizes correctly within the navigation. Search for some dispensers.
  • Check mobile view - the search icon should be sat lonely in the top left and redirect to a dedicated search page as is default for the Simple theme. Within the mobile menu, the search item should not be visible.
  • Enjoy

Let me know if something goes wonky and we can work it out.

Best wishes!

 

I turn coffee in to code - since 1998
1 Like
Highlighted
Tourist
12 1 0

Thank you so much! That has worked perfectly and has saved us hours of work.

0 Likes
New Member
11 0 0

Hey Karl,

 

I'm looking to do something similar. I'm looking to simply remove the search bar.

 

I see where to remove it. However, when I do, the Cart button moves over. I believe it's because of the break points that are used since the cart takes up four-fifths.

 

Can't seem to figure out how to just remove it.

 

Any help would be greatly appreciated.

 

Thanks,

0 Likes
Highlighted
New Member
11 0 0

Nevermind. Just figured it out. haha

0 Likes
Highlighted
Excursionist
18 0 0

Hello Karl, I am using a minimal theme and looking to move my search bar from announcement bar to the left of my logo, and login button and cart to the right of it. Possibly adding social media icons next to the search bar as well. Would you be able to guide me how to do it? I am relatively comfortable editing css code myself, but need some guidance please :)

0 Likes
Highlighted
New Member
4 0 0

any chance you can share the solution to the Cart icon jumping over to the left when the search bar is removed via the code above? I would like it to stay where it is. Thanks

0 Likes