Skip to main content

Finder Sections (Cascading Dropdowns)

The Vertex Finder section is a cascading-dropdown product discovery widget. Buyers narrow down to the exact part they need by choosing 3 successive values โ€” Make โ†’ Model โ†’ Year, or Brand โ†’ Category โ†’ Capacity, or Printer Brand โ†’ Model โ†’ Color โ€” and the finder takes them to the filtered collection.

Vertex ships four demo presets โ€” Vertex (industrial / MRO), Throttle (auto parts), OfficeIT (office & IT), and Inkline (print supplies). There are three finder types, and the Finder section is wired into three of the four presets by default:

  • Throttle (auto parts) โ€” Make / Model / Year
  • OfficeIT (office & IT) โ€” Brand / Category / Capacity
  • Inkline (print supplies) โ€” Printer Brand / Model / Color

The Vertex (industrial) preset ships without a finder โ€” it relies on faceted collection filters and predictive search instead.

Make/Model/Year finder above hero (Throttle preset)

One section, three finder types

You don't install a different section for each industry โ€” it's the same Finder section in every preset. Each preset just fills in its own dropdown labels and option lists (Make/Model/Year, Brand/Category/Capacity, or Printer Brand/Model/Color). Switching the cascade to another vertical is a matter of editing those labels and options.

Make/Model/Year finderโ€‹

The finder is a 3-level cascade. Choose Level 1 โ†’ Level 2's options populate based on the Level 1 choice โ†’ choose Level 2 โ†’ Level 3's options populate โ†’ click Submit โ†’ go to the filtered collection.

Open Shopify admin โ†’ Online Store โ†’ Themes โ†’ Customize. In the page editor, click Add section and choose Finder.

Settingsโ€‹

  • Heading โ€” "Find parts for your vehicle" or "Find toner for your printer".
  • Intro text โ€” Short reassurance โ€” "Select your make, model, and year to see compatible parts.".
  • Drop-down 1 / 2 / 3 label โ€” The visible label for each level โ€” e.g. Make, Model, Year. Change these labels (plus the option blocks below) to turn the same section into any cascade you like.
  • Query param name (per drop-down) โ€” The URL parameter each level adds to the search/collection link (e.g. make, model, year). Defaults to q1 / q2 / q3 if left blank.
  • Submit button label โ€” "Find parts" or "Find toner".
  • Form action URL โ€” Where the form submits. Defaults to /search; point it at a collection URL (e.g. /collections/all) to filter a collection instead.
  • Color scheme โ€” Standard color scheme dropdown (Light / Accent band / Dark).
  • Vertical padding โ€” How much breathing room the finder band gets above and below.

Each drop-down's choices come from option blocks you add to the section โ€” one block per choice. A Drop-down 2 / 3 option can set a Parent value so it only appears once the matching parent choice is selected, which is how the cascade narrows.

The three finder typesโ€‹

1. Make / Model / Year โ€” Throttle presetโ€‹

For auto-parts distributors with fitment-driven catalogs.

Cascade:

  1. Make โ€” Ford, Toyota, Chevrolet, BMW, etc.
  2. Model โ€” populated from the chosen Make (F-150, Camry, Silverado, 3 Series)
  3. Year โ€” populated from the chosen Make and Model (2018, 2019, 2020, ...)

Submit: takes the buyer to the matching collection, filtered to products tagged with that vehicle.

Data setup: add the choices directly to the section as option blocks in the theme editor:

  • A Drop-down 1 option for each Make (Ford, Toyota, Chevroletโ€ฆ)
  • A Drop-down 2 option for each Model, with its Parent value set to the Make it belongs to
  • A Drop-down 3 option for each Year, with its Parent value set to the Model it belongs to

