Material guide

Two parts, with two different jobs:

• the Material card on the product page shows the material or finish the customer has just selected;
• the Material comparison section puts every material you sell in one table, so the choice is made before the question is asked.

Both are built from blocks, not from metafields. A shop sells the same three to five materials across its whole catalogue, so the material data belongs to the template: it is editable in the theme editor, previewable, translatable, and it does not ask you to write JSON into a metafield. The price of that decision: you enter each material twice — once for the product card, once for the comparison table. Two places, two purposes.

---

The Material card on the product page

Setting it up

1. Add block → Material card where you want the card to appear — usually under the variant picker.
2. Add block → Material once per material or finish you sell. These blocks hold the data; where they sit in the block list does not matter.
3. In each Material block, set Option value to the variant option value it describes.

Material card settings

Setting	Notes
Heading	Default “Material”.
Link label	For example a page comparing all your materials.
Link

Material block settings

Setting	Notes
Option value	The variant option value this material belongs to — Matte, Oak, Brass, Linen. Matched on any option, whatever that option is called.
Name	Shown on the card. Defaults to the option value.
Image	A close-up of the material. Square works best.
Description	How it looks and feels.
Key facts	One per line: label, then value — Outdoor use: Yes.

How the matching works

When the customer changes variant, the card looks for a Material block that matches, in this order:

1. the option value, exactly — “Matte” matches the option value Matte;
2. the option value, contained — “Oak” matches “Oak, light”;
3. the variant title.

No match, no card: the block renders nothing rather than an empty frame. So a product whose options are Small / Medium / Large shows no material card even with the blocks present, and that is correct.

Because matching is on any option, it does not matter whether you called the option Material, Finish, Wood or Colour.

The swap happens without a page load and without a request to the server: every material’s card is rendered once, hidden, and the right one is shown when the variant changes.

---

The Material comparison section

One table. Rows are named once at section level; each material answers them in the same order.

Section settings

Setting	Notes
Color scheme
Subheading, Heading	Default heading: “Which material should I pick?”
Rows	One row per line, in the order you want them. Each material answers them in the same order.
Note	A line under the table — for example where the numbers come from.
Link label / Link / Link style

Material blocks

Setting	Notes
Name
Image	A close-up of the material. Square works best.
Short description
Answers	One per line, in the same order as the rows above. An empty line shows a dash.

Why rows are defined once

Each row has a single spelling, at section level, and each material gives its answers in that order. Writing Outdoor use: no inside every material would mean the first typo breaks the table’s alignment. It also means a material can skip an answer — leave that line empty and the cell shows a dash.

Answers are free text, in your own words, in your own language. There is no yes/no tick, because a tick only works in one language and hides nuance (“not in direct sun” is not “no”).

Example

Rows:

Strength
Outdoor use
Dishwasher safe
Feel

PLA — Answers:

Medium
Not recommended
No
Soft matte

PETG — Answers:

High
Yes, UV-stable
Top rack
Smooth, slight sheen

Up to five materials. On a phone the table scrolls sideways with the row labels pinned, because the point of a comparison is to read along a row.

---

Tips

• Three to five materials is the useful range. Beyond that the table stops being a decision aid.
• Answer in the same unit and the same register in every column — “High / Medium / Low”, not “High” in one and “about 45 MPa” in the next.
• Say what the material cannot do. The comparison is believable because it has a “no” in it, and it saves you the return.
• Photograph all the materials in the same light, close up, at the same distance. A material swatch set that was not shot together looks like clip art.