Refresh theme Search Bar instead of Search Icon

[farukshaban]

Hi everyone,

I just needed some design help, 

In mobile and desktop use i want to use Search bar not a Search icon. It would be great the search bar to be open all the time. It's more user friendly when using a bar instead of icon.

If there is some design solutions to that I would be thankfull,

I am using Refresh theme,

my site is www.carbox-ks.com

All the Best, 

[oscprofessional]

@farukshaban 
Hello,
I Have Checked your Site Currently your site it is block please check
like This

[umerjaved94]

Hello,

If you want it to be open at all times then the best solution for mobile is to append the search bar at the end of the header, or move it to the footer just for mobile and have it opened at all times.

Besides that, you can't do much without the icon on mobile. That's what I have seen in the stores for 7 years now.

Note: Just follow what Ujjaval suggested for desktop but I wouldn't suggest that solution for mobile, I don't think that's user-friendly because the size of the screen is too small.

Umer J.

[Ujjaval · Accepted solution]

@farukshaban 
put below code in header.liquid file here shown in below pic:
replace whole below code with the  <details-modal>

till here 

<predictive-search class="search-modal__form" data-loading-text="Po ngarkohet..."><form action="/search" method="get" role="search" class="search search-modal__form">
                  <div class="field">
                    <input class="search__input field__input" id="Search-In-Modal" type="search" name="q" value="" placeholder="Kërko" role="combobox" aria-expanded="false" aria-owns="predictive-search-results-list" aria-controls="predictive-search-results-list" aria-haspopup="listbox" aria-autocomplete="list" autocorrect="off" autocomplete="off" autocapitalize="off" spellcheck="false">
                    <label class="field__label" for="Search-In-Modal">Kërko</label>
                    <input type="hidden" name="options[prefix]" value="last">
                    <button class="search__button field__button" aria-label="Kërko">
                      <svg class="icon icon-search" aria-hidden="true" focusable="false" role="presentation">
                        <use href="#icon-search">
                      </use></svg>
                    </button>
                  </div><div class="predictive-search predictive-search--header" tabindex="-1" data-predictive-search="">
                      <div class="predictive-search__loading-state">
                        <svg aria-hidden="true" focusable="false" role="presentation" class="spinner" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
                          <circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
                        </svg>
                      </div>
                    </div>

                    <span class="predictive-search-status visually-hidden" role="status" aria-hidden="true"></span></form></predictive-search>

Result : 

[farukshaban]

Changed the code, nothing happened. 😕

Is it my CSS file ?

[Ujjaval]

@farukshaban 
it's not css file it's header.liquid file see on above image i sent to you previous comment .

[farukshaban]

https://prnt.sc/kHsax9p2E_v8

I already changed the code from header liquid, but nothing changes.

[Ujjaval]

@farukshaban Could you provide your store accessibility . So , i will try to do . 

[farukshaban]

That I can't do. You could explain me what it's the difference and I can try to fix it.

Thank you in advance.

[niceeee]

Hello how can I add it in the new version of refresh theme cause I can't find the <details-modal> 

[lariwo]

I would also like to know how to do this in the lastest version of this theme.

I am at version 11.0.0 right now

[numberblockone]

Hi, I've tried replacing provided code in the header.liquid for the Crave theme but nothing  has happend.

Please look into it as this code doesn't seem to be working.

Or if anybody else can provide with the solution?