Set up Vehicle Finder form

Add a Vehicle Finder form to your storefront so shoppers can search for products that fit their vehicle, by Year, Make, and Model.

What this does

The Vehicle Finder form lets shoppers pick their vehicle — for example 2019 / Honda / Civic — and see only the products that fit it. Each dropdown narrows the next: after choosing a Year, the Make list only shows makes available for that year, and so on. It's commonly used by stores selling auto parts and accessories, but the fields can be any attributes you import.

Everything is managed on the app's Vehicle Finder page, which has four parts:

• Setup guide — a three-step checklist to get the form live.

• Form fields — the dropdowns shoppers choose from. See Configure Vehicle Finder fields.

• Form design — the heading, colors, and search button, with a live preview (covered below).

• Vehicle Manager — every vehicle and the products that fit it. See Import vehicle data and Manage vehicles in Vehicle Manager.

Follow the setup guide

At the top of the Vehicle Finder page, the Setup guide walks you through three steps. Expand a step to see what to do and a button for it:

1. Upload your vehicle data — a spreadsheet with one row per vehicle: the Product ID, SKU or Variant ID, plus Year, Make and Model. See Import vehicle data.

2. Add the form fields — one dropdown per field, usually Year, then Make, then Model. See Configure Vehicle Finder fields.

3. Turn it on and place it on your store — covered in the next two sections.

Tick a step's checkbox to mark it done. Once you're finished, close the guide with the ✕ button.

Vehicle Finder page — On/Off switch, Form fields and Form design cards

Turn the form on

1. In the app, go to Vehicle Finder.

2. Turn on the switch next to the Vehicle Finder heading at the top of the page (or click Turn on Vehicle Finder in step 3 of the setup guide). The badge next to the page title changes to On.

3. Click Save in the bar at the top of the page.

Turning the switch off hides the form on your storefront without deleting your fields or vehicle data.

Customize the form design

1. On the Vehicle Finder page, click Customize in the Form design card. The Form design page opens with your settings on the left and a Preview on the right — switch between Desktop and Mobile to check both.

2. Adjust the settings in each group:

   • Heading & search box — Form heading (the title shown above the form), Show keyword search box (adds a free-text search box next to the dropdowns), Show "Clear all" button (lets shoppers reset their selection), Heading text color, and Form background color.

   • Dropdowns — Label color, Border color, Background color, and Corner radius (applies to the dropdowns, the search box, and the buttons).

   • Search button — Text color and Background color.

3. Click Save in the bar at the top of the page.

To start over, click Reset to default at the top of the page, then save.

Vehicle Finder — Form design page with settings and live preview

Add the form to your theme

You can place the form in either of two ways:

• Theme editor app block — in Shopify, go to Online Store > Themes > Customize, open the page where you want the form, click Add block (or Add section), and choose the Vehicle Finder Form app block. Save the theme.

• Shortcode — on the Form design page, open Add to your theme, click Copy, and paste the shortcode wherever the form should appear (for example inside a custom section or a page's HTML). You can use it more than once on a page.

  <div id="gf-form"></div>

Use the shortcode when the theme editor's app blocks can't reach the spot you want.

Related pages

• Import vehicle data

• Manage vehicles in Vehicle Manager

• Configure Vehicle Finder fields