Premium Visual with Vehicle Image

Premium feature showcasing rich visual presentation with vehicle images alongside comprehensive wheel specifications, creating an enhanced e-commerce experience with professional card layouts and buy buttons.

premium feature vehicle images visual layout e-commerce buy buttons rich presentation card layout product display visual specs paid feature

Widget Preview

Preview:

Desktop Tablet Mobile

Widget Type: Wheel Fitment Finder

Back to Demos

Demo Details:

Vehicle Image Integration:
The template automatically displays high-quality vehicle images when available, creating an
immediate visual connection for users. The image is:
- Professionally Sized: Maximum 330px width with responsive scaling
- Context-Aware: Shows vehicle name overlay badge for quick identification
- Optimized Loading: Lazy loading for performance
- Graceful Fallback: Clean specifications grid when images aren't available

How to Add Vehicle Images:

To enable vehicle images in your widget, you need to provide image URLs through the API or data
source:

API Integration: Pass vehicle.image as {{ vehicle.image }} field with full image URL

     {
       "vehicle": {
         "image": "https://example.com/images/bmw-3-series.jpg"
       }
     }

Image Requirements:
- Format: JPG, PNG, or WebP
- Recommended size: 660x440px (3:2 aspect ratio)
- Quality: High-resolution for sharp display
- Hosting: CDN or reliable image hosting service
Image Sources:
- OEM manufacturer press photos
- Professional automotive photography
- Licensed stock photography databases
- Custom product photography
Automatic Handling: Template uses conditional rendering:
{% if vehicle.image %}

{% else %}

Enhanced Layout Components:

Dual-Panel Design:
- Left Panel: Vehicle image with overlay badge showing make/model
- Right Panel: Technical specifications grid (Generation, Production, Engine, Power, Fuel, Center
Bore)
- Responsive Behavior: Stacks vertically on mobile, side-by-side on desktop

Professional Wheel Cards:
- Visual Indicators: Color-coded diameter badges (OE vs Upgrade)
- Glow Effects: Subtle hover animations for premium feel
- Technical Footer: Quick-reference bolt pattern and thread size
- Buy Buttons: Ready-to-integrate e-commerce CTAs

Specification Highlights:
- Generation Name: Vehicle platform identification (e.g., "E46", "F30")
- Production Years: Manufacturing period for the configuration
- Engine Details: Capacity, type, and fuel information
- Power Output: Horsepower and kilowatt ratings
- Center Bore: Critical fitment specification at vehicle level

📝 Custom Output Template

This custom template shows how to display widget data with dynamic variables:

