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!