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?
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024