Then tag your collections so the submitted URL matches (Vertex uses Shopify's native tag-based filtering).

2. Brand / Category / Capacity โ€” OfficeIT presetโ€‹

For office, IT, and electronics distributors.

Cascade:

  1. Brand โ€” HP, Dell, Lenovo, Apple, Cisco
  2. Category โ€” populated from the chosen Brand (Laptops, Monitors, Routers, Printers)
  3. Capacity โ€” populated from the chosen Brand and Category (8 GB / 16 GB / 32 GB ยท 24" / 27" / 32" ยท etc.)

Submit: takes the buyer to the matching brand-and-category collection.

Data setup: add the choices as option blocks in the theme editor โ€” a Drop-down 1 option per Brand, a Drop-down 2 option per Category (with its Parent value set to the Brand), and a Drop-down 3 option per Capacity (with its Parent value set to the Category).

3. Printer Brand / Model / Color โ€” Print-supply variantโ€‹

For print-supply distributors selling toner, ink, and consumables that need to match a specific printer.

Cascade:

  1. Printer Brand โ€” HP, Canon, Brother, Epson, Xerox, etc.
  2. Printer Model โ€” populated from the chosen Brand (LaserJet Pro M404, PIXMA TR8620, etc.)
  3. Color โ€” populated from the chosen Brand and Model (Black, Cyan, Magenta, Yellow, or Multi-pack)

Submit: takes the buyer to the matching collection, filtered to cartridges compatible with that printer.

Data setup: add the choices as option blocks in the theme editor โ€” a Drop-down 1 option per Printer Brand, a Drop-down 2 option per Printer Model (with its Parent value set to the Brand), and a Drop-down 3 option per Color (with its Parent value set to the Model).

This cascade ships preconfigured on the Inkline print-supply preset, so a print-supply storefront gets a turnkey toner finder out of the box โ€” just swap the demo options for your own printer line-up.

How the cascade worksโ€‹

The finder's choices come from the option blocks you add to the section, so everything is built into the page. From there:

  1. On page load, Level 1's options are populated from its Drop-down 1 option blocks
  2. When the buyer selects Level 1, Level 2 narrows to the options whose Parent value matches the Level 1 choice
  3. When the buyer selects Level 2, Level 3 narrows to the options whose Parent value matches the Level 2 choice
  4. On submit, the buyer is taken to the search results or collection, with each level added as its query parameter

The options are built into the page when it loads โ€” so there's no extra network request and the cascade is instant.

Works without JavaScript

The first level's options are built right into the page, so the finder still works even if a buyer's browser has JavaScript disabled โ€” they can submit the first level alone and land on the filtered results. This is the same progressive-enhancement philosophy you'll see throughout Vertex.

Setting up your finder dataโ€‹

For each finder type, you need to:

  1. Set the three drop-down labels to your cascade (e.g. Make / Model / Year), and the Query param name for each level if you want clean URLs.
  2. Add an option block per choice โ€” one Drop-down 1 option per top-level value, then Drop-down 2 and 3 options with their Parent value set so each level narrows the next.
  3. Point the Form action URL at /search (default) or a collection (e.g. /collections/all).
  4. Tag your collections so the filtered URL matches. Vertex uses Shopify's native tag-based filtering, so a collection of "Ford F-150 parts" should have the tag vehicle:ford-f-150.

โ†’ The three demo presets (Throttle, OfficeIT, Inkline) already ship a fully populated finder โ€” duplicate one and swap in your own labels and options.

Where to place the finderโ€‹

PositionBest for
Top of the homepage, immediately under the heroVerticals where the finder is the homepage value prop (auto parts, print supplies)
Inside the hero (as a side panel)Verticals where the hero image carries the value prop and the finder is a parallel call-to-action
Below the featured collectionVerticals where the finder is one of several browsing paths
On a dedicated finder pageVerticals where the finder is the primary navigation method โ€” link to it from the header secondary menu

The Throttle and Inkline presets place the finder under the hero. The OfficeIT preset uses a smaller variant inside the hero.

B2B and the finderโ€‹

For signed-in B2B buyers, the finder takes them to the filtered collection โ€” and that collection respects the buyer's B2B catalog scope. So a Ford F-150 search shows only the F-150 parts that are in the buyer's catalog, with the buyer's volume pricing tiers applied.

The finder itself doesn't filter by catalog โ€” that filtering happens on the collection page once they land there. This is the correct split: the finder narrows to the right product family; the collection shows only what the buyer can buy at the right price.

Tips for finder data qualityโ€‹

  • Use consistent capitalization in your entries (always Ford, never FORD or ford) โ€” the cascade matches strings exactly
  • Avoid trailing whitespace in entry values โ€” even invisible whitespace will break the cascade
  • Fill in all 3 levels for every entry โ€” incomplete entries break the cascade for everyone downstream of the missing level
  • Set a sensible default for Target collection โ€” buyers who submit a partial selection (or whose selection has no matches) land there

What's nextโ€‹