Automotive features

Torquex is built for parts and accessories stores. Its automotive features — the Year/Make/Model fitment selector, the saved-vehicle garage, the “Fits your vehicle” badge, the technical spec table, the install-difficulty badges, and the compare table — are all powered by product metafields in the custom namespace. No third-party app is required: everything runs on the theme’s own vanilla CSS and JavaScript.

This page explains how each feature reads its data, where it appears, and how a shopper uses it. For step-by-step instructions on creating the metafield definitions, see the Metafields reference. The three merchandising sections these features feed — Garage banner, Install difficulty guide, and Compare products — have their own pages in this group.

The metafield contract at a glance

Every automotive feature maps to one metafield. All of them live in the custom namespace.

Metafield	Type	Powers
custom.fitment	JSON	Fitment selector, “Fits your vehicle” badge, the Fitment tab table, the product-badges block
custom.install_difficulty	Single line text	Install-difficulty badge on the product page, product card (on by default, see note below), Installation tab, and compare table
custom.part_number	Single line text	Part number row in the spec table and compare table (also overrides the variant SKU)
custom.weight_kg	Decimal	Weight row in the spec table and compare table
custom.dimensions	Single line text	Dimensions row in the spec table and compare table
custom.material	Single line text	Material row in the spec table and compare table
custom.warranty	Single line text	Warranty row in the spec table and compare table

A feature renders only when its metafield has a value. Leave a metafield blank and the matching badge, row, or selector simply does not appear — there is no broken or empty state to clean up.

Tip

Add the metafield definitions once under Settings → Custom data → Products in your Shopify admin, then fill in values per product. The exact definition steps (names, types, and the install-difficulty choice list) are in the Metafields reference.

Year/Make/Model fitment selector

The fitment selector is the cascading Year → Make → Model dropdown that lets a shopper confirm a part fits their vehicle before they buy.

How it reads custom.fitment

custom.fitment is a JSON metafield that holds an array of vehicle objects. Each object uses lowercase, case-sensitive keys: year, make, model, and an optional trim.

[
  { "year": 2021, "make": "Toyota", "model": "Tacoma", "trim": "TRD Pro" },
  { "year": 2021, "make": "Toyota", "model": "Tacoma", "trim": "SR5" },
  { "year": 2020, "make": "Ford", "model": "F-150" },
  { "year": 2022, "make": "Jeep", "model": "Wrangler", "trim": "Rubicon" }
]

How the data behaves:

• One object per vehicle the part fits. Add as many rows as you support.
• year may be a number (2021) or a numeric string ("2021"). The theme parses it as a number for sorting (newest first) and compares it as text when matching a saved vehicle, so both forms work — a plain number is cleanest.
• make and model are required on every row. trim is optional and can be omitted on any row.
• The selector matches on year + make + model only. trim is not part of the dropdowns or the fit/no-fit check; it appears only as a column in the Fitment tab table (see below).
• Keys must be exactly year, make, model, trim in lowercase. An empty or absent custom.fitment renders no selector, no badge, and an empty Fitment tab.

The dropdowns build themselves from your data: the Year menu lists every unique year (newest first), choosing a year enables and populates Make with only the makes available for that year, and choosing a make populates Model the same way. The shopper never sees a combination you did not enter.

Where it appears and how a shopper uses it

On the product page, the selector is the Fitment checklist block. Add it from the theme editor: open a product template, and inside the product section add the block named Fitment checklist wherever you want it (commonly right under the buy buttons).

Using it:

1. The shopper picks a Year, then Make, then Model. The block is headed Check fitment — a static label printed above the dropdowns, always shown regardless of selection.
2. As soon as all three are chosen, the theme shows an inline result below the dropdowns reading “Fits your 2021 Toyota Tacoma”. Because the dropdowns are built from this product’s own custom.fitment list — each menu only offers combinations the part actually supports — any selection a shopper can make in the dropdowns is, by construction, always a fit. You will not produce a “does not fit” message by choosing in these menus. The “Does not fit your saved vehicle” message is the cross-page state: it appears when a shopper arrives with a vehicle they already saved on a different product, and this product’s custom.fitment list does not include it (see The vehicle garage below).
3. The chosen vehicle is saved to the shopper’s browser (local storage) so it persists across pages and visits. Once a vehicle is set, saved, or restored, a Clear button appears below the dropdowns so they can reset it; it is hidden on a first visit with no saved vehicle, and hides again after they clear.

Because the vehicle is saved locally, once a shopper sets it on any product, every other Torquex page that shows fitment can react to it instantly — that is what powers the garage and the badges below. No account or login is required, and nothing is sent to a server.

The vehicle garage

The “garage” is the saved-vehicle concept: the shopper’s chosen Year/Make/Model, stored in their browser and reused across the store. There is no separate garage database — the saved vehicle is held in the browser’s local storage and read back by the theme wherever fitment matters.

To promote the garage and invite shoppers to set their vehicle, Torquex provides a dedicated Garage banner section. See Garage banner for its settings — the actual saving happens through the fitment selector on product pages.

”Fits your vehicle” badge

