Vehicle Application Table – Partbot

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 -%}
        <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!