Debut Theme - How to keep search box open?

Bruna_Gasparott
New Member
1 0 0

Hello,

Does anyone know how to keep the search box open on Debut theme?

 

TIA

 

 

0 Likes
Russ_Davey
New Member
6 0 0

Id also like to know this.

0 Likes
Alexandru_Derev
Shopify Partner
86 3 20

Hey guys,

For this you need to do two things:

  1. Add the class "search--focus" to the form in Snippets/search-box.liquid so it looks like this : 
    <form action="/search" method="get" class="search-header search search--focus" role="search">
      <input class="search-header__input search__input"
        type="search"
        name="q"
        placeholder="{{ 'general.search.placeholder' | t }}"
        aria-label="{{ 'general.search.placeholder' | t }}">
      <button class="search-header__submit search__submit  btn--link" type="submit">
        {% include 'icon-search' %}
        <span class="icon__fallback-text">{{ 'general.search.submit' | t }}</span>
      </button>
    </form>
    

    Notice the added search--focus.

  2. Adjust the javascript code here Assets/theme.js, line : 1141 - 1143 (if the theme was not adjusted, if it was just look for this code in the file.) to look like this: 

     $(selectors.searchHeaderInput).add(selectors.searchHeaderSubmit).on('focus blur', function() {
          //$(selectors.searchHeader).toggleClass(classes.focus);
        });

    This will comment out the hidding/showing functionality and your searchbox will always be displayed. 

Hope this helps! 

Let me know if you have questions.

Cheers!

Alex Dereveanco | CMO @ visely.io
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution!
- To learn more about the awesome stuff we do head over to visely.io or our blog
alionaz
New Member
2 0 0

Thank you! It worked

0 Likes
trendagogy
New Member
1 0 0

Hi!

 

I tried copying and pasting this into the form, but my search bar is still not remaining open. I also switched Input and Submit like how you showed it in your second picture. Could you please help me with a step-by-step instruction on this?

0 Likes
ehop66
New Member
1 0 0

Is it possible to do this on desktop only and leave the default sea h box closed on mobile? When the search box os open by default on mobile it hides the entire header. Thanks in advance!

0 Likes
Jenny2021
Tourist
5 0 2

I followed step 1 on my website, rauq.ca.

I'm not sure what step 2 does, as it didn't work for me. I tried pasting over lives 1141-1143 in Debut and also tried adding this code to lines 1141-1143. Nothing changed. 

0 Likes