Product page

The product page shows the buying area, the vehicle fit, the part numbers, the specifications, the fitment table, the parts that go with the item, and recommendations. This page lists the blocks of the buying area, the other sections in the product template, and the text format for specifications and documents.

The product template

The product template runs these sections in order. Each section can be moved, hidden or removed in the theme editor.

Product information (main-product): the buying area and gallery.
Product index bar (product-index-bar): links that jump to the sections below. Each link has the settings "Label" and "Anchor id". The default link is "Specifications" with the anchor ProductSpecs.
Product specifications (product-specs): the specification table.
Product fitment (product-fitment): the vehicles that the product fits.
Product part numbers (product-part-numbers): OEM and cross-reference numbers.
Fitted together (product-bundle): parts that are sold to fit with this one.
Product recommendations (product-recommendations): related products.

Product information settings

Setting	Options or default	Effect
"Media ratio"	"Adapt to image", "Square", "Portrait", "Landscape"	The shape of the main image
"Media fit"	"Fill", "Fit"	"Fill" crops the image to the frame. "Fit" shows the whole image.
"Show sticky add to cart bar"	On by default	Shows the add to cart bar when the shopper scrolls past the buy buttons

Blocks in the buying area

Add, move and remove these blocks in the product information section. The block names are the names the editor shows.

Block	Settings and what it does
"Brand and part number"	The vendor name and the SKU in one line
"Title"	The product title
"Rating"	The stars and count. It needs a product review app.
"Fitment verdict"	The fit state for the chosen vehicle, with the vehicle name and any note. When no vehicle is chosen, it shows a vehicle selector bar.
"Price"	"Show badges", "Show tax and shipping note"
"Variant picker"	"Picker type": "Buttons" or "Dropdown"
"Quantity"	The quantity field
"Buy buttons"	"Show dynamic checkout buttons"
"Volume pricing"	Price tiles for quantity breaks. Needs B2B catalogs with quantity price breaks. See below.
"Stock locations"	"Locations shown" (default 3), "Delivery label" (default "Delivery"), "Delivery text" (default "Order by 16:00, arrives tomorrow"). Needs local pickup or several locations. See below.
"Inventory"	"Low stock threshold" (default 5). Shows a low stock message at or below this number.
"SKU"	The variant SKU
"Pickup availability"	Whether the part is available for local pickup
"Part numbers"	A data grid with the part number, OEM numbers (first two and a count), barcode and condition
"Documents"	Links to the fitting guides in parts.documents
"Description"	The product description
"Collapsible content"	"Heading" (default "Care instructions"), "Text", "Page"
"Complementary products"	Products that go with this one
"Share"	Share links
"Text"	"Text": a short note
"Custom Liquid"	"Liquid code" for your own code or an app
"Vendor"	The brand name
"@app"	An app block. Apps can add blocks here.

Volume pricing

Volume pricing shows the price for each quantity break. It reads the quantity price breaks on the variant. You set them in the B2B catalog, not in the product form. Without a B2B catalog with quantity price breaks, the block shows nothing.

Stock locations

Stock locations show the stock at each location with a pickup option. This needs local pickup, or more than one location, in Shopify. A store with one location and no local pickup shows only the delivery row.

Specifications

Specifications are written in the metafield parts.specifications, one line for each row. Use one of these two forms:

Dimensions | Length | 412 mm
Dimensions | Width | 88 mm
Material | Body | Cast aluminium
Weight | 1.2 kg

Group | Label | Value: the line is placed in the group named before the first bar.
Label | Value: the line goes in the group named Group for lines without a group. The default name is "Details".
Do not use a bar inside a value. Write the value without it.

The Product specifications section has the settings "Heading" (default "Specifications") and "Group for lines without a group" (default "Details"). Its block Specification row has "Group", "Label" and "Value". Use these rows only for a small list that you write by hand. For most products, use the metafield.

Fitment table

The Product fitment section lists the vehicles in fitment.vehicles. It shows the first 20 rows, plus the row of the shopper's vehicle when one is chosen. Use the setting Rows before show all to change the 20. "Show all" loads the rest, and a text filter narrows the list. See Vehicle fitment.

Documents

Upload fitting guides and data sheets to the metafield parts.documents. Use PDF files. The Documents block lists each file with its name. Keep file names clear, for example "Front pads fitting guide".

Fitted together

The Fitted together section shows parts that are sold to fit with this item, such as the bolts or the gasket. Heading: "Fitted together" by default. Each block is one product, chosen in the Product setting. Add as many as you need, and keep the order that a fitter would follow.

Part numbers

The Product part numbers section shows the OEM and cross-reference numbers from the metafields in Part numbers and search. If the metafields are empty, the section reads the tags with the OEM tag prefix. The section settings are "Heading" (default "OEM and cross-reference numbers") and "Default panel title" (default "OEM numbers").

Check the page

Choose a vehicle that fits, and check that the verdict shows Fits and the note.
Choose a vehicle that does not fit, and check that the verdict shows Does not fit. The buy button then shows an outline Add anyway button, if the variant is in stock.
Check the specification table on a phone. It should stack without sideways scrolling.
Check that the add to cart button works with the default variant, and with each option.