Adding an always visible search bar, instead of using the lens

[NicoRoman]

Hello,

I need to add a search bar right below the Main Menu at the top of my page. I want this to be always visible, instead of using the lens and emergent search drawer.

It's ok if it involves using custom code, I just need a bit of help since I’m new at using Shopify and editing the code.

- The site is: https://dankmarket.cl/
- Currently, I’m using the Debut free theme.

After this, it would be good to know how to hide the lens search button next to the cart and account icons at the top (it would become redundant).

Thanks!

[Anonymous]

@NicoRoman 

Hi

Please open header.liquid file.Find the given code({% if section.settings.align_logo == 'left' %}) the paste the below code.

{% if section.settings.align_logo == 'left' %}
<nav class="grid__item medium-up--one-half small--hide" id="AccessibleNav" role="navigation">
{% include 'site-nav', linklist: section.settings.main_linklist %}
<form action="{{ routes.search_url }}" method="get" role="search" class="search-form search-page-form">
<div class="input-group input-group--nowrap">
<div class="input-group__field input-group__field--connected search-form__input-wrapper">
<input
type="search"
name="q"
value="{{ search.terms | escape }}"
placeholder="{{ 'general.search.placeholder' | t }}"
role="combobox"
aria-autocomplete="list"
aria-owns="predictive-search-results"
aria-expanded="false"
aria-label="{{ 'general.search.placeholder' | t }}"
aria-haspopup="listbox"
class="search-form__input"
data-search-page-predictive-search-input
/>

<input type="hidden" name="options[prefix]" value="last" aria-hidden="true" />

<button type="reset" class="search-form__clear-action" aria-label="{{ 'general.search.clear_search_term' | t }}" data-search-page-predictive-search-clear>
{% include 'icon-close' %}
</button>

<div class="predictive-search-wrapper" data-predictive-search-mount="default"></div>
</div>

<button type="submit" class="search-form__connected-submit" aria-label="{{ 'general.search.submit' | t }}" data-search-page-predictive-search-submit>
{% include 'icon-search' %}
</button>
</div>
</form>
</nav>
{% endif %}

and then add CSS for hiding search icon from header right side.

button.btn--link.site-header__icon.site-header__search-toggle.js-drawer-open-top {

 display: none;

}

[ella_h]

Please does this work for any theme?

[dmwwebartisan]

Hey @NicoRoman,

I checked your website and the search drawer is the default functionality of the Debut theme. If you need a search bar in a different place with visible all the time then this can be done by code customization.

I would suggest hiring a Shopify expert for this customization work.

Thanks!

[rhinoquinn]

Hi there, I'm after the same kind of customisation of poss.

1. An always-visible search bar (and retire/disable the lens search function)
2. Move position of Main Menu items below the line with Logo and Cart icon etc

Please see the two snips attached: one showing current layout of Header using Debut theme default positioning options. And the other showing a draft of what I want to achieve.

Thanks!

 

 

[Anonymous]

@NicoRoman 
Hi

Please paste the given code in header.liquid file.Find the ({% if section.settings.align_logo == 'left' %}) code then paste the below code

{% if section.settings.align_logo == 'left' %}
<nav class="grid__item medium-up--one-half small--hide" id="AccessibleNav" role="navigation">
{% include 'site-nav', linklist: section.settings.main_linklist %}
<form action="{{ routes.search_url }}" method="get" role="search" class="search-form search-page-form">
<div class="input-group input-group--nowrap">
<div class="input-group__field input-group__field--connected search-form__input-wrapper">
<input
type="search"
name="q"
value="{{ search.terms | escape }}"
placeholder="{{ 'general.search.placeholder' | t }}"
role="combobox"
aria-autocomplete="list"
aria-owns="predictive-search-results"
aria-expanded="false"
aria-label="{{ 'general.search.placeholder' | t }}"
aria-haspopup="listbox"
class="search-form__input"
data-search-page-predictive-search-input
/>

<input type="hidden" name="options[prefix]" value="last" aria-hidden="true" />

<button type="reset" class="search-form__clear-action" aria-label="{{ 'general.search.clear_search_term' | t }}" data-search-page-predictive-search-clear>
{% include 'icon-close' %}
</button>

<div class="predictive-search-wrapper" data-predictive-search-mount="default"></div>
</div>

<button type="submit" class="search-form__connected-submit" aria-label="{{ 'general.search.submit' | t }}" data-search-page-predictive-search-submit>
{% include 'icon-search' %}
</button>
</div>
</form>
</nav>
{% endif %}

And for hide search box add CSS.

button.btn--link.site-header__icon.site-header__search-toggle.js-drawer-open-top {

display: none;

}

[decorsmarketcom]

thanks @Anonymous , it works!

[Ally_Paris]

Hello @Anonymous ,

I'm looking for the same kind of custom code, but for Supply, do you think it can work ?

Good day ☀

Allyson

[Clairefriz]

When I did this I now have two ' home catelog' how do I fix this, also is it possible to have the search bar at the right where the icon used to be? thanks!

[ella_h]

Does this work for any theme please