Listing Detail Page
The listing detail page provides comprehensive information about a specific vehicle, including images, specifications, seller details, and contact options.
Page Layout
The page uses a responsive two-column layout:
| Column | Content | Width |
|---|---|---|
| Left | Images, specs, description, location | 60% |
| Right | Price, seller info, actions (sticky) | 40% |
On mobile, columns stack vertically with the price/seller card at top.
Breadcrumb Navigation
Shows the full navigation path:
Home > Search > Category > Vehicle TitleClicking any breadcrumb navigates to that level.
Image Gallery
The gallery supports up to 12 high-quality images:
Main Image Display
- Large image viewer (16:10 aspect ratio)
- Click to open fullscreen lightbox
- Navigation arrows (left/right)
- Featured badge (if applicable)
- SOLD/RENTED banner overlay (if applicable)
Thumbnail Strip
- Horizontal scrollable row
- Click to select image
- Active thumbnail highlighted
- Responsive sizing
Lightbox Features
- Fullscreen viewing
- Keyboard navigation (Arrow keys)
- Image counter (1/12)
- Thumbnail strip at bottom
- Close button (Escape key)
Image Quality
Images are optimized for web delivery with multiple sizes:
- Thumbnails (80px)
- Medium (listing cards)
- Large (main view)
- Original (lightbox)
Listing Meta Bar
A compact bar showing key listing information:
| Element | Description |
|---|---|
| Reference | Unique listing ID (8 characters) |
| Views | Total page views |
| Saved | Number of times favorited |
| Inquiries | Contact count |
| Listed | Publication date |
Vehicle Specifications Table
Comprehensive specifications organized by groups:
General
- Brand
- Model
- Type/Body Style
- Axle Configuration
- Condition (New/Used/Refurbished)
- Year of Manufacture
- Color
- VIN (if provided)
Cabin
- Mileage (km)
- Operating Hours (for equipment)
- Number of Seats
- Number of Doors
- Type of Cabin
Engine
- Engine Output (kW/HP)
- Emission Norm (Euro class)
- Fuel Type
Gearbox
- Transmission Type
- Number of Gears
Undercarriage
- Number of Axles
- Wheelbase
- Suspension Type
Weights & Dimensions
- Gross Vehicle Weight (GVW)
- Payload Capacity
Container (for container listings)
- Container Size
- Container Type
Safety Features
- ABS, ESP, EBS
- Active Brake Assist
- Lane Departure Warning
- Airbags
Additional Equipment
- Air Conditioning
- Cruise Control
- Retarder
- Navigation
- Camera systems
- LED Headlights
Specification Count
A badge shows the total number of specifications listed.
Quick Specs Display
Key specifications shown as cards with icons:
| Spec | Icon |
|---|---|
| Year | Calendar |
| Mileage | Gauge |
| Fuel Type | Fuel pump |
| Transmission | Gear |
| Power | Lightning |
| Emission | Leaf |
Rental Information
For rental listings (listingType: RENT), additional information displays:
| Field | Description |
|---|---|
| Daily Rate | Price per day |
| Weekly Rate | Price per week |
| Monthly Rate | Price per month |
| Security Deposit | Required deposit amount |
| Minimum Rental | Minimum rental duration |
| Daily Mileage Limit | Included kilometers |
| Extra Mileage Fee | Cost per additional km |
| Available From | Start date availability |
| Available Until | End date availability |
| Delivery | Pickup only or delivery available |
| Insurance | Included or not |
| Rental Terms | Additional conditions |
Features & Equipment
All boolean specifications marked as "true" appear in a feature list:
- Displayed in 3-column grid
- Green checkmark icons
- Expandable if more than 15 features
- Total feature count badge
Description
Free-text description provided by seller:
- Markdown formatting supported
- Whitespace preserved
- Full-width display
- Expandable for long descriptions
Location Section
Shows where the vehicle is located:
Address Information
- City, Region
- Postal Code
- Country (full name)
Interactive Map
- OpenStreetMap integration
- Marker at vehicle location
- Zoom controls
- Click to expand
Privacy
Exact address is not displayed. Map shows approximate location only.
Price Display
For Sale Listings
- Large price display
- Selected currency
- VAT exclusion note
- Negotiable indicator (if applicable)
- Price on Request option
Condition Badge
- New - Green badge
- Used - Gray badge
- Refurbished - Blue badge
SOLD/RENTED Status
When a vehicle is no longer available:
- Price shown with strikethrough
- SOLD or RENTED badge
- Overlay banner on image
- Contact options hidden
- "View Other Listings" link
Seller Information Card
Displays seller/dealer details:
Seller Header
- Company logo/avatar
- Company name (linked to profile)
- Trust Badge with score
- Star rating and review count
Seller Details
- Location (city)
- Member since date
- About description (if provided)
Contact Options
- Show Phone Number - Reveals seller phone
- WhatsApp - Direct WhatsApp link
- Send Message - Opens message dialog
Trust Score
The Trust Score is calculated from multiple factors including verification status, review ratings, response rate, and listing count. See Seller Profiles for details.
Contact Options
Phone Number
- Hidden by default
- Click to reveal
- Tracks lead analytics
WhatsApp Contact
- Pre-filled message with listing title
- Opens WhatsApp app/web
- Tracks lead analytics
Send Message
- Opens dialog for logged-in users
- Pre-populated message template
- Redirects to login if not authenticated
- Creates message thread for ongoing communication
Action Buttons
Save to Favorites
- Heart icon toggle
- Requires login
- Synced across devices
Share
Dropdown with multiple options:
- WhatsApp share
- Facebook share
- Twitter/X share
- Email share
- Copy link to clipboard
Compare
- Add to comparison list
- Maximum 4 vehicles
- Opens comparison page when clicked
Print
- Opens browser print dialog
- Print-optimized layout
Finance Calculator
Interactive loan calculator (when price > 0):
Inputs
- Loan Amount - Editable, defaults to listing price
- Term - Slider from 12 to 84 months
Output
- Estimated monthly payment
- Based on 5.9% interest rate
- Currency-aware formatting
Disclaimer
Calculator is for estimation only. Actual financing terms may vary based on credit approval and lender rates.
Related Listings
Bottom section showing similar vehicles:
- 4 related listings
- Same category/make preference
- Excludes current listing
- Standard listing cards
SEO Features
Schema.org Markup
- Vehicle schema with full specs
- BreadcrumbList schema
- Offer schema with pricing
Meta Tags
- Dynamic title with year, brand, model
- Description with key details
- Open Graph images
- Twitter cards
Canonical URL
- Clean URL structure
- Slug-based routing
Error States
Listing Not Found
- 404 message
- Link to search
- Category suggestions
Loading State
- Skeleton loaders
- Animated placeholders
- Progressive loading
Mobile Optimizations
On mobile devices:
- Full-width images
- Sticky price card at bottom
- Touch-friendly gallery
- Collapsible specification groups
- Floating contact button