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

NicoRoman
Tourist
3 0 1

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!

Replies 9 (9)

Not applicable

@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
Shopify Partner
2 0 0

Please does this work for any theme?

dmwwebartisan
Shopify Partner
12267 2545 3687

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!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
rhinoquinn
New Member
5 0 0

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!

current layout.png

desired layout.png

Not applicable

@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
Tourist
6 0 0

thanks @Anonymous , it works!

Ally_Paris
Tourist
9 0 0

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
Visitor
1 0 0

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!Screen Shot 2020-11-18 at 11.49.48 AM.png

ella_h
Shopify Partner
2 0 0

Does this work for any theme please