You can now add the Partbot Make, Model, Year Vehicle Search (MMYVS) component to your Shopify theme without having to make any major edits to your theme's code.
Using Shopify's App Theme Blocks, you can now easily add and customize the Vehicle Search to your theme using the Theme Editor.
Before you begin
We recommend installing Shopify's Search & Discovery app if you haven't already, and adding Partbot's vehicle metafields to your store filters.
If you are running a live store, we advise making a copy of your published theme first to make the below changes and testing before publishing or updating your live theme.
Setting up Search Filters
We recommend setting up store filters using the Shopify Search & Discovery app; this will ensure the vehicle search plugin works natively with your store's search filters. You should only skip this step if you are using a custom JavaScript solution to listen for vehicle change events.
Open Search & Discovery > Filters and Add filter
Search for Product metafield: Vehicle Makes, select and save - note: if you do not see "Product metafield: Vehicle Makes" you may have a legacy store integration and will need to contact support to update your store configuration.
Repeat this process for:
Vehicle Model
Vehicle Year
Vehicle Body
Vehicle Series
Vehicle Variant
Vehicle Engine
Vehicle Engine Capacity
Hiding vehicle options from your theme's sidebar filters: because we're using the Vehicle Search plugin it doesn't make sense to show them as sidebar options as well (unless you really want to). You can hide these filters (aka facets) by making a small edit to your theme code - open your code editor and search for:
for filter in filters
This should bring up the locations in your code that render search filters, usually in a file called "filters.liquid" or "facets.liquid" or similar. Click on the search result to open the file and automatically jump to the code block.
You're looking at a "for loop", which essentially iterates over each of your configured store filters to render them on screen. Immediately inside the for loop, paste this code snippet:{% comment %} Hide Partbot Vehicle Filters {% endcomment %}
{%- if filter.param_name contains 'partbot.vehicle_' -%}
{% continue %}
{% endif %}
Example:
This will now prevent your theme from rendering the Partbot vehicle filters as selectable options. You should do this for all search result occurrences to also hide any "Currently selected filters". If you're still seeing the vehicle filters appear as sidebar facets, reach out to our support team for assistance.
Adding Vehicle Search to your Theme
After setting up the vehicle filters, open the Theme Editor (Online Store > Themes > Customize) and decide where you want the Vehicle Search to appear in your theme - we suggest adding it to your Header group so it appears across all pages of your store, alternatively you can add it to your Collections template, or a custom Collections template if you only want the vehicle search to appear for specific collections.
Hover between Sections until you see a blue plus icon, click this to bring up the Add New Section panel
Switch from Sections to Apps, and search for Vehicle Search by Partbot, click to add it to your theme.
This will create a new section called Apps and add the Vehicle Search component inside, like so:
Tip: you can click on the section title "Apps" and change it to "Vehicle Search" to make it easier to locate in the future.
Click on Vehicle Search to edit the style and configuration settings.
We recommend leaving most of the settings as-is; the most important setting is the Redirect URL, this is the Collection we will take the customer to when they click Search if they are not currently viewing a collection - you can choose a specific collection, however, in most cases we recommend creating a dedicated "All Products" smart collection using a single condition "Price is greater than $0" and setting the URL handle to /all to override Shopify's default All collection.
Save your theme changes and take it for a spin.
You should now be able to select different vehicle makes and models and see your product results update in real-time. We've done our best to make the plugin work with most popular themes, if something isn't working please reach out to our support team for assistance.