Dawn Theme: Search Bar in Filters (Using Product Metafields)

[woodpaz_books]

Hello everyone!

I have created filters for my products by setting up product metafields. Is there a way to add a search bar inside each of the filter options?

Many thanks in advance.

[DaisyVo]

Hi @woodpaz_books 

To add a search bar inside each filter option in Shopify, you can customize your theme:

1. Edit the Theme Code: Go to Online Store > Themes > Actions > Edit Code.
2. Locate the Filter Section: Open the file managing filters, usually named something like collection-filters.liquid.
3. Add a Search Input: Insert a <input> HTML element with JavaScript logic to filter items dynamically within each filter group.

For example:

<input type="text" placeholder="Search" oninput="filterOptions(this)" />

4. Add JavaScript: Write a function like:

function filterOptions(input) {

   const value = input.value.toLowerCase();

   const options = input.nextElementSibling.querySelectorAll('li'); // Adjust selector for your setup

   options.forEach(option => {

      option.style.display = option.textContent.toLowerCase().includes(value) ? '' : 'none';

   });

}

If you have other questions, I am willing to answer them more.

Best regards,

Daisy