<div class="bg-background-color rounded-2xl shadow-xl overflow-hidden">
  <!-- Header Section -->
  <div class="bg-gradient-to-r from-secondary-color/10 to-primary-color/10 px-6 py-4 border-b border-secondary-color/20">
    <h2 class="text-xl font-bold text-main-color">
      {{ make.name }} {{ model.name }}
    </h2>
    <p class="text-sm text-secondary-color mt-1">
      {{ generation.name }} • {{ start_year }} - {{ end_year }} • {{ engine.capacity }} {{ engine.type }} {{ engine.fuel }} {{ engine.power.hp }}hp
    </p>
  </div>
  
  <div class="p-6">
    <!-- Vehicle Image and Info Section -->
    {% if vehicle.image %}
    <div class="flex flex-col md:flex-row gap-6 mb-6">
      <!-- Image Container -->
      <div class="md:w-auto flex-shrink-0">
        <div class="relative rounded-xl overflow-hidden shadow-lg" style="max-width: 330px;">
          <img src="{{ vehicle.image }}" 
               alt="{{ make.name }} {{ model.name }}" 
               class="w-full h-auto object-cover"
               loading="lazy">
          <!-- Image Overlay Badge -->
          <div class="absolute top-4 left-4 bg-background-color/90 backdrop-blur-sm rounded-lg px-3 py-2 shadow-lg">
            <!-- <div class="text-xs font-medium text-secondary-color">Vehicle</div> -->
            <div class="text-sm font-bold text-main-color">{{ make.name }} {{ model.name }}</div>
          </div>
        </div>
      </div>
      
      <!-- Specifications Grid -->
      <div class="flex-1">
        <h3 class="text-lg font-semibold text-main-color mb-4">Technical Specifications</h3>
        <div class="grid grid-cols-2 gap-4">
          <div class="bg-secondary-color/5 rounded-lg p-3">
            <div class="text-xs text-secondary-color uppercase tracking-wide mb-1">Generation</div>
            <div class="text-sm font-semibold text-main-color">{{ generation.name }}</div>
          </div>
          <div class="bg-secondary-color/5 rounded-lg p-3">
            <div class="text-xs text-secondary-color uppercase tracking-wide mb-1">Production</div>
            <div class="text-sm font-semibold text-main-color">{{ start_year }} - {{ end_year }}</div>
          </div>
          <div class="bg-secondary-color/5 rounded-lg p-3">
            <div class="text-xs text-secondary-color uppercase tracking-wide mb-1">Engine</div>
            <div class="text-sm font-semibold text-main-color">{{ engine.capacity }} {{ engine.type }}</div>
          </div>
          <div class="bg-secondary-color/5 rounded-lg p-3">
            <div class="text-xs text-secondary-color uppercase tracking-wide mb-1">Power</div>
            <div class="text-sm font-semibold text-main-color">{{ engine.power.hp }}hp / {{ engine.power.kW }}kW</div>
          </div>
          <div class="bg-secondary-color/5 rounded-lg p-3">
            <div class="text-xs text-secondary-color uppercase tracking-wide mb-1">Fuel Type</div>
            <div class="text-sm font-semibold text-main-color">{{ engine.fuel }}</div>
          </div>
          <div class="bg-secondary-color/5 rounded-lg p-3">
            <div class="text-xs text-secondary-color uppercase tracking-wide mb-1">Center Bore</div>
            <div class="text-sm font-semibold text-main-color">{{ technical.centre_bore }}</div>
          </div>
        </div>
      </div>
    </div>
    {% else %}
    <!-- No Image Fallback -->
    <div class="mb-6">
      <h3 class="text-lg font-semibold text-main-color mb-4">Vehicle Specifications</h3>
      <div class="grid grid-cols-2 md:grid-cols-3 gap-4">
        <div class="bg-secondary-color/5 rounded-lg p-3">
          <div class="text-xs text-secondary-color uppercase tracking-wide mb-1">Generation</div>
          <div class="text-sm font-semibold text-main-color">{{ generation.name }}</div>
        </div>
        <div class="bg-secondary-color/5 rounded-lg p-3">
          <div class="text-xs text-secondary-color uppercase tracking-wide mb-1">Years</div>
          <div class="text-sm font-semibold text-main-color">{{ start_year }} - {{ end_year }}</div>
        </div>
        <div class="bg-secondary-color/5 rounded-lg p-3">
          <div class="text-xs text-secondary-color uppercase tracking-wide mb-1">Engine</div>
          <div class="text-sm font-semibold text-main-color">{{ engine.capacity }} {{ engine.type }}</div>
        </div>
        <div class="bg-secondary-color/5 rounded-lg p-3">
          <div class="text-xs text-secondary-color uppercase tracking-wide mb-1">Power</div>
          <div class="text-sm font-semibold text-main-color">{{ engine.power.hp }}hp</div>
        </div>
        <div class="bg-secondary-color/5 rounded-lg p-3">
          <div class="text-xs text-secondary-color uppercase tracking-wide mb-1">Fuel</div>
          <div class="text-sm font-semibold text-main-color">{{ engine.fuel }}</div>
        </div>
        <div class="bg-secondary-color/5 rounded-lg p-3">
          <div class="text-xs text-secondary-color uppercase tracking-wide mb-1">Center Bore</div>
          <div class="text-sm font-semibold text-main-color">{{ technical.centre_bore }}</div>
        </div>
      </div>
    </div>
    {% endif %}
    
    <!-- Wheel Options Legend -->
    <div class="flex items-center justify-between mb-6">
      <h3 class="text-lg font-semibold text-main-color">Wheel & Tire Options</h3>
      <div class="flex items-center gap-4">
        <span class="flex items-center gap-2">
          <span class="w-3 h-3 rounded-full bg-primary-color"></span>
          <span class="text-xs font-medium text-secondary-color">Original Equipment</span>
        </span>
        <span class="flex items-center gap-2">
          <span class="w-3 h-3 rounded-full bg-accent-color"></span>
          <span class="text-xs font-medium text-secondary-color">Optional Equipment</span>
        </span>
      </div>
    </div>
    
    <!-- Wheel Cards Grid -->
    <div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-4">
      {% for wheel in wheels %}
        <div class="relative group">
          <!-- Glow Effect -->
          <div class="absolute -inset-1 bg-gradient-to-r {% if wheel.is_stock %}from-primary-color/20 to-primary-color/30{% else %}from-accent-color/20 to-accent-color/30{% endif %} rounded-xl blur opacity-25 group-hover:opacity-50 transition-opacity"></div>
          
          <!-- Card Content -->
          <div class="relative bg-background-color rounded-xl border {% if wheel.is_stock %}border-primary-color/30{% else %}border-accent-color/30{% endif %} p-4">
            <!-- Card Header -->
            <div class="flex items-start justify-between mb-4">
              <div class="flex items-center gap-3">
                <div class="relative">
                  <div class="w-14 h-14 rounded-full border-4 {% if wheel.is_stock %}border-primary-color/30{% else %}border-accent-color/30{% endif %} flex items-center justify-center bg-secondary-color/5">
                    <span class="text-lg font-bold {% if wheel.is_stock %}text-primary-color{% else %}text-accent-color{% endif %}">{{ wheel.front.rim_diameter }}"</span>
                  </div>
                  {% if wheel.is_stock %}
                    <span class="absolute -top-1 -right-1 w-4 h-4 bg-primary-color rounded-full flex items-center justify-center">
                      <svg class="w-2.5 h-2.5 text-background-color" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                      </svg>
                    </span>
                  {% endif %}
                </div>
                <div>
                  <div class="text-xs font-medium {% if wheel.is_stock %}text-primary-color{% else %}text-accent-color{% endif %} uppercase">
                    {% if wheel.is_stock %}OE Wheel{% else %}Upgrade{% endif %}
                  </div>
                  <div class="text-xs text-secondary-color">
                    Width: {{ wheel.front.rim_width }}"
                  </div>
                  {% if wheel.is_runflat_tires %}
                    <span class="inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium bg-amber-100 text-amber-800 mt-1">
                      Run-flat
                    </span>
                  {% endif %}
                </div>
              </div>
            </div>
            
            <!-- Wheel Details -->
            {% if wheel.showing_fp_only %}
              <div class="space-y-3">
                <div class="bg-secondary-color/10 rounded-lg px-3 py-2 flex items-center justify-between">
                  <div>
                    <div class="text-xs text-secondary-color mb-1">Front & Rear</div>
                    <div class="font-mono text-xs font-semibold text-main-color">{{ wheel.front.tire }}</div>
                    <div class="text-xs text-secondary-color mt-1">{{ wheel.front.rim }}</div>
                  </div>
                  <a href="#" class="inline-flex items-center px-3 py-1.5 border border-transparent text-xs font-medium rounded-lg text-white bg-primary-color hover:bg-primary-color/90 transition-colors">
                    Buy
                  </a>
                </div>
              </div>
            {% else %}
              <div class="space-y-3">
                <div class="bg-secondary-color/10 rounded-lg px-3 py-2 flex items-center justify-between">
                  <div>
                    <div class="text-xs text-secondary-color mb-1">Front</div>
                    <div class="font-mono text-xs font-semibold text-main-color">{{ wheel.front.tire }}</div>
                    <div class="text-xs text-secondary-color mt-1">{{ wheel.front.rim }}</div>
                  </div>
                  <a href="#" class="inline-flex items-center px-3 py-1.5 border border-transparent text-xs font-medium rounded-lg text-white bg-primary-color hover:bg-primary-color/90 transition-colors">
                    Buy
                  </a>
                </div>
                <div class="bg-secondary-color/10 rounded-lg px-3 py-2 flex items-center justify-between">
                  <div>
                    <div class="text-xs text-secondary-color mb-1">Rear</div>
                    <div class="font-mono text-xs font-semibold text-main-color">{{ wheel.rear.tire }}</div>
                    <div class="text-xs text-secondary-color mt-1">{{ wheel.rear.rim }}</div>
                  </div>
                  <a href="#" class="inline-flex items-center px-3 py-1.5 border border-transparent text-xs font-medium rounded-lg text-white bg-primary-color hover:bg-primary-color/90 transition-colors">
                    Buy
                  </a>
                </div>
              </div>
            {% endif %}
            
            <!-- Technical Info -->
            <div class="mt-3 pt-3 border-t border-secondary-color/20">
              <div class="flex justify-between text-xs">
                <span class="text-secondary-color">Bolt: {{ technical.bolt_pattern }}</span>
                <span class="text-secondary-color">Thread: {{ technical.wheel_fasteners.thread_size }}</span>
              </div>
            </div>
          </div>
        </div>
      {% endfor %}
    </div>
  </div>
</div>

Related Demos

Immediate Redirect: Direct Catalog Integration with Dynamic Parameters

paid feature, immediate redirect

Advanced Integration with Custom JavaScript, demo #1

paid, custom javascript