Shopify themes, liquid, logos, and UX
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
This is an accepted solution.
This involves 3 steps.If you wish to follow i can assist.
This is an accepted solution.
This involves 3 steps.If you wish to follow i can assist.
Could you teach me how?
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 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" %}
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>
Now you should have a search bar open below your menu.
How can we keep open search box for desktop view & clickable for mobile view ?
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
Hello @ChoosiZon ,
Upon adding your code, the search bar does not give me product suggestions anymore. How may I fix that.?
I face the same issue is there a solution for that
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024