A Year/Make/Model Fitment Search for Shopify

Keyword search is great for "black t-shirt" and useless for "does this fit my car?" Our client — on Shopify Plus — needed a fitment finder like the automotive sites (think CarID): three dependent dropdowns where each choice narrows the next, and selecting all three drops the shopper directly on the right collection page, not a generic search-results list. Standard themes like Avenue offer basic filtering; they don't do dependent routing or type-ahead. So we built a custom widget.

Two behaviors standard search can't do

• Dependent (step-down) selection — pick Year, and only the Makes that exist for that Year appear; pick Make, and only its Models unlock. Each field is a function of the previous one.
• Routing, not results — completing all three sends the shopper to a specific collection (e.g. /collections/2024-toyota-camry), which is a curated, indexable page — far better for both UX and SEO than a query-string search result.

The data model is the real work

The widget is only as good as the structure beneath it. We organized the catalog with a strict tagging system (and metafields) so the frontend can parse the Year→Make→Model relationships without a heavy third-party app dragging the site down. The tags encode the fitment hierarchy; the script reads them to know which options are valid at each step:

// Fitment encoded in product tags (parsed client-side into a lookup tree):
//   fitment_year_2024, fitment_make_toyota, fitment_model_camry
// Build: { 2024: { toyota: [camry, corolla], honda: [civic] }, ... }

// Step-down logic:
yearSelect.onChange  = () => populate(makeSelect, tree[year]);          // makes for that year
makeSelect.onChange  = () => populate(modelSelect, tree[year][make]);  // models for that make
searchBtn.onClick    = () => {
  // route to the curated collection, not a search page:
  location.href = `/collections/${year}-${make}-${model}`;             // e.g. 2024-toyota-camry
};

Parsing tags client-side keeps it fast and app-free — no per-keystroke server round-trip, no third-party filter app inflating page weight. The collection handles follow a predictable year-make-model convention so the routing URL is built deterministically.

Type-ahead for real catalogs

Scrolling a dropdown of hundreds of makes or models is painful, especially on mobile. We added type-ahead input with a lightweight autocomplete library so shoppers start typing and narrow instantly. Keeping the library lightweight was deliberate — the whole point was speed, and a heavy search app would have defeated it.

Why route to a collection, not a search

Landing on /collections/2024-toyota-camry instead of /search?q=... gives the shopper a clean, curated, shareable page — and gives the store an indexable URL that can rank for that exact fitment query. The finder doubles as an SEO asset: every valid combination is a real collection page, not an ephemeral search result Google won't index.

A fitment finder isn't a search box — it's a routing funnel over a well-tagged catalog. Get the tagging hierarchy right and the frontend is a few hundred lines; get it wrong and no widget will save it.WS24 — how we build dependent-filter search

The result is a fast, guided finder that turns "will it fit?" into a two-or-three-tap path to exactly the right products — no keyword guessing, no heavy app, and a set of curated collection pages that help the store rank. On Shopify Plus, a well-structured catalog plus a light custom widget beats a bloated filter app every time.