Shopify themes, liquid, logos, and UX
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,
Solved! Go to the solution
This is an 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
Hello,
I Have Checked your Site Currently your site it is block please check
like This
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.
This is an 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 :
Changed the code, nothing happened. 😕
Is it my CSS file ?
@farukshaban
it's not css file it's header.liquid file see on above image i sent to you previous comment .
@farukshaban Could you provide your store accessibility . So , i will try to do .
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.
Hello how can I add it in the new version of refresh theme cause I can't find the <details-modal>
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
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?
Dropshipping, a high-growth, $226 billion-dollar industry, remains a highly dynamic bus...
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024In today’s interview, we sat down with @BSS-Commerce to discuss practical strategies f...
By JasonH Nov 13, 2024