Shopify themes, liquid, logos, and UX
i would like to setup a search bar on top right or place that sort by , like below
i tried to edit collection template but didnt work . how could i do ?
Hi, Follow this topic- https://shopify.dev/tutorials/add-predictive-search-to-your-shopify-theme
HI @KuldeepKumar20 thanks reply
but this one seems not for search within collection ....
and i dont know how to edit theme code ...
anyone can help ?
thank you
hi, without editing theme code you can not achieve this feature and this is time taking process.
ok i saw some code under the page , but i dont know how to past them on ,which file of theme?
This app https://apps.shopify.com/ultimate-search-and-filter-1 let you add a search bar to collection pages. It show suggestions based on products, collections, and pages.
@queenac I was looking to do the same thing and figured out how.
Notes:
1. Open main-collection-product-grid.liquid
2. Find {%- paginate collection.products by paginateNum -%} and replace with below:
{%- if collection.handle == 'YOUR-COLLECTION-HANDLE' or collection.handle == 'YOUR-COLLECTION-HANDLE-2' -%}
{% assign paginateNum = 10000 %}
{%- else -%}
{% assign paginateNum = section.settings.products_per_page %}
{%- endif -%}
{%- paginate collection.products by paginateNum -%}
Notes:
• You can keep adding "or" statements to add more collections to show the search bar on
• Increase 10000 if you have more that 10,000 products in a single collection
3. Above "<div id="CollectionProductGrid">" add the following code:
<div class="page-width">
{%- if collection.handle == 'YOUR-COLLECTION-HANDLE' or collection.handle == 'YOUR-COLLECTION-HANDLE-2' -%}
<div class="field">
<input class="field__input" type="text" id="filterSearchInput" onkeyup="searchFilter()" placeholder="Search">
<label class="field__label">Search</label>
</div>
<br>
<script>
function searchFilter() {
// Declare variables
var input, filter, ul, li, a, i, txtValue;
input = document.getElementById('filterSearchInput');
filter = input.value.toUpperCase();
ul = document.getElementById("main-collection-product-grid");
li = ul.getElementsByTagName('li');
// Loop through all list items, and hide those who don't match the search query
for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("a")[0];
txtValue = a.textContent || a.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
} else {
li[i].style.display = "none";
}
}
}
</script>
{% endif %}
</div>
4. That's it!
Source: https://www.w3schools.com/howto/howto_js_filter_lists.asp
I've tried your suggestion, but it didn't work, I didn't see a search bar added anywhere? - {%- paginate collection.products by paginateNum -%} wasn't in the main-collection-product-grid.liquid, something very similar was and I found something similar though.
To be clear I'm trying to add a search bar on collection pages, in addition to the search in the header. Ideally I'd like to position it above the vertical sort & filter on dawn theve v7.o
@Giants_Fan I looked at my post and looks like the code I supplied was tested in my modified theme. I will try to test on a raw dawn them and update the guide. I can confirm this does work.
@Giants_Fan try below:
Open main-collection-product-grid.liquid
Find and remove below:
<div id="CollectionProductGrid">
{%- paginate collection.products by section.settings.products_per_page -%}
Replace with below:
<div class="page-width">
<div class="field">
<input class="field__input" type="text" id="filterSearchInput" onkeyup="searchFilter()" placeholder="Search">
<label class="field__label">Search</label>
</div>
<br>
<script>
function searchFilter() {
// Declare variables
var input, filter, ul, li, a, i, txtValue;
input = document.getElementById('filterSearchInput');
filter = input.value.toUpperCase();
ul = document.getElementById("main-collection-product-grid");
li = ul.getElementsByTagName('li');
// Loop through all list items, and hide those who don't match the search query
for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("a")[0];
txtValue = a.textContent || a.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
} else {
li[i].style.display = "none";
}
}
}
</script>
</div>
<div id="ProductGridContainer">
{% assign paginateNum = 10000 %}
{%- paginate collection.products by paginateNum -%}
Note: I removed the if statements that detect the collection handle. This was to show only on specific collection pages. With below it will show on all collection pages.
I'm unable to test as it seems Shopify's preview theme is not working. It works to show the home page but as soon as I click any links it goes back to my published theme.
Let me know how that goes.
I tried this and it does put the search bar on the collection pages, but the search bar doesn't work. Type into it, hit enter and nothing happens?
@Giants_Fan Got it working and was able to use preview mode this morning.
Looks like they changed around some Class and ID names in the latest version of DAWN. I was using an older version. Follow the below to get it working. I tested on an unmodified DAWN theme (7.0.1)
Open main-collection-product-grid.liquid
Find and remove below:
<div class="product-grid-container" id="ProductGridContainer">
{%- paginate collection.products by section.settings.products_per_page -%}
Replace with:
<div class="page-width">
<div class="field">
<input class="field__input" type="text" id="filterSearchInput" onkeyup="searchFilter()" placeholder="Search">
<label class="field__label">Search</label>
</div>
<br>
<script>
function searchFilter() {
// Declare variables
var input, filter, ul, li, a, i, txtValue;
input = document.getElementById('filterSearchInput');
filter = input.value.toUpperCase();
ul = document.getElementById("ProductGridContainer");
li = ul.getElementsByTagName('li');
// Loop through all list items, and hide those who don't match the search query
for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("a")[0];
txtValue = a.textContent || a.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
} else {
li[i].style.display = "none";
}
}
}
</script>
</div>
<div class="product-grid-container" id="ProductGridContainer">
{% assign paginateNum = 10000 %}
{%- paginate collection.products by paginateNum -%}
Should be working now!
Now that I have this working, I noticed it loads all products onto the collection page, instead of breaking into multiple pages. And I noticed when I fix that, the search bar can only see products on the same page.
Anyway to have the searchbar to be able to see the full catalog while limiting products per page?
@Giants_Fan No. The pagination is disabled as I mentioned earlier. This is how this simple javascript is able to filter the results. I believe what you are talking about would involve more code and time. I only use this code on a specific collection that is not included in the main search so this makes sense in my case.
Although I would not worry too much about loading all the products as I believe it still uses lazy-load to load all the image as you scroll. Its not as fast as pagination but from what I can tell its not painfully slow.
You could try and duplicate the main search box functionality and add some statements to restrict the results to that collection but I have not tried this or know if its possible.
Yes this is working now. Thanks for sharing! I modified the placement in the template and still works. Thanks again.
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