Liquid, JavaScript, themes, sales channels
Solved! Go to the solution
This is an accepted solution.
Hi,
Edit the theme files (Venture theme) and open the header.liquid file
Find the 'drawer__search' class.
Cut the all form code like
<form action="/search" method="get" class="drawer__search" role="search">
<input type="search" name="q" placeholder="{{ 'general.search.placeholder' | t }}" aria-label="{{ 'general.search.placeholder' | t }}" class="drawer__search-input">
<button type="submit" class="text-link drawer__search-submit">
{% include 'icon-search' %}
<span class="icon__fallback-text">{{ 'general.search.submit' | t }}</span>
</button>
</form>
Paste the code above of '<div id="NavDrawer" class="drawer drawer--left">' div.
And add the css code in theme.scss.liquid file
@media only screen and (min-width: 750px){
form.drawer__search {
display: none;
}
}
Thanks.
This is an accepted solution.
Hi,
Edit the theme files (Venture theme) and open the header.liquid file
Find the 'drawer__search' class.
Cut the all form code like
<form action="/search" method="get" class="drawer__search" role="search">
<input type="search" name="q" placeholder="{{ 'general.search.placeholder' | t }}" aria-label="{{ 'general.search.placeholder' | t }}" class="drawer__search-input">
<button type="submit" class="text-link drawer__search-submit">
{% include 'icon-search' %}
<span class="icon__fallback-text">{{ 'general.search.submit' | t }}</span>
</button>
</form>
Paste the code above of '<div id="NavDrawer" class="drawer drawer--left">' div.
And add the css code in theme.scss.liquid file
@media only screen and (min-width: 750px){
form.drawer__search {
display: none;
}
}
Thanks.
Thank you so much for this! Is there a way to move it just below the the header?
I want to do same thing in Shella theme. Can you suggest me what should i do for that..mobile view search
@KuldeepKumar20 I am having a similar issue, but it happens on my desktop and mobile. When you open the search bar you can't click on it or close it, I am guessing is because it is too close to the header.
How can move it down so when I click on the search icon it opens under the header?
https://newdaysports.com/pages/shop
pw: CoschStudio
Thanks so much!
Thanks!
This worked perfectly! I have a question - is it possible to move i to the bottom of the mobile screen, always visible?
This would make it more easy to search for the customer
Hope you can help. Thanks
Eirik
Hi I tried this however i lost you on the second step? "And add the css code in theme.scss.liquid file" where do you add it as I pasted it at the top and it didnt work?
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