Solved

(Debut Theme) Keep the search bar open

Joemark1
Shopify Partner
2 0 0

Hi guys;

 

I'm having a hard time keeping the search bar open in debut, not just the icon but have also a search field open. Example: 

I've searched for other topics for the same thing but they're outdated. I know some code has to be deleted/written could someone help me out and point me where and what has to be done?

 

Thanks in advance.

Accepted Solution (1)

ChoosiZon
Shopify Partner
416 66 111

This is an accepted solution.

This involves 3 steps.If you wish to follow i can assist.

Donate
For faster response with a fee pls email to : choositech@outlook.com

View solution in original post

Replies 11 (11)

ChoosiZon
Shopify Partner
416 66 111

This is an accepted solution.

This involves 3 steps.If you wish to follow i can assist.

Donate
For faster response with a fee pls email to : choositech@outlook.com
Joemark1
Shopify Partner
2 0 0

Could you teach me how?

ChoosiZon
Shopify Partner
416 66 111

Hi Sorry for the late reply.

First you have to create a snippet call search-box.liquid. You can do so via the theme editor.

Then paste this inside search-box.liquid and click save :

 

{% if search.performed  %}

{% else %}
<div class="search-form__container" data-search-form-container="">
      <form class="search-form search-bar__form" action="/search" method="get" role="search">
        <div class="search-form__input-wrapper">
          <input required type="text" name="q" placeholder="Search" role="combobox" aria-autocomplete="list" aria-owns="predictive-search-results" aria-expanded="false" aria-label="Search" aria-haspopup="listbox" class="search-form__input search-bar__input" data-predictive-search-drawer-input="" autocorrect="off" autocomplete="off" autocapitalize="off" spellcheck="false">
          <input type="hidden" name="options[prefix]" value="last" aria-hidden="true">
          <div class="predictive-search-wrapper predictive-search-wrapper--drawer" data-predictive-search-mount="drawer"></div>
        <div style="position: absolute !important; overflow: hidden; clip: rect(0 0 0 0); height: 1px; width: 1px; margin: -1px; padding: 0; border: 0;" data-search-announcer="" aria-live="polite" aria-atomic="true"></div></div>

        <button class="search-bar__submit search-form__submit" type="submit" data-search-form-submit="">
          <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-search" viewBox="0 0 37 40"><path d="M35.6 36l-9.8-9.8c4.1-5.4 3.6-13.2-1.3-18.1-5.4-5.4-14.2-5.4-19.7 0-5.4 5.4-5.4 14.2 0 19.7 2.6 2.6 6.1 4.1 9.8 4.1 3 0 5.9-1 8.3-2.8l9.8 9.8c.4.4.9.6 1.4.6s1-.2 1.4-.6c.9-.9.9-2.1.1-2.9zm-20.9-8.2c-2.6 0-5.1-1-7-2.9-3.9-3.9-3.9-10.1 0-14C9.6 9 12.2 8 14.7 8s5.1 1 7 2.9c3.9 3.9 3.9 10.1 0 14-1.9 1.9-4.4 2.9-7 2.9z"></path></svg>
          <span class="icon__fallback-text">Submit</span>
        </button>
      </form>
</div>

{% endif %}

 

 

Donate
For faster response with a fee pls email to : choositech@outlook.com
ChoosiZon
Shopify Partner
416 66 111

Then open your header.lquid from Sections in theme editor.

Look for </header> tag at around line 252.

Paste this just above </header> tag :

{% render "search-box" %} 
Donate
For faster response with a fee pls email to : choositech@outlook.com
ChoosiZon
Shopify Partner
416 66 111

Then at same header.liquid find line 118 - 121 (roughly if your code was edited).

Remove this part and save :

 

<button type="button" class="btn--link site-header__icon site-header__search-toggle js-drawer-open-top">
            {% include 'icon-search' %}
            <span class="icon__fallback-text">{{ 'layout.navigation.search' | t }}</span>
</button>

 

 

Donate
For faster response with a fee pls email to : choositech@outlook.com
ChoosiZon
Shopify Partner
416 66 111

Now you should have a search bar open below your menu.

Donate
For faster response with a fee pls email to : choositech@outlook.com
Vishak
Visitor
1 0 0

How can we keep open search box for desktop view & clickable for mobile view ?

King-Kang
Trailblazer
148 8 76

Hi,

I am having an issue with my search bar, in a sticky header, on Debut theme.

When I scroll down and press the search icon everything inside the following div doesn't show:

<div class="search-bar__interior">

The entire page becomes darker, just like when you open the search bar.

I think the search bar is open somewhere in top of the page, where is not supposed to be with a sticky header.

Any hints?

Thank you,

Best regards

Khan01
Excursionist
70 0 4

Hello @ChoosiZon ,

Upon adding your code, the search bar does not give me product suggestions anymore. How may I fix that.?

Beginner183
Excursionist
11 1 4

I face the same issue is there a solution for that

jaro0024
Visitor
1 0 0

Hello @Khan01 ,

 

Did you ever find a solution for this?

 

Thanks!