Redline Motors Docs
Everything you need to set up, edit, and launch the Redline Motors theme: theme settings, page templates, every module, the gradient-overlay system, and the design guidelines.
Getting Started
Introduction
What Redline Motors is
Redline Motors is a HubSpot CMS theme for car dealerships: new and used lots, certified pre-owned programs, and multi-brand groups. The look is dark-first — near-black surfaces with a single cognac accent used for buttons, links, badges, and current-page states. Headings use Archivo, body copy uses Manrope, and a JetBrains Mono face is reserved for figures such as prices, spec values, stock numbers, and mileage.
The whole demo site is assembled from drag-and-drop modules. Nothing is hardcoded in the templates: copy, photos, the vehicle inventory, business hours, and booking settings are all edited in the HubSpot page editor and theme settings.
Who it is for
- A single dealership that needs a Home, Inventory, About, and Test Drive flow.
- A store that also takes finance, trade-in, and service enquiries through forms.
- Dealers who want a structured, searchable online inventory with search-engine-readable Vehicle markup, not a PDF.
- Anyone running a blog or news section alongside the main site.
What is in the theme
- 34 modules: heroes, navigation, footer, the inventory grid, a single-vehicle detail block, featured-vehicle and body-style sections, brand marquee/showcase, advisor spotlight, story rows, stats, icon points, statements, gallery, reviews, review platforms, showroom hours, location map, inquiry form, a test-drive booking widget, FAQ, team grid, plus the blog and search modules.
- 11 website-page templates: Home, Inventory, Vehicle, About, Contact, Finance, Service, Test Drive, Trade-In, Reviews, and this Documentation page.
- Two blog templates (listing + post) and one landing-page template (Sales Event).
- Five system templates: 404, 500, password prompt, search results, and subscription preferences.
- Two layouts:
base.html(global header + footer) andbase_lp.html(landing pages, no chrome). - One theme-settings panel: colours, typography, spacing, radius/elevation, buttons, borders, global brand fields, and business hours.
Design principles
Three ideas run through the theme: a dark showroom canvas, a grotesk display face that reads clean and precise for headings and vehicle names, and restraint with the accent so cognac always means something (an action, a link, or the current item). Motion is limited to gentle scroll reveals that fire once.
Upload & Install
Upload with the HubSpot CLI
From the project root, upload the theme folder to your portal:
hs upload studionope-for-automotive studionope-for-automotive --portal=<your-portal>Once the upload finishes, the theme appears under Settings > Content > Themes as ‘Redline’.
Live editing while you work
To sync changes automatically as you edit files locally:
hs watch studionope-for-automotive studionope-for-automotive --portal=<your-portal>First-run checklist
- Open Edit theme settings and confirm the colours, fonts, and logo (see Theme Settings).
- Upload your logo and favicon under the Global group, and set your business hours.
- Set a default social-share (OG) image.
- Create your first page from one of the templates (see Create Your First Page).
A note on images
The demo ships with placeholder photography. Replace it with your own vehicles, showroom, and team before launch (see Best Practices > Replacing Placeholder Images).
Create Your First Page
- Go to Marketing > Website > Website Pages and click Create.
- Pick a Redline template (start with Home).
- Give the page an internal name and a URL slug, e.g.
/inventory,/about,/test-drive. - Click each section to edit it. The module fields open in the right-hand sidebar: content in the Content tab, appearance in the Style tab.
- Set the page title and meta description under Settings for SEO and social sharing.
- Publish.
Header & footer
The header and footer are global partials: edit them once and the change applies to every page. The header renders the Navigation module; the footer renders the Footer module. Your logo, favicon, and default OG image are set once in Theme settings > Global and reused across both.
Theme Settings
Theme settings live in one panel with eight groups: Colors, Typography, Spacing & Layout, Radius & Elevation, Buttons, Borders, Global, and Business hours. Each value maps to a --h-* CSS variable the whole theme reads.
Colors
The palette is dark by default. Hex values are converted to rgba where opacity matters (borders, the hero overlay), so set both the colour and its opacity on those fields.
| Setting | Default | Controls |
|---|---|---|
| Page background (grey) | #ececec | The light grey the dark shell floats on. |
| Dark surface canvas | #0e0f11 | The main dark shell and the footer/dark bands. |
| Card / panel surface | #16171a | Cards, form panels, the booking panel. |
| Soft section background | #141517 | The ‘soft’ surface used to separate bands. |
| Input fill / hover row | #1d1f23 | Input fills and hover-row backgrounds. |
| Primary / Secondary / Muted text | #f4f5f6 / #9a9ea4 / #6b6f75 | The three-step text hierarchy. |
| Hairline / Stronger / Input border | white @ 10% / 16% / 14% | The three border weights (colour + opacity). |
| Accent | #c2874a (cognac) | The single accent: buttons, links, active nav, badges. |
| Accent hover / Accent soft tint | #b0763b / cognac @ 12% | Darker hover cognac and the faint accent tint for chips and active backgrounds. |
| Text / accent on dark surface | #f4f5f6 / #c2874a | Colours used inside dark bands (footer, dark CTA). |
| Hero image overlay | #0a0b0d @ 60% | The scrim ink used by heroes and gradient overlays. |
| Form success / error | #7ee081 / #ff6b6b | Validation states. |
Sections marked dark (the footer, dark CTA bands) remap the tokens automatically via [data-surface='dark'], so text and accent stay legible without setting separate values.
Typography
Three font fields drive the theme, all loaded from Google Fonts by the base layout:
- Heading font — Archivo by default (display type, headings, vehicle names).
- Body font — Manrope by default (everything else).
- Mono font — JetBrains Mono by default, reserved for prices, spec values, stock numbers, and mileage.
| Setting | Range / default | Effect |
|---|---|---|
| Base body font size (px) | 14–20, default 16 | Root body size. |
| Base body line height | 1.3–1.9, default 1.6 | Body line height. |
| Uppercase label tracking (em) | 0–0.3, default 0.12 | Letter-spacing for eyebrows and small uppercase labels. |
| Link underline style | None / Underline | Body links: hover-accent or underlined. |
Headings use a fluid clamp() scale (display, h1–h4, a lead size, body, small, eyebrow), so you never set heading sizes per page.
Spacing & Layout
| Setting | Default | Effect |
|---|---|---|
| Base spacing unit (px) | 4 | The smallest step the scale is built on. |
| Grid gutter / card padding (px) | 24 | Space between grid items and inside cards. |
| Section vertical padding — max (px) | 120 | Upper bound of the fluid section padding. |
| Container max width (px) | 1200 | Standard content column width. |
| Wide container width (px) | 1320 | Roomier width for wide sections. |
| Container side padding — max (px) | 32 | Upper bound of the fluid side gutter. |
| Header height (px) | 72 | Fixed header height, used to offset content under the sticky bar. |
Section padding and side gutters use clamp(), so your ‘max’ values apply on large screens and scale down on phones. There is no separate mobile setting.
Radius & Elevation
| Setting | Default | Effect |
|---|---|---|
| Base radius (px) | 18 | Cards, panels, images, inputs, and the hero card. |
| Small radius (px) | 12 | Tags, chips, badges. |
| Pill radius (px) | 999 | Fully rounded elements (status pills). |
| Shadow — small / medium / large | Subtle | Preset choices (Subtle / Soft / None) for cards at rest, hover/raised, and the drawer/lightbox/sticky header. |
Buttons
| Setting | Default | Effect |
|---|---|---|
| Primary button style | Solid | Solid cognac fill, Outline, or Ghost. |
| Button radius (px) | 999 | Corner radius for all buttons (0 = square, high = pill). |
| Button font | — | Family and weight for button labels. |
| Uppercase button text | off | Force uppercase labels with wider tracking. |
Modules use .h-btn--primary (accent fill), .h-btn--secondary (outline), and .h-btn--ghost. On dark surfaces the secondary and ghost variants invert automatically.
Borders & Global
Borders: hairline border width (1–3px, default 1) and divider style (solid / dashed / dotted).
Global: logo + logo height, favicon, default social-share (OG) image, and a price-range value ($ to $$$$) used in the dealership JSON-LD.
Business Hours & Open Status
One schedule, everywhere
The weekly schedule lives in one place: Theme settings → Business hours. Each day has a Closed toggle plus Opens / Closes times. That single schedule feeds three things at once: the live open/closed pill (header, mobile drawer, hero), the weekly hours list in the footer, and the Showroom Hours module — so they never drift.
The live open/closed pill
A small pill shows whether you are open right now (e.g. ‘Open until 7 PM’) or when you next open. It recomputes in the visitor’s browser from the schedule, including hours that run past midnight. Use the master switch Show open/closed status to turn the pill on or off everywhere; the weekly hours list is not affected.
Time format & language
The Time format setting is Auto (from the page language), 12-hour, or 24-hour. Day names and the clock are produced at render time from the page’s <html lang> using the browser’s Intl formatter, so a non-English site localizes automatically with nothing to translate by hand.
Translating the connector words
The wording around the times (‘Open until’, ‘Closed’, ‘Opens’, the word for ‘tomorrow’, and the ‘Today’ badge) is editable because theme settings cannot hold free text. These live on the global Footer module, under the open/closed status labels; {time} and {day} are replaced with the localized closing time and day name. Edit them once on the footer and the pill, footer, and Showroom Hours module all use them.
Modules Reference
The theme ships 34 modules. Every module is available to drop onto any page from the left-hand panel in the editor. They are grouped below by role.
Heroes
Showroom Hero
The main page header used at the top of most templates. It renders a large rounded card with an image or video background, a gradient overlay (see The Gradient-Overlay System), a top meta row (location label, index, and up to three trust facts), a big headline that can wrap an inline image, a lead line, and two buttons on a bottom bar.
Hero
A full-viewport hero with a single-colour overlay (colour + opacity slider) instead of the gradient system. Fields: eyebrow, H1, subhead, two buttons, a meta line, and an optional live open/closed status pill, over an image or background video with a poster. Style: overlay colour/opacity, height (full / tall / regular), alignment, and an optional contained card with radius/border/shadow.
Page Hero
A lighter header for inner pages and this docs page. Eyebrow, H1, an optional lead and meta line, and an optional single button, over either the soft surface (no image) or an image with an overlay. Style: alignment and, when an image is used, overlay colour and opacity.
Navigation & Footer
Navigation
The header bar (global). Fields: logo (image or text fallback) and link, up to 8 nav links, a Book a Test Drive button, an optional phone link, and an optional open/closed status pill. Style: transparent-over-hero, sticky-on-scroll, and accent colour. The link for the current page is highlighted automatically in the accent colour — matched from the page URL (ignoring domain, trailing slash, and language/tracking parameters) — so there is no ‘active’ checkbox to set. The same highlight applies in the mobile drawer.
Footer
The site footer and single source of truth for dealership information (global).
- Brand & NAP: logo, name, one-line blurb, full address, phone (display + tel:), email, and a directions link.
- Hours: the weekly list is read from the single Theme settings → Business hours schedule (you never re-enter hours here), with an option to highlight today. It also holds the translatable open/closed status labels.
- Quick links and Social & newsletter: link columns, social icons (Font Awesome brand marks), and an optional HubSpot newsletter form.
- Bottom bar: copyright (year added automatically) and up to 4 legal links.
- SEO / Schema: emit AutoDealer / LocalBusiness JSON-LD with brands carried and price range.
Inventory & Vehicles
Vehicle Inventory Pro
The flagship inventory module and the heart of the Inventory page. It renders your stock as a filterable, searchable grid with a category navigation, and can open a full spec view for each vehicle.
- Dealer info: name, URL, phone, full address, currency code/symbol, mileage unit, and page language — used for the structured data.
- Categories (up to 10): each has a name, description, and icon, and holds up to 50 vehicles.
- Vehicle fields: title, make/model/year/trim, price + suffix, mileage, condition (new / used / certified), body type, fuel type, transmission, drivetrain, colours, engine, horsepower, VIN, stock number, photo, a short description and a long description, a gallery (up to 12) and a video for the detail view, a features list, a spec-chip list, and a badge (Hot deal / Just arrived / Low miles / Price drop / Manager special / One owner / Certified).
- Settings: layout (grid / list / classic / magazine), toolbar position, columns (1–4), toggles for the category nav, search, body/fuel/condition filters, and for each card field (photos, specs, price, mileage, badges, stock, VIN, description). Detail mode can be off, inline expand, or a slide-in drawer, with an optional inquiry form (HubSpot form) in the detail view.
- SEO: Emit structured data outputs Vehicle / Offer JSON-LD (see SEO & Schema).
- Style: a full set of colour controls for the grid, cards, filters, badges, and spec text.
Vehicle Detail
A single-vehicle page block: a gallery (up to 8 photos), title, condition, price, stock number, mileage, a rich-text description, a specifications list, and two buttons (e.g. Book a test drive / Get financing). Used on the Vehicle template.
Featured Lot
A home-page showcase of 3 to 9 vehicles with the first item enlarged. Each card shows a title, a mono spec line, price, mileage, a condition badge, an optional custom badge, and a photo, plus a link to the full inventory. It is a teaser, not the full inventory.
Body Style Grid
A grid of 3 to 8 body-style tiles (SUV, Sedan, Coupe, Electric, Truck, etc.), each with a background photo, a label, an inventory count, and a link to filtered inventory, plus an optional ‘View all’ link.
Brands & Showcases
Brand Marquee
An infinitely scrolling, looping marquee of car-brand logos (pulled from Simple Icons by slug). Fields: eyebrow, a repeater of brands (name + slug), scroll speed, logo height, and surface.
Brand Showcase & Showcase Panel
Feature panels for a single hero car or brand: an eyebrow, headline, a large backdrop wordmark, a CTA link, a car image, spec stats (value + label), and a row of related brand chips. Use them to spotlight one model or franchise.
Story & About
Advisor Spotlight
A portrait beside a story, for introducing a sales specialist, finance manager, or general manager. Fields: eyebrow, heading, a rich-text story, an optional signature line, an optional accolades list, and an optional button. Style: portrait side and aspect ratio, accent colour, and padding.
Story Row
A general image-and-text row for telling the dealership’s story (financing, trade-in, service, history). Fields: eyebrow, heading, rich-text body, an optional meta line, and an optional button, beside an image. Style: image side, surface (white / soft), and image aspect ratio. Alternate the image side between stacked rows for rhythm.
Statement
A large centred statement: an eyebrow, a bright lead line, a muted continuation line, and an optional link. Good for a positioning or mission line.
Value, Stats & Icons
Icon Points
Short value propositions, each with an icon, title, and one line of text (e.g. ‘Certified pre-owned’, ‘Transparent pricing’, ‘On-site service’). Layout: row (2–4 columns) or list. Each icon is chosen from a dropdown of common Lucide names.
Stats Bar
Inline counter statistics (e.g. ‘1200+ vehicles delivered’, ‘4.7 average rating’) that count up on scroll. Each stat has a value, prefix, suffix, decimal places, and a label. Surface: page background, soft, or a dark band.
Rich Text
A prose block for anything the structured modules do not cover: policies, disclaimers, a longer note. Optional eyebrow and heading (h2/h3/h4), a rich-text body, surface (white / soft), alignment (left / center), and compact or regular spacing.
Media & Proof
Photo Gallery
An image grid for the showroom, the vehicles, and the team — up to 24 images, each with an optional caption. Layout: even grid (2–4 columns with a chosen aspect ratio) or bento (first image featured). Options: captions and a click-to-open lightbox.
Reviews
Customer quotes in a masonry or carousel layout. Each review has a quote, author, optional source/role, and an optional star rating. Turn on Emit AggregateRating structured data (with your business name) to mark up the ratings. Style: columns, surface, alignment, star/accent colour, and quote font.
Reviews Grid
A grid of reviews with fixed star ratings, a ‘leave a review’ card, and a row of review-platform links (Lucide icon + label + URL).
Review Platforms
A trust bar of platform ratings (Google, DealerRater, Cars.com, Facebook, Edmunds, or a custom platform), each with a rating, review count, star or bubble glyphs, an optional logo, and a link.
Team Grid
The people behind the dealership: up to 16 members (sales, finance, service, management), each with a photo, name, role, and short optional bio. Style: columns (2–4), photo shape (round / square), alignment, role accent colour, and name font.
Contact, Hours & Booking
Showroom Hours
Renders the weekly hours from the single Theme settings → Business hours schedule (the same source the footer and the header pill use) with an option to highlight today. It can show a companion column (eyebrow, heading, text, a link, and a phone number) for a holiday note or the service department. Style: surface, today highlight, accent colour, and padding.
Location Map
Your address and a map side by side. Contact details (address, phone display + tel:, email) sit beside an embedded Google Maps iframe (paste the embed URL). Optional transit and parking notes, a directions link, map side (left / right), surface, and a minimum map height.
Inquiry Form
A two-column enquiry section for sales, finance, trade-in, service, and general contact. The left column holds an eyebrow, heading, intro, and optional detail points (Lucide icon + title + text); the right column holds a HubSpot form with its own title and subtitle. Style: surface, form position, an optional card around the form, accent colour, and a point-title font.
Test Drive Booking
A dedicated booking widget with three modes: Embed (paste a scheduling tool such as HubSpot Meetings, Calendly, or Acuity, with a fallback message), Form (pick a HubSpot form), or Link (a button to an external booking page, with label, URL, and a note). Also has an eyebrow, heading, intro, and an optional reassurance line. Use it as an alternative to the Inquiry Form on the Test Drive page.
Test Drive CTA
A rounded closing band that nudges buyers to book. Headline, subline, a button (or an inline newsletter form when Show form is on), and an optional phone link, over an image or video background with the same gradient-overlay system as Showroom Hero. Surface can be accent (cognac) or dark. Drop it near the bottom of most pages.
FAQ
An accordion of questions and rich-text answers (up to 30), with a split or centred layout and an option to open the first item. Turn on Emit FAQPage structured data to mark up the questions.
Blog & Search
Blog Listing Hero
The header for the blog listing page: eyebrow, H1, and a rich-text intro, with an option to only show on the main listing (so topic/author pages keep their dynamic headers).
Blog Post Header
The top of an individual post: toggles for topic tag, author, publish date, read time (with a words-per-minute setting), and the featured image, plus alignment. It reads the post’s data from HubSpot directly.
Related Articles & Search Field
Related Articles is a grid of 2–4 related posts at the foot of an article, with optional excerpt and meta. Search Field is a native HubSpot search box (it posts to the standard search-results page) with an optional heading, placeholder, surface, and alignment.
System Message
The flexible block used on the system pages (404, 500, password, search, subscription): an eyebrow, a large code (e.g. ‘404’), a heading, a rich-text message, and two optional buttons.
How icons work (Lucide)
Most module icons come from Lucide, loaded from the official Lucide CDN, so they are crisp at any size and inherit your colours. Where a field asks for an icon, give it the icon’s name (kebab-case, e.g. car, gauge, map-pin, wrench, banknote). Some modules offer a dropdown of common names instead of free text. Lucide has no brand marks, so social links in the footer use HubSpot’s Font Awesome brand icons instead.
The Gradient-Overlay System
The Showroom Hero and Test Drive CTA modules share the same background-overlay system: a repeater of overlay colours plus an angle. It replaces a single fixed scrim with a flexible one you build stop by stop, so you can wash a photo, darken one edge, or fade a bright colour across a dark video.
How the colour count decides the overlay
| Overlay colours | Result |
|---|---|
| 0 colours | No overlay — the raw image or video shows through. |
| 1 colour | A flat, even wash: a single rgba() tint across the whole background, using that stop’s colour and opacity. |
| 2 or more colours | A linear-gradient() at the chosen angle, with every colour added as a stop in order. |
What each stop carries
Every row in the repeater has its own colour, its own opacity, and an optional stop position (a percentage). Because opacity is per stop, a stop can be fully transparent at one end and solid at the other. If you leave a stop position blank, the stops space evenly.
The angle
The overlay angle is a normal CSS gradient angle in degrees: 0deg runs bottom-to-top, 90deg left-to-right, 180deg top-to-bottom, 270deg right-to-left. It only applies when you have two or more colours.
Example: a white gradient over a dark video
To fade white in from one side across a dark background video (so a headline stays readable on the light side):
- Set the background to Video and add your video URL (and a poster).
- Add stop 1: white, opacity ~70%, position
0%. - Add stop 2: white, opacity
0%(fully transparent), position100%. - Set the angle to
90degfor a left-to-right fade.
With two stops the module builds linear-gradient(90deg, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0) 100%): solid-ish white on the left fading to clear on the right, over the moving video.
Example: darkening the bottom for text
Two stops of the dark overlay ink — transparent at the top, ~65% at the bottom, angle 0deg — gives a classic bottom scrim so a bottom-aligned headline reads cleanly. A single dark stop at ~50% gives an even dim across the whole photo instead.
Page Templates
When you create a page you pick one of the Redline templates. Each is a starting arrangement of modules with sample copy you can keep, edit, or remove. The module order below is the actual demo build for each page.
| Template | Modules, in order |
|---|---|
| Home | Showroom Hero → Featured Lot → Body Style Grid → Story Row → Statement → Reviews → Location Map |
| Inventory | Showroom Hero → Vehicle Inventory Pro → Test Drive CTA |
| Vehicle | Vehicle Detail → Test Drive CTA |
| About | Showroom Hero → Story Row → Story Row → Advisor Spotlight → Icon Points → Team Grid → Test Drive CTA |
| Contact | Showroom Hero → Inquiry Form → Location Map → Test Drive CTA |
| Finance | Showroom Hero → Story Row → Icon Points → FAQ → Test Drive CTA |
| Service | Showroom Hero → Story Row → Icon Points → FAQ → Test Drive CTA |
| Test Drive | Showroom Hero → Inquiry Form → Location Map |
| Trade-In | Showroom Hero → Stats Bar → Icon Points → Story Row → Inquiry Form → Test Drive CTA |
| Reviews | Showroom Hero → Reviews Grid → Test Drive CTA |
| Documentation | Page Hero + a series of Rich Text sections (this page). |
Working with the templates
- On Inventory, enter your categories and vehicles in Vehicle Inventory Pro, then turn on its structured-data toggle before launch.
- On the Vehicle page, fill the Vehicle Detail gallery, specs, and the two buttons.
- On Test Drive, the demo uses the Inquiry Form for booking. If you use a scheduling tool (HubSpot Meetings, Calendly, Acuity), swap in the Test Drive Booking module in Embed, Form, or Link mode instead.
- Alternate the image side between stacked Story Rows for rhythm, and keep one Test Drive CTA as the closing band.
Blog, landing, and system pages
The Blog uses HubSpot’s blog system with theme modules: the Blog Listing Hero on the listing, and the Blog Post Header and Related Articles on each post (posts emit BlogPosting markup). The Sales Event landing page extends the chrome-free layout for a single-goal campaign. The five system pages (404, 500, password, search, subscription) are built from the System Message module so every string is editable.
Layouts
Website, blog, and system pages extend base.html (global header + footer). Landing pages extend base_lp.html, which drops the header and footer for a focused page.
Design & Animation
The look
Redline is dark-first: near-black surfaces (#0e0f11 shell, #16171a cards) with a single cognac accent (#c2874a, hover #b0763b). Keep the accent for actions, links, badges, and the current item — if everything is cognac, nothing reads as the action. Text runs on a three-step hierarchy (primary / secondary / muted) so pages stay calm.
Type roles
- Archivo — headings, eyebrows, and vehicle names. Tight, precise, grotesk.
- Manrope — body copy and UI text.
- JetBrains Mono — figures only: prices, spec values, stock numbers, and mileage. Using it consistently for numbers is part of the showroom feel, so keep prices and specs in the mono face.
Motion & scroll reveals
Animation is deliberately restrained. Elements marked with the data-reveal attribute fade and rise into view once as you scroll, driven by an IntersectionObserver in js/main.js (it adds an is-revealed class). Sibling data-reveal elements are staggered automatically. The Stats Bar counts its numbers up on scroll via data-counter.
Everything degrades safely: if JavaScript does not run, content is visible by default; and all motion is disabled when the visitor has prefers-reduced-motion: reduce set. You do not need to add reveal attributes yourself — the modules already carry them.
SEO & Schema
Structured data (JSON-LD)
The theme can emit several structured-data blocks, each behind its own toggle so you turn it on intentionally on the one page that owns it.
| Type | Where | Toggle |
|---|---|---|
| AutoDealer / LocalBusiness | Footer module | Emit AutoDealer / LocalBusiness JSON-LD (with brands carried + price range). |
| Vehicle / Offer | Vehicle Inventory Pro | Emit structured data (uses the dealer name, currency, and mileage unit you set). |
| FAQPage | FAQ module | Emit FAQPage structured data. |
| AggregateRating | Reviews module | Emit AggregateRating structured data (with business name). |
| BlogPosting | Blog post template | Emitted for blog posts. |
Avoid double emission
The AutoDealer/LocalBusiness block belongs in the footer only, so it appears once per page — do not enable a competing business block elsewhere. Emit the Vehicle JSON-LD on the Inventory page only, not on Home where Featured Lot is just a teaser. Validate with a structured-data testing tool after publishing.
Meta, titles & Open Graph
The base layout outputs each page’s title, meta description, and a canonical URL from its Settings tab, plus Open Graph and Twitter Card tags. The share image is the page’s featured image if set, otherwise the Default social share (OG) image from Theme settings > Global — set a strong default so any page shared without its own image still looks intentional. The favicon is also set under Global and linked in the document head.
Best Practices & FAQ
Replacing placeholder images
The starter content ships with placeholder photography. Before launch, replace every image with your own — the showroom, the vehicles, the team, the hero.
- Click the section, open its image field, and choose Replace.
- Upload to the HubSpot File Manager or pick an existing file.
- Always set descriptive alt text (it helps SEO and accessibility).
Image sizes
- Hero / full-bleed backgrounds: ~2400px wide, web-optimised JPG.
- Vehicle thumbnails and cards: ~800–1200px, square or 4:3.
- Background video (Showroom Hero / Test Drive CTA): a web-optimised ~1080p MP4 with a poster image always set.
- Brand logos: use Simple Icons slugs in Brand Marquee; upload transparent PNGs where a module takes a logo image.
Responsive & accessibility
- Grids collapse from 4/3 columns to 2 on tablets and 1 on phones. The mobile breakpoint is 991px.
- Vehicle Inventory Pro’s filters and category nav stack on small screens; tables and code blocks scroll horizontally rather than overflow.
- Type, section padding, and gutters scale fluidly with the viewport — there is no separate mobile size to maintain.
- Write alt text for images and accessible labels for icon-only buttons and social links; give the Location Map iframe a meaningful title.
- Cognac on the dark surface meets contrast on text and buttons; if you change the accent, recheck contrast against your background.
FAQ
Can I change the fonts?
Yes: set the Heading, Body, and Mono fonts in Theme settings > Typography. The defaults are Archivo, Manrope, and JetBrains Mono.
Where do business hours live?
In one place: Theme settings → Business hours. The footer, the header status pill, and the Showroom Hours module all read from that single schedule.
How do I take test-drive bookings?
The Test Drive page uses the Inquiry Form by default. To use a scheduling tool, swap in the Test Drive Booking module in Embed, Form, or Link mode.
How do I fade a colour across a hero photo or video?
Use the gradient-overlay repeater on Showroom Hero or Test Drive CTA: add two or more colour stops (each with its own opacity) and set the angle. See The Gradient-Overlay System.
Why is my inventory not showing rich results?
Turn on Emit structured data in Vehicle Inventory Pro, set the dealer name and currency, and make sure the Inventory page is the only place that emits it. Validate after publishing.
The accent colour is everywhere — is that intended?
The theme uses one accent on purpose. If it feels heavy, most modules let you set a per-section accent colour, or you can soften the global accent in Theme settings > Colors.
Questions?
Need a hand setting up?
Reach out and we will help you get the theme live.