Vehicle fitment

How fitment works

Fitment in Datum has two parts:

1. The vehicle list menu. A Shopify menu with your makes, models and years. The vehicle finder reads its options from this menu.
2. Fitment data on each product. A list of the vehicles each part fits, stored in a product metafield or in product tags.

When a shopper picks a vehicle, Datum compares it with each product's fitment data and shows a fit badge. A part only shows “Fits” when its own data names that vehicle.

The fitment settings are in Theme settings > Vehicle fitment. Turn on Enable vehicle fitment to show the vehicle finder, My garage and fit badges.

Add your vehicle list

The vehicle finder gets its makes, models and years from a menu with three levels:

1. Top level: makes, for example Jeep.
2. Second level: models under each make, for example Wrangler JL.
3. Third level: years under each model, for example 2021.

Example menu:

Jeep
  Wrangler JL
    2018
    2019
    2020
    2021
  Gladiator JT
    2020
    2021
Ford
  F-150
    2021
    2022

To create it:

1. In your Shopify admin, open your menus (Online Store > Navigation, or Content > Menus in newer admins).
2. Click Add menu and name it, for example “Vehicles”.
3. Add each make as a menu item.
4. Drag each model under its make, then drag each year under its model.
5. Give every year item a link. Shoppers go to this link after they save that vehicle in the home page finder or the vehicle window. A collection for that vehicle works well. If the link is #, Datum uses the default results page instead (see below).
6. Click Save menu.
7. In the theme editor, go to Theme settings > Vehicle fitment and choose the menu in Vehicle list menu.

The finder asks for the year first, then the make, then the model. The year list shows every year in the menu, newest first. After a year is picked, the make list only shows makes that have that year, and the model list only shows models that have that year.

The default results page depends on Fitment data source. With Product metafield, it is the all products collection, filtered to the shopper's vehicle. With Product tags, it is the all products collection with no filter.

You can rename the three finder steps in Theme settings > Vehicle fitment with First step label, Second step label and Third step label. The steps always work in the order year, make, model.

If no vehicle list menu is chosen, the finder does not show. In the theme editor you see a short notice instead. Shoppers do not see it.

Add fitment data to products

Choose where your fitment data lives in Theme settings > Vehicle fitment > Fitment data source:

Create the fitment metafield

1. In your Shopify admin, go to Settings > Metafields and metaobjects > Products (called Custom data in older admins).
2. Click Add definition.
3. Name it “Fitment”. Check that the namespace and key is custom.fitment.
4. For the type, choose Single line text, then choose List of values.
5. Click Save.
6. Open a product. Under Metafields, add one entry per vehicle in Fitment.

If you use a different namespace and key, enter it in Fitment metafield.

Fitment line formats

Each metafield entry or tag is one fitment line. Datum understands these formats:

For tags, add the prefix in front: fit:2021 Jeep Wrangler JL or fit:Jeep / Wrangler JL / 2018-2023.

Things to know:

• The make and model must match your vehicle list menu exactly, word for word. 2019 Ford F-150 Raptor does not match a 2019 Ford F-150.
• Capital letters do not matter.
• The vehicle finder asks for year, make and model only. An engine in a fitment line is shown in the fitment table on the product page, but it does not change the fit badge.
• The “Only show parts that fit” switch finds parts with plain Year Make Model lines, lines with an engine, and range lines that cover the shopper's year.

Universal parts

Universal parts fit every vehicle, for example a tire gauge or a shop towel. Mark them in one of two ways:

• Add the tag set in Theme settings > Vehicle fitment > Universal fit tag (default universal). This works with both data sources.
• Or add a fitment line that says universal.

Universal parts show the “Universal fit” badge, even before the shopper picks a vehicle.

Universal parts have no vehicle list, so the “Only show parts that fit” switch hides them. To show them anyway, put them in a collection and choose it in the collection page setting Universal parts collection. See Show universal parts below filtered results.

Worked example: 2021 Jeep Wrangler JL

Your vehicle list menu has Jeep > Wrangler JL > 2021. You sell a lift kit that fits the Wrangler JL from 2018 to 2021.

With the metafield (recommended). Add four entries to the product's Fitment metafield:

2018 Jeep Wrangler JL
2019 Jeep Wrangler JL
2020 Jeep Wrangler JL
2021 Jeep Wrangler JL

With tags. Set Fitment data source to Product tags and add these tags:

fit:2018 Jeep Wrangler JL, fit:2019 Jeep Wrangler JL, fit:2020 Jeep Wrangler JL, fit:2021 Jeep Wrangler JL

As a range (badges only). One line does the same job for badges and the fitment table, but not for the fit filter:

Jeep / Wrangler JL / 2018-2021

A shopper who picks 2021, Jeep, Wrangler JL now sees “Fits your Wrangler JL” on this kit. A shopper with a 2022 Wrangler JL sees “Does not fit your Wrangler JL”.

Fit badges and what they mean

Fit badges show on product cards, the product page, quick add, search suggestions and the compare window. Their colors are fixed so shoppers can trust them on every page.

Gift cards never show a fit badge.

On the product page, the Fit status block shows the badge as a panel with extra help:

• When the part fits or is universal, it shows the Fit note text, if you add one.
• When the part does not fit, it tells shoppers to check the specs against their old part.
• When there is no fitment data, it shows a See specs button (if the page has a Specifications block) and your Help link button (if you add a link).

Turn on “Only show parts that fit”

When a shopper has picked a vehicle, collection pages show a vehicle bar with a switch: Only show parts that fit. It uses Shopify's own filtering, so it needs the Search & Discovery app.

You need:

• Fitment data source set to Product metafield.
• Plain Year Make Model lines in the metafield (see Fitment line formats).
• The fitment metafield added as a filter.

1. Install the free Shopify Search & Discovery app if you do not have it.
2. In the app, open Filters and click Add filter.
3. Choose your Fitment product metafield as the source and save.
4. In the theme editor, open a collection page, click the Collection section and check that Show “Only show parts that fit” is on.

The fitment filter does not appear in the normal filter list. Datum shows it as the switch instead.

When no part in a collection fits, Datum shows a message with a button to show all parts, and your Help button link if you set one in the Collection section.

When no vehicle is picked, the collection page shows a vehicle finder bar instead. Its colors come from Vehicle prompt color scheme.

Cart fit check

When Show fit check in cart is on (in Theme settings > Vehicle fitment), the cart checks each item against the shopper's vehicle. Items that do not fit show a warning: “May not fit your [model]. Check the part before checkout.”

• The check never blocks checkout.
• Only parts with fitment data that does not include the vehicle get a warning. Parts with no fitment data do not.
• The cart page also shows which vehicle the parts were checked against.

The shopper's vehicle is stored as a cart attribute named Vehicle, in the form year|make|model|. It is saved with the order, so your team can see which vehicle the customer picked.

My garage (saved vehicles)

My garage lets shoppers save vehicles and switch between them.

• Shoppers can save up to 5 vehicles. The newest is added to the top. When a sixth is added, the oldest is removed.
• The vehicle in use is shown in the header and used to check fit on every page.
• Vehicles are saved in the shopper's browser only. They are not linked to a customer account, so they do not move to another device or browser.
• Shoppers can remove a vehicle, or choose Shop without a vehicle in the vehicle window.

Where shoppers find it:

• Header. The My garage button opens the vehicle window with the finder and saved vehicles. Turn it on or off with Show My garage in the Header section. It needs vehicle fitment on and a vehicle list menu.
• A My garage page. Add the My garage section to a page template to give shoppers a full page for their vehicles. See My garage section.