Vehicle Selector Block

The Vehicle Selector is the primary storefront block that lets customers select their vehicle and filter products by compatibility.

How It Works

The selector provides a cascade dropdown (similar to the admin fitment editor):

Customer selects their Brand

Then their Model

Then Platform (optional)

Then Year

Optionally Engine/Variant

Once a vehicle is selected, the store remembers it and all compatibility badges and filters update automatically.

Features

Multi-stage cascade — 5 levels of filtering for precise vehicle selection
Mobile-friendly — Renders as a bottom sheet on mobile devices
HSN/TSN tab — Optional tab for German vehicle registration lookup (Enterprise)
My Garage integration — Quick switch between saved vehicles
Persistent selection — Remembers the customer's vehicle across page navigations
Localized — Available in 40+ languages, automatically uses your store's locale

Configuration Options

In the theme editor, you can customize:

Filter levels — Choose how many cascade levels to display (3–6)

Button style — Primary, secondary, or plain

Colors — Match your theme's color scheme

Labels — Customize dropdown labels and button text

Redirect — Optionally redirect to a filtered collection page after selection

Best Placement

Homepage — In the hero section as a prominent "Find parts for your vehicle" widget
Collection pages — Above the product grid as a filter
Header/Navigation — As a persistent vehicle selector (via app embed)

Events

The selector emits a fitment:vehicle-selected event that other blocks (badge, filter, table) listen to. This enables real-time updates across the page without page reloads.