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.
Solved! Go to the solution
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 %}
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>
User | Count |
---|---|
389 | |
204 | |
123 | |
46 | |
42 |