> For the complete documentation index, see [llms.txt](https://docs.globo.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.globo.io/vehicle-finder/set-up-vehicle-finder-form.md).

# 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](/vehicle-finder/configure-vehicle-finder-fields.md).
* **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](/vehicle-finder/import-vehicle-data.md) and [Manage vehicles in Vehicle Manager](/vehicle-finder/manage-vehicles.md).

## 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](/vehicle-finder/import-vehicle-data.md).
2. **Add the form fields** — one dropdown per field, usually Year, then Make, then Model. See [Configure Vehicle Finder fields](/vehicle-finder/configure-vehicle-finder-fields.md).
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](https://2009335375-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKmtdB4I84W3J8hc91H4S%2Fuploads%2Fgit-blob-b858d5f970b6fe612ecda63b4872020914f88cf7%2Fymm-settings.png?alt=media)

## 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](https://2009335375-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKmtdB4I84W3J8hc91H4S%2Fuploads%2Fgit-blob-0fa6ffff23cabb2fc00f7d0d57ba7d39f10af3a7%2Fymm-form-design.png?alt=media)

## 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.

  ```html
  <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](/vehicle-finder/import-vehicle-data.md)
* [Manage vehicles in Vehicle Manager](/vehicle-finder/manage-vehicles.md)
* [Configure Vehicle Finder fields](/vehicle-finder/configure-vehicle-finder-fields.md)