---
title: Build a Lightning-Fast, Filterable Car Inventory Page in HubSpot CMS
description: Build a filterable car inventory in HubSpot with HubDB, HubL, and IMAGIN.studio. Real-time search, dynamic images, mobile UX. Full code included.
image: https://growthhub.io/hubfs/Build_a_Lightning-Fast_Filterable_Car_Inventory_Page_in_HubSpot_CMS.jpg
---

[![GrowthHub Logo](https://growthhub.io/hubfs/growthhub_hubspot_agency-logo.png)](https://growthhub.io/)

- [Agents ▼](https://growthhub.io/#expertise)
  
  ### Acquisition & Activation
  
  [Activation & CRO Agents](https://growthhub.io/website-design-development) [Content Engine Agents](https://growthhub.io/hubspot-content-engine) [SEO Agents](https://growthhub.io/hubspot-seo)
  
  ### Paid & Programmatic
  
  [Google Ads Agents](https://growthhub.io/hubspot-google-ads-campaigns) [Meta Ads Agents](https://growthhub.io/hubspot-meta-campaigns) [Programmatic SEO Agents](https://growthhub.io/hubdb-dynamic-content)
- [Our Clients](https://growthhub.io/#clients)
- [Our Team](https://growthhub.io/#team)
- [Pricing](https://growthhub.io/pricing)
- [Blog](https://growthhub.io/hubspot-ai-first-blog)
- [Manifesto ▼](https://growthhub.io/ai-first-agency-manifesto-for-hubspot)
  
  ### Our Approach
  
  [How It Works](https://growthhub.io/our-approach) [Our Approach](https://growthhub.io/our-approach-to-hubspot-campaigns) [The Agents-for-GTM Manifesto](https://growthhub.io/ai-first-agency-manifesto-for-hubspot)

[Let's Talk](https://meetings-eu1.hubspot.com/tdalic?uuid=05e37d02-399f-42aa-9341-c0745d569437)

[Agents ▼](https://growthhub.io/#expertise)

### Acquisition & Activation

[Activation & CRO Agents](https://growthhub.io/website-design-development) [Content Engine Agents](https://growthhub.io/hubspot-content-engine) [SEO Agents](https://growthhub.io/hubspot-seo)

### Paid & Programmatic

[Google Ads Agents](https://growthhub.io/hubspot-google-ads-campaigns) [Meta Ads Agents](https://growthhub.io/hubspot-meta-campaigns) [Programmatic SEO Agents](https://growthhub.io/hubdb-dynamic-content)

[Our Clients](https://growthhub.io/#clients)

[Our Team](https://growthhub.io/#team)

[Pricing](https://growthhub.io/pricing)

[Blog](https://growthhub.io/hubspot-ai-first-blog)

[Manifesto ▼](https://growthhub.io/ai-first-agency-manifesto-for-hubspot)

### Our Approach

[How It Works](https://growthhub.io/our-approach) [Our Approach](https://growthhub.io/our-approach-to-hubspot-campaigns) [The Agents-for-GTM Manifesto](https://growthhub.io/ai-first-agency-manifesto-for-hubspot) 

[Let's Talk](https://meetings-eu1.hubspot.com/tdalic?uuid=05e37d02-399f-42aa-9341-c0745d569437)

# Build a Lightning-Fast, Filterable Car Inventory Page in HubSpot CMS

By Tomislaw Dalic October 31, 2025

**200+ cars. Real-time search. Dynamic IMAGIN images. Zero backend.**  
One HubL template. One JavaScript file. *Done.*

I built a **leasing platform with 370+ vehicles** — all filterable, searchable, and powered by **IMAGIN.studio** images. No Node.js. No database. Just **HubDB + HubL + vanilla JS**.

This is the **complete blueprint** — from CSV to live page.

---

## The Full Architecture

```
CSV File (Car Data)
    ↓
HubDB (Structured Database)
    ↓
HubL Template (Server-Side Rendering)
    ↓
JavaScript (Client-Side Filtering)
    ↓
Beautiful Car Inventory Page
```

**No external APIs. No React. No jQuery.** Just HubSpot.

---

## Step 1: The Perfect HubDB Schema

| Field | Type | Example | Why? |
| --- | --- | --- | --- |
| `hs_name` | Text | `bmw-3-series-2024-001` | Unique ID |
| `brand` | Text | `BMW` | Filterable |
| `model` | Text | `3 Series Touring` | Full name |
| `body_style` | Text | `Station Wagon` | Filter + IMAGIN variant |
| `fuel_type` | Text | `Hybrid` | Filter + IMAGIN powerTrain |
| `price_per_month` | Number | `499` | Sorting + range filter |
| `api_make` | Text | `bmw` | IMAGIN-ready |
| `api_modelfamily` | Text | `series-3` | IMAGIN-ready |

**Pro Tip:** Keep `api_*` fields separate — your display name can be “BMW 3 Series Touring”, but IMAGIN needs `series-3`.

---

## Step 2: Import CSV → HubDB (Automated)

```
const hubspot = require('@hubspot/api-client');

async function importCars(csvData) {
  const client = new hubspot.Client({ accessToken: 'YOUR_TOKEN' });
  const tableId = '12345';

  for (const car of csvData) {
    await client.cms.hubdb.rowsApi.createTableRow(tableId, {
      path: car.slug,
      name: car.hs_name,
      values: { /* all fields */ }
    });
  }

  await client.cms.hubdb.tablesApi.publishDraftTable(tableId);
  console.log('Imported & published!');
}
```

---

## Step 3: The HubL Template (Copy-Paste Ready)

```
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">

<div class="container-fluid py-5">
  <div class="row">
    <!-- Filters -->
    <div class="col-lg-3">
      <div class="filters-sidebar">
        <h4>Filter Cars</h4>
        <input type="text" id="searchInput" class="form-control" placeholder="Search...">
        <select id="brandFilter" class="form-select mt-3">...</select>
        <select id="fuelFilter" class="form-select mt-3">...</select>
        <select id="bodyStyleFilter" class="form-select mt-3">...</select>
        <input type="range" id="priceRange" class="form-range mt-3">
        <button id="clearFilters" class="btn btn-outline-secondary w-100 mt-3">Clear</button>
      </div>
    </div>

    <!-- Car Grid -->
    <div class="col-lg-9">
      <div id="carCardsContainer" class="row g-4">
        
      </div>
    </div>
  </div>
</div>
```

---

## Step 4: Client-Side Filtering (Vanilla JS)

```
<script>
document.addEventListener('DOMContentLoaded', () => {
  const cards = document.querySelectorAll('.car-card');
  const applyFilters = () => { /* full logic */ };
  document.getElementById('searchInput').addEventListener('input', applyFilters);
  // ... all event listeners
  applyFilters();
});
</script>
```

---

## Mobile-First UX

- Collapsible filters on mobile
- Touch-friendly range slider
- Lazy-loaded images
- URL sync for sharing filters

---

## Performance Checklist

- Lazy load images
- Debounce search
- Batch DOM updates
- Cache filter state
- No jQuery

---

## Final Result

- 200+ cars
- Real-time filters
- Dynamic IMAGIN images
- Mobile-ready
- Zero backend

**Drop your HubDB schema in the comments — I’ll build your IMAGIN mapping for free.**

![Tomislaw Dalic](https://growthhub.io/hubfs/Captura%20de%20pantalla%202025-10-26%20111157.png)

### Tomislaw Dalic

## Join the Conversation

Share your thoughts and connect with other readers

GrowthHub

[Our Approach](https://growthhub.io/hubspot-ai-first-blog/build-a-lightning-fast-filterable-car-inventory-page-in-hubspot-cms#approach) [Our Expertise](https://growthhub.io/hubspot-ai-first-blog/build-a-lightning-fast-filterable-car-inventory-page-in-hubspot-cms#expertise) [Our Clients](https://growthhub.io/hubspot-ai-first-blog/build-a-lightning-fast-filterable-car-inventory-page-in-hubspot-cms#clients) [Our Team](https://growthhub.io/hubspot-ai-first-blog/build-a-lightning-fast-filterable-car-inventory-page-in-hubspot-cms#team)

Diskettenweg 14

Amsterdam, The Netherlands

Cami de Cas Carreter 4

07100 Soller, Mallorca

[contact@growthhub.io](mailto:contact@growthhub.io) <https://www.linkedin.com/company/growthhub-io/>

Legal notices Privacy policy Accessibility

© 2025 GrowthHub.

To subscribe to our newsletter:

Back to the top

```json
{
  "@context" : "https://schema.org",
  "@type" : "BlogPosting",
  "author" : {
    "@type" : "Person",
    "name" : "Tomislaw Dalic",
    "url" : "https://growthhub.io/hubspot-ai-first-blog/author/tomislaw-dalic"
  },
  "dateModified" : "2025-10-31T00:12:50.397Z",
  "datePublished" : "2025-10-31T00:02:16.000Z",
  "headline" : "Build a Lightning-Fast, Filterable Car Inventory Page in HubSpot CMS",
  "image" : [ "https://growthhub.io/hubfs/Build_a_Lightning-Fast_Filterable_Car_Inventory_Page_in_HubSpot_CMS.jpg" ],
  "mainEntityOfPage" : {
    "@id" : "https://growthhub.io/hubspot-ai-first-blog/build-a-lightning-fast-filterable-car-inventory-page-in-hubspot-cms",
    "@type" : "WebPage"
  },
  "publisher" : {
    "@type" : "Organization",
    "logo" : {
      "@type" : "ImageObject",
      "url" : "https://growthhub.io/hubfs/ChatGPT%20Image%2027%20okt%202025%2c%2016_22_43.png"
    },
    "name" : "GrowthHub"
  }
}
```