About Vehicle Inventory Pro
Vehicle Inventory Pro is a standalone HubSpot CMS module that turns any page into a full vehicle inventory listing. Nested category and vehicle repeaters edited from the page editor, four layouts (grid, list, classic, magazine), live search, body type and condition filters, badges, a specs grid, and built-in Schema.org Vehicle JSON-LD structured data. 80+ style controls. No HubDB. Works on CMS Starter.
Drop it on any HubSpot page — website pages, landing pages, or blog posts — and it inherits theme fonts and primary color automatically. Four completely different looks above with zero code changes, all driven by field values.
Features at a Glance
- Nested repeaters — Up to 10 categories x 50 vehicles each. 500 vehicles per instance.
- Four layouts — Grid (cards with photos), list (horizontal rows), classic (text-only, compact), magazine (large alternating hero photos).
- 8 body types — Sedan, SUV, truck, coupe, van, convertible, wagon, hatchback. Auto-generated filter pills.
- 5 fuel types — Gasoline, diesel, hybrid, electric, plug-in hybrid.
- 3 condition badges — New, used, certified pre-owned. Each with independent color control.
- 7 special badges — Hot deal, just arrived, low miles, price drop, manager special, one owner, certified.
- Full specs grid — Year, make, model, trim, engine, horsepower, transmission, drivetrain, exterior/interior color, mileage, VIN, stock number.
- Schema.org Vehicle JSON-LD — Vehicle / Offer / AutoDealer with make, model, year, mileage, condition, fuel type, price, currency. One toggle to enable/disable.
- Live search — Matches vehicle title, make, model, description in real time. Combines with body type and condition filters.
- Body type filter pills — Auto-generated from body types actually used in your inventory. Click to filter.
- Condition filter pills — Filter by new, used, or certified pre-owned.
- Price handling — Numeric price with currency symbol, or custom suffix (e.g. "Call for price", "Starting at", "MSRP").
- Multi-currency — 15 ISO 4217 currency codes built in (USD, EUR, GBP, CAD, AUD, JPY, CHF, SEK, NOK, DKK, RON, PLN, MXN, BRL, INR).
- Mileage unit — Miles or kilometers, selectable per instance.
- CTA buttons — Per-vehicle call-to-action with customizable text and URL.
- Featured vehicles — Highlighted accent-colored border for featured cars.
- Full i18n — Every label editable: search placeholder, "all" filter, no-results message, count suffix, sidebar label.
- Two font pickers — Heading and body fonts with theme inheritance defaults.
Style Fields Summary (80+)
Container (2)
Max width, horizontal padding.
Colors (38)
Section background, heading, eyebrow, subtitle, category name/description/divider, card background/border/hover border, featured border, vehicle title, spec label/value, price, mileage, description, search background/border/focus/text, filter background/text/border/active background/active text, category nav background/active, condition badge backgrounds (new/used/certified) and text, special badge background/text, CTA background/text/hover, shadow.
Typography (15)
Two font pickers (heading + body) with theme inheritance, plus independent font sizes for heading, eyebrow, subtitle, category name, vehicle title, spec, price, mileage, description, badge, filter, search, and CTA.
Card (12)
Padding, border radius, border width, shadow preset, hover shadow preset, photo height, photo radius, gap between cards, content padding, CTA button radius, CTA padding vertical/horizontal.
Toolbar (6)
Search radius, search padding, filter pill radius, filter padding vertical/horizontal, toolbar gap.
Spacing (6)
Section padding top/bottom, header-to-toolbar gap, toolbar-to-content gap, category-to-category gap, category-header-to-cards gap.
Responsive (2)
Tablet breakpoint (columns halve) and mobile breakpoint (single column, toolbar stacks).
Schema.org JSON-LD — Built for Google Search, AI Overviews & AI Crawlers
Every module instance outputs a Schema.org @graph block containing linked entities: AutoDealer, Vehicle (one per car), and WebPage. All cross-referenced via @id so Google, Bing, Google AI Overviews, Perplexity, ChatGPT, and Claude can traverse the graph and answer questions about your dealership and individual vehicles.
AutoDealer entity
@type: AutoDealer with @id for graph linkingname, url, telephoneaddress — full PostalAddress with street, city, state, ZIP, country
Vehicle entities
@type: Vehicle (or Car) with @id, name, brand, modelvehicleModelDate (year), mileageFromOdometer, bodyType, fuelTypevehicleTransmission, driveWheelConfiguration, vehicleEnginecolor (exterior), vehicleInteriorColorvehicleIdentificationNumber (VIN when provided)itemCondition — mapped to Schema.org enums (NewCondition, UsedCondition, RefurbishedCondition for CPO)offers — Offer with price, priceCurrency (ISO 4217), availability, seller referenceimage — vehicle photo URL
WebPage entity
@type: WebPage with url, name, about referencing the AutoDealer
Why this matters for AI search
Google AI Overviews, Perplexity, ChatGPT browse, and Claude all parse JSON-LD when generating answers. A structured @graph with AutoDealer + Vehicle entities gives AI enough context to answer queries like "what SUVs does Premier Auto Group have under $80k" or "does Classic Motors have any certified BMWs." Toggle schema off from module settings if you output vehicle schema from another source (dealer platform, custom integration).
Accessibility
- Semantic HTML — Section landmarks, proper heading hierarchy (H2/H3/H4), article tags on each vehicle card.
- Keyboard navigation — Search, filter pills, category nav, and CTA buttons fully keyboard operable.
- ARIA labels — Search input, filter groups, section landmarks, condition badges all labeled.
- Focus indicators — Visible focus rings on all interactive elements with
focus-visible styling.
- Color contrast — Default color combinations meet WCAG 2.1 AA contrast requirements.
- Alt text — Photo alt text field on every vehicle for screen reader support.
Responsive Behavior
- Desktop — Full layout at configured column count. Toolbar on a single row. All specs visible.
- Tablet — Columns halve (3 to 2, 4 to 2). Magazine layout collapses photo and text to stacked. Toolbar remains horizontal.
- Mobile — Single column. Toolbar stacks vertically (search, then filters). List layout items become vertical cards. Classic layout single column. CTA buttons full width.
Demo Notes
- Demo 1 (Premier Auto Group) — Grid layout, 3 columns on cream
#faf8f4 background. Inter throughout with blue #0a0a0a accent. Top toolbar with search, body type filter, and condition filter. Six vehicles: 2024 BMW M4 (coupe, new, just arrived, FEATURED), 2023 Range Rover Sport (SUV, certified), 2024 Ford F-150 Lightning (truck, new, electric, hot deal), 2024 Tesla Model 3 (sedan, new, electric, low miles), 2022 Porsche 911 (coupe, used, one owner), 2024 Mercedes E-Class (sedan, new, hybrid, manager special). Cards with 12px radius, small shadow, border, condition badges on photos, specs grid, CTA buttons.
- Demo 2 (Classic Motors) — List layout on white background. Narrower 1100px container. Top toolbar with search and condition filter only. Six pre-owned/certified vehicles: older model years (2019-2022), higher mileage (22k-45k), lower prices ($28k-$53k). Photo-left horizontal rows. Great for used car lots.
- Demo 3 (Fleet Solutions) — Classic text-only layout, 2 columns on light gray
#f5f5f4 background. No photos, no search, no filters, no badges, no CTA buttons. Two categories: Sedans and SUVs (4 vehicles) and Trucks and Vans (4 vehicles). Compact text rows with specs and price. Monochrome neutral palette. Built for wholesale/fleet buyers.
- Demo 4 (Luxury Collection) — Magazine layout on warm ivory
#faf7f2 background. Playfair Display serif headings with gold #b8851f accent. No filters, no search, no stock numbers. Four premium vehicles: Porsche 911 GTS ($175k), Mercedes-AMG GT 63 ($198k), BMW M5 CS ($142k), Range Rover SV ($215k). Large alternating photos, generous spacing, editorial feel. CTA says "Inquire" instead of "View Details."