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

Store Design
, , , , ,

Topic summary

Goal: Add a search bar inside each product filter (built with metafields) in the Dawn theme.

Approach proposed:

  • Customize theme code: Online Store > Themes > Actions > Edit Code.
  • Locate the filter template/section (e.g., collection-filters.liquid).
  • Insert a search input inside each filter group and attach an input handler (oninput).
  • Add JavaScript that reads the input value, finds the corresponding option list (e.g., li items), and shows/hides options based on text matches. Selectors may need adjustment to match the store’s HTML structure.

Notes:

  • This is a front-end filtering of visible options, not a backend/search index change.
  • No images or attachments; a brief code example was referenced for the input and JS function.

Status: Guidance provided; no confirmation of implementation success. The responder offered further help if needed.

Summarized with AI on December 14. AI used: gpt-5.
2

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 HTML element with JavaScript logic to filter items dynamically within each filter group.

For example:

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