The product page
The default product template has three sections:
- Product information: media, title, price, fit status and buy buttons.
- Product details: the full spec table, the vehicle fitment table and install information.
- Related products: products related to the one on the page.
To edit it, open the theme editor and choose Products > Default product from the page list at the top.
Product information settings
Image shape and fit are set once for the whole store in Theme settings > Product images. Shoppers can click a photo to see all of it.
| Setting | What it does |
|---|---|
| Media position on desktop | Left or Right. |
| Show thumbnails | Shows small images under the main image. |
| Sticky buy bar | A bar with the price, Add to cart and (when the part fits) the fit status that stays on screen while shoppers scroll. Choose Small screens, All screens or Off. |
| Color scheme | The colors of the section. |
| Top padding, Bottom padding | Space above and below the section. |
Videos and 3D models load only when the shopper starts them. Products with a 3D model show a View in your space button on supported phones.
Product information blocks
Add, remove and reorder these blocks in the Product information section.
| Block | What it does and its settings |
|---|---|
| Vendor and part number | Show vendor, Show part number (SKU), and a short Label next to the part number, for example Bolt-on. |
| Title | Heading size: Large, Medium or Small. |
| Product rating | Shows the rating saved by a product reviews app. Reviews anchor makes the review count a link to your reviews on the page, for example reviews. |
| Price | Show tax and shipping note. Shop Pay Installments shows under the price when it is on in your payment settings. |
| Fit status | The fit panel. See Fit panel. |
| Variant picker | Style: Buttons or Dropdown. Show swatches uses the color or image saved on each option value. Show price on each option works for products with one option. |
| Subscription options | Shows purchase options for products with selling plans from a subscriptions app. Policy note appears under the options. |
| Quantity selector | Stepper or preset buttons. See Quantity selector. |
| Buy buttons | Add to cart. Show dynamic checkout buttons and Show gift card recipient form. |
| Compare checkbox | Lets shoppers add the part to the compare tray. Hidden on gift cards. |
| Pickup availability | Shows local pickup for the selected variant when pickup is set up in your shipping settings. |
| Inventory status | Shows In stock, Out of stock, or Available to order. Low stock threshold shows the real number left at or below this amount. Set it to 0 to turn it off. |
| Icons with text | Up to three short lines, each with an icon. Choose from Truck, Return, Shield, Wrench, Store, Lock, Discount, Calendar, Car, Check mark, Phone, Email, Gift, Engine, Repeat or None. |
| Specifications | The spec table from the specs metafield. Heading, Show as collapsible tab and Open by default. |
| Description | The product description. Heading, Show as collapsible tab and Open by default. |
| Collapsible tab | A tab with a Heading, Icon, Content and optional Page content. Good for shipping and returns. |
| Complementary products | Products to buy together, set in the Search & Discovery app. Heading and Maximum products. |
| Text | Rich text. Text style: Body, Small or Muted. |
| Custom Liquid | App snippets or other Liquid code. |
The Product information section also accepts app blocks. See App blocks.
Fit panel
The Fit status block shows whether the part fits the shopper's vehicle, from your fitment data. A part that does not fit can still be bought.
| Setting | What it does |
|---|---|
| Fit note | Shown when the part fits, or is universal. Connect a metafield to show a different note on each product. |
| Help link | Shown when a part has no fitment data, for example a link to your contact page. |
| Help link label | The button text for the help link. Default: Ask a mechanic. |
See Fit badges and what they mean.
Quantity selector
The Quantity selector block places the control on the product page. Its settings are in Theme settings > Quantity, because quick add on collection pages uses the same control. There are two styles in Style:
- Stepper: a number with plus and minus buttons.
- Preset buttons: buttons for set amounts, for example 1, 2, 4 or 5. Good for tires and wheels.
| Setting | What it does |
|---|---|
| Preset quantities | Comma-separated amounts. Add a short note after a colon. Default: 1, 2, 4:Set, 5:With spare. |
| Preset selected by default | The amount selected when the page opens, for example 4. |
| Preset heading | The heading above the buttons. Default: How many? |
| Product types that use presets | Separate types with commas, for example All-terrain tire, Wheel. Only products with one of these product types use presets. Other products show the stepper. Leave it blank to use presets on every product. |
With presets, Datum shows the total under the buttons, for example 4 x $189.00 = $756.00. Quick add shows the same buttons, with the same amount selected.
The stepper follows any quantity rules you set in Shopify (minimum, maximum and multiples) and shows them under the field.
Buy buttons
| Setting | What it does |
|---|---|
| Show dynamic checkout buttons | Shows buttons like Shop Pay, using the payment methods available in your store. Hidden when a gift card is sent to a recipient. |
| Show gift card recipient form | Lets shoppers send a gift card product to someone by email, with a name, message and send date. |
When a product is sold out and you have chosen a Restock request page in Theme settings > Product cards, shoppers see a link to ask about restock.
Pickup availability
Shows whether the selected variant can be picked up from your locations. Set up local pickup in Settings > Shipping and delivery first.
Add product specs
Specs show as a table on the product page, as a spec row on product cards, and in the compare window. They come from one multi-line text metafield. Set it in Theme settings > Product cards > Specs metafield (default custom.specs).
- In your Shopify admin, go to Settings > Metafields and metaobjects > Products.
- Add a definition named “Specs” with namespace and key
custom.specsand type Multi-line text. - On each product, write one spec per line as
Label: Value.
Lift height: 2.5 in
Material: Steel
Finish: Black powder coat
Warranty: Lifetime- Lines without a colon are skipped.
- Product cards show the first 3 specs when Show spec row is on. Put the most useful specs first.
- Use the same labels across products, so the compare window can line them up.
Product details section
The Product details section sits below the main product information. It only works on product templates.
| Setting | What it does |
|---|---|
| Show section links bar | A bar with links to each block, the price, and an Add to cart button that jumps back up. |
| Color scheme | The colors of the section. |
| Top padding, Bottom padding | Space above and below the section. |
Blocks:
| Block | What it does |
|---|---|
| Specifications | The full spec table from the specs metafield. Shows a “Specs coming soon” message when a product has no specs. Setting: Heading. |
| Vehicle fitment table | Lists every vehicle from the product's fitment data. Consecutive years of the same vehicle are merged into one row, for example 2018-2021. The shopper's vehicle moves to the top and is highlighted. An Engine column shows when any line names an engine. Hidden when the product has no fitment data. Setting: Rows before Show all. |
| Install information | Install difficulty, time, tools, what is in the box, and a guide link. See below. |
| Custom content | Your own content with a Heading, Custom Liquid, an Anchor name and an optional Link label in section links bar. Good for a reviews or questions app widget. |
| App blocks | Blocks from your installed apps. |
Install information
This block is hidden until you fill in Difficulty from 1 to 5, Tools or In the box.
| Setting | What it does |
|---|---|
| Difficulty from 1 to 5 | Shows a 5-step meter. Connect a product metafield to set it on each product. |
| Time and setup | For example “About 3 hours, two people”. |
| Tools | Separate tools with commas. |
| In the box | What comes in the box. |
| Install guide link, Install guide link label | A link to your install guide, for example a PDF or blog post. |
These settings apply to every product that uses the template. To show different install details on each product, create product metafields and connect them to the settings with the dynamic source button (the database icon next to each setting).
Related products section
Shows products related to the one on the page. Change them in the Search & Discovery app. Settings: Heading, Maximum products, Columns on desktop, Color scheme and padding.
Gift cards
Datum includes a gift card product template, product.gift-card. It leaves out the fit panel, compare, specs and fitment content, which do not apply to gift cards.
- In your Shopify admin, open your gift card product.
- Under Theme template, choose gift-card.
- Save.
Keep Show gift card recipient form on in the Buy buttons block to let shoppers send the gift card to someone else. The page customers see after they receive a gift card is styled by the theme too.