how Could i Add search bar searching within collection for simple theme ?

queenac
Tourist
22 0 2

i would like to setup a search bar on top right or place that sort by , like below 

1589439559455.jpg

i tried to edit collection template but didnt work . how could i do ?

Replies 16 (16)

KuldeepKumar20
Shopify Partner
279 34 62

Hi, Follow this topic- https://shopify.dev/tutorials/add-predictive-search-to-your-shopify-theme

For Design, Development and custom changes Hire Me.
If your problem solved then Like & Accept this Solution.
Email ID: kuldeep200395@gmail.com
queenac
Tourist
22 0 2

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

KuldeepKumar20
Shopify Partner
279 34 62

hi, without  editing theme code you can not achieve this feature and this is time taking process.

For Design, Development and custom changes Hire Me.
If your problem solved then Like & Accept this Solution.
Email ID: kuldeep200395@gmail.com
queenac
Tourist
22 0 2

ok i saw some code under the page , but i dont know how to past them on ,which file of theme?

 

partpartpart
Excursionist
20 0 6
Hi, I have the same concern, But the link you've sent is for predictive search

jasondangsb
Shopify Partner
117 0 5

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.

shadowsfall118
Shopify Partner
125 13 31

@queenac I was looking to do the same thing and figured out how.

Notes:

  • You will need to disable paginate. This can be set per collection.
  • This was tested using dawn theme.

 

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

Giants_Fan
Excursionist
30 0 8

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

shadowsfall118
Shopify Partner
125 13 31

@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.

 

shadowsfall118
Shopify Partner
125 13 31

@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.

Giants_Fan
Excursionist
30 0 8

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?

shadowsfall118
Shopify Partner
125 13 31

@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!

shadowsfall118
Shopify Partner
125 13 31

@Giants_Fan did this work for you?

Giants_Fan
Excursionist
30 0 8

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?

shadowsfall118
Shopify Partner
125 13 31

@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.

 

Giants_Fan
Excursionist
30 0 8

Yes this is working now.  Thanks for sharing!  I modified the placement in the template and still works.  Thanks again.