Once a shopper has saved a vehicle, Torquex automatically flags products that fit it with a green “Fits your vehicle” badge — for example “Fits your 2021 Toyota Tacoma” with a check-mark icon.

How it works:

• The badge reads the product’s custom.fitment list and compares it to the shopper’s saved vehicle (year + make + model). It shows only when there is a match, and stays hidden otherwise.
• It appears on product cards wherever they appear — collection grids, search results, product recommendations, and recently-viewed — and on the product page (via the Product badges block — see below). Product cards show the fitment badge by default.
• A product with no custom.fitment value never shows the badge.

This badge is purely informational and matched in the shopper’s browser, so it updates the moment they set or clear a vehicle, with no page reload required.

Product badges block

On the product page, the Product badges block renders both the install-difficulty badge and the “Fits your vehicle” badge together. Add it from the theme editor inside the product section (it commonly sits near the title or buy buttons). The block automatically hides itself when the product has neither custom.install_difficulty nor custom.fitment, so it never leaves an empty gap.

Technical spec table

The spec table is a clean, two-column table of key product specifications, built entirely from custom.* metafields. Any row whose metafield is blank is skipped; if all of them are blank, no table renders.

Spec row	Metafield	Value format
Part number	custom.part_number	Free-form SKU/part string, printed verbatim (e.g. TQX-1042-BLK).
Weight	custom.weight_kg	A bare number with no unit (e.g. 12.5). The theme appends kg itself.
Dimensions	custom.dimensions	Free-form string printed verbatim — include your own units (e.g. 120 x 80 x 30 cm).
Material	custom.material	Free-form string (e.g. 6061-T6 Aluminum).
Warranty	custom.warranty	Free-form string (e.g. 2 years or Lifetime).

Caution

For Weight, store only the number. The theme renders it through a translation that adds ” kg” for you, so a value of 12.5 shows as 12.5 kg. If you store 12.5 kg, the storefront prints 12.5 kg kg. For Dimensions, the opposite is true: no unit is appended, so include the unit in the value yourself.

Where the spec table appears

The spec table is surfaced on the product page through the Tab — Specifications block. This block lives in the separate Product tabs section (Add section → Product tabs), not the Product section — the tab blocks are added to the Product tabs section’s block list in the theme editor. The tab is labeled Specifications, and when none of the five metafields are set, the tab shows a neutral “No information available for this product” message instead of an empty table.

The same five metafields also fill the Fitment tab and Installation tab when you add those blocks to the Product tabs section:

• Tab — Fitment renders the full fitment table with Year, Make, Model, and Trim columns, one row per vehicle in custom.fitment. The Trim column shows a dash (—) for any row without a trim. This is the only place trim is displayed.
• Tab — Installation shows the install-difficulty badge (from custom.install_difficulty), plus optional rich-text Installation instructions and an optional install video (a Shopify-hosted Video or a YouTube / Vimeo URL), all set in the block’s settings.

Install-difficulty badges

The install-difficulty badge is a wrench-icon tag that tells shoppers how hard a part is to fit. It is driven by custom.install_difficulty, which accepts exactly one of three lowercase, case-sensitive values:

Value	Badge label
easy	Easy install
moderate	Moderate install
professional	Pro install

Any other value (or a blank field) renders no badge — there is no fallback label. To prevent typos, add a Choices / List of values validation on the custom.install_difficulty definition limiting it to easy, moderate, and professional. See the Metafields reference for the exact definition setup.

The badge appears on the product page (Product badges block), product cards (wherever they appear — collection grids, search, recommendations, and recently-viewed), the Installation product tab, and the compare table.

On the product page (Product badges block) and the Installation tab the badge is unconditional — it shows whenever custom.install_difficulty is set. On the compare table it is overlaid on the product image, so it appears only when the product also has a featured image. On product cards it is additionally controlled by the global Show install difficulty badge product-card setting, which is on by default but can be turned off in theme settings. See Theme settings → Product cards for that option.

To explain your difficulty tiers to shoppers in a dedicated content section, Torquex provides the Install difficulty guide section. See Install difficulty guide.

Compare products

The Compare products section places up to four products side by side so shoppers can weigh them on the specs that matter — part number, weight, dimensions, material, and warranty, each pulled straight from the product’s custom.* metafields, with the install-difficulty badge overlaid on each column. See Compare products for its settings and behavior.

Putting it together

A complete automotive product setup looks like this:

1. 1 Create the definitions
2. 2 Fill in product values
3. 3 Add the product blocks
4. 4 Add merchandising sections

1 Create the definitions

Create the seven custom metafield definitions (see the Metafields reference).

2 Fill in product values

On each product, fill in custom.fitment (the JSON vehicle list), custom.install_difficulty, and the spec fields you have.

3 Add the product blocks

On the product template, add the Fitment checklist and Product badges blocks inside the Product section, and add the Tab — Specifications, Tab — Fitment, and Tab — Installation blocks inside the separate Product tabs section.

4 Add merchandising sections

On your homepage or a landing page, add the Garage banner, Install difficulty guide, and Compare products sections to merchandise the experience.

← Back

Next →

---

Related: Metafields reference · Product pages · Torquex support replies within 12 hours.