Hello @AdditivPlus To create a cascading filter system with dynamic metafield values and a search button on the Shop page in the Dawn theme, you’ll need to:
Key Features to Implement
1. Three dropdowns:
. Brand (from metafield: product.metafields.custom.brand)
. Year (from metafield: product.metafields.custom.year)
. Model (product title or handle)
2. Cascading logic:
. Brand → filters available Years.
. Year → filters available Models.
. “Search” button → filters and shows matching products.
3. Values must be dynamically generated from the product catalog — no hardcoded options.
Overview of the Implementation Plan
1. Create a Section (or modify a template) to render the 3 dropdowns.
2. Collect metafields dynamically via JavaScript from products listed on the page (or fetched via Shopify's Storefront API).
3. Use JavaScript to:
. Filter dropdown options based on the previous selection.
. Filter products once "Search" is clicked.
Suggested Implementation Approach
1. Add Metafields to Your Products
Ensure the following metafields exist on each product in Settings > Custom data > Products:
. Namespace: custom
. Key: brand (single-line text)
. Key: year (single-line text)
2. Create the Filter Block
In sections/main-collection-product-grid.liquid (or a custom section on the Shop page), add this HTML:
<div id="cascading-filters">
<select id="brand-filter">
<option value="">Select Brand</option>
</select>
<select id="year-filter" disabled>
<option value="">Select Year</option>
</select>
<select id="model-filter" disabled>
<option value="">Select Model</option>
</select>
<button id="filter-search" disabled>Search</button>
</div>
3. Expose Product Metafields in Liquid
Below the product grid, expose the data in a JavaScript-readable way:
<script>
window.productData = [
{% for product in collection.products %}
{
id: {{ product.id }},
handle: "{{ product.handle }}",
title: "{{ product.title | escape }}",
brand: "{{ product.metafields.custom.brand | escape }}",
year: "{{ product.metafields.custom.year | escape }}"
}{% unless forloop.last %},{% endunless %}
{% endfor %}
];
</script>
4. Add JavaScript for Cascading Logic
<script>
document.addEventListener("DOMContentLoaded", function () {
const data = window.productData;
const brandFilter = document.getElementById("brand-filter");
const yearFilter = document.getElementById("year-filter");
const modelFilter = document.getElementById("model-filter");
const searchBtn = document.getElementById("filter-search");
// Get unique values
const brands = [...new Set(data.map(p => p.brand).filter(Boolean))];
brands.forEach(brand => {
const option = new Option(brand, brand);
brandFilter.appendChild(option);
});
brandFilter.addEventListener("change", () => {
const selectedBrand = brandFilter.value;
yearFilter.innerHTML = `<option value="">Select Year</option>`;
modelFilter.innerHTML = `<option value="">Select Model</option>`;
yearFilter.disabled = !selectedBrand;
modelFilter.disabled = true;
searchBtn.disabled = true;
if (selectedBrand) {
const years = [...new Set(data.filter(p => p.brand === selectedBrand).map(p => p.year).filter(Boolean))];
years.forEach(year => {
yearFilter.appendChild(new Option(year, year));
});
}
});
yearFilter.addEventListener("change", () => {
const selectedBrand = brandFilter.value;
const selectedYear = yearFilter.value;
modelFilter.innerHTML = `<option value="">Select Model</option>`;
modelFilter.disabled = !selectedYear;
searchBtn.disabled = true;
if (selectedBrand && selectedYear) {
const models = data
.filter(p => p.brand === selectedBrand && p.year === selectedYear)
.map(p => ({ title: p.title, handle: p.handle }));
models.forEach(m => {
modelFilter.appendChild(new Option(m.title, m.handle));
});
}
});
modelFilter.addEventListener("change", () => {
searchBtn.disabled = !modelFilter.value;
});
searchBtn.addEventListener("click", () => {
const selectedHandle = modelFilter.value;
if (selectedHandle) {
window.location.href = `/products/${selectedHandle}`;
}
});
});
</script>
Optional Enhancements
. Replace <select> with Tailwind dropdowns or custom UI components.
. Use AJAX instead of page reloads to dynamically render filtered products.
. Replace navigation with a filtered collection grid if multiple models match (instead of redirecting to 1 product).
try this :
Thank you 😊
Was I helpful?
❤
APPS BY US :
Want to modify or custom changes or bug fix on store . Or Need help with your store? Or -Want Complete Storefront
Email me -Goldi184507@gmail.com - Skype: live:.cid.819bad8ddb52736c -Whatsapp: +919317950519
Checkout Some Free Sections
Here
