All Collections
Code Snippets
Shopify
Vehicle Application Table
Vehicle Application Table

Display a handy table that lists a product’s vehicle fitment applications.

Updated over a week ago

Use the following Liquid code snippet on your Shopify product page to display a table of vehicle fitment applications. This table uses the vehicle fitment metafields synced to your store via Partbot.

{% assign variant = product.selected_or_first_available_variant %}
{% assign vehicle_applications = variant.metafields.partbot.vehicle_applications.value %}
{%- if vehicle_applications -%}
<div id="partbot-vehicle-applications">
{%- for application in vehicle_applications -%}
<h6 class="vehicle-application-title">{{ application.title }}</h6>
{% if application.catalogue_notes != null and application.catalogue_notes != "undefined" %}
<p>{{ application.catalogue_notes }}</p>
{%- endif -%}
<div class="partbot-vehicle-table">
<table>
<thead>
<tr>
<th>Make</th>
<th>Model</th>
<th>From</th>
<th>To</th>
<th>Body</th>
<th>Series</th>
<th>Engine</th>
<th>Variant</th>
<th>Drivetrain</th>
</tr>
</thead>
<tbody>
{%- for vehicle in application.vehicles -%}
<tr>
<td>{{ vehicle.make }}</td>
<td>{{ vehicle.model }}</td>
<td>{{ vehicle.from }}</td>
<td>{{ vehicle.to | default: '-' }}</td>
<td>{{ vehicle.body }}</td>
<td>{{ vehicle.series }}</td>
<td>{{ vehicle.engine }}</td>
<td>{{ vehicle.variant }}</td>
<td>{{ vehicle.drivetrain }}</td>
</tr>
{%- endfor -%}
</tbody>
</table>
</div>
{%- endfor -%}
</div>
{%- endif -%}

Don’t forget to style the table to match your website theme!

Did this answer your question?