Compatibility Badge Block

The Compatibility Badge shows customers at a glance whether a product is compatible with their selected vehicle.

How It Works

Customer selects a vehicle using the Vehicle Selector
On product pages and product cards, the badge appears showing:

- Compatible (green checkmark) — The product fits their vehicle - Not Compatible (red X) — The product does not fit - No Vehicle Selected — Prompts the customer to select a vehicle

Display Styles

Three style options:

Minimal — Just the icon and status text

Standard — Icon, status, and vehicle name

Detailed — Full vehicle details with year and engine

Configuration

In the theme editor:

Compatible color — Default green, customizable

Not compatible color — Default red, customizable

Compatible text — Default "Compatible with your vehicle"

Not compatible text — Default "Not compatible with your vehicle"

Show vehicle name — Toggle to display the matched vehicle

Best Placement

Product cards — In collection pages, near the product title or price
Product pages — Near the title, price, or add-to-cart button
Quick view modals — If your theme supports quick view

How Matching Works

The badge reads the product's vehicle_fitment.rules metafield and compares it against the customer's selected vehicle. The comparison uses brand, model, platform, and year range. No API calls are made — everything happens in Liquid on the server side.