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

[queenac]

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 ?

[KuldeepKumar20]

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

[queenac]

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]

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

[queenac]

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

[partpartpart]

Hi, I have the same concern, But the link you’ve sent is for predictive search

[jasondangsb]

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]

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

” add the following code:

   {%- if collection.handle == 'YOUR-COLLECTION-HANDLE' or collection.handle == 'YOUR-COLLECTION-HANDLE-2' -%}
      

        
        
      

      

      
      {% endif %}

4. That’s it!

Source: https://www.w3schools.com/howto/howto_js_filter_lists.asp

[Giants_Fan]

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]

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

@Giants_Fan try below:

Open main-collection-product-grid.liquid

Find and remove below:

  {%- paginate collection.products by section.settings.products_per_page -%}

Replace with below:

      

        
        
      

      

      

    {% 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]

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]

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

      {%- paginate collection.products by section.settings.products_per_page -%}

Replace with:

      

        
        
      

      

      

    {% assign paginateNum = 10000 %}	  
  {%- paginate collection.products by paginateNum -%}

Should be working now!

[shadowsfall118]

@Giants_Fan did this work for you?

[Giants_Fan]

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

[Giants_Fan]

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]

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

[bidiman]

This one is working for me with dawn 15.2:

Find and remove below:

      {%- paginate collection.products by section.settings.products_per_page -%}

Replace with

      

        
        
      

      

     

    {% assign paginateNum = 10000 %}	  
  {%- paginate collection.products by paginateNum -%}