Appearance
Comparison Table
A feature comparison grid for comparing products, plans, or options side by side. Helps visitors make informed decisions.
Try it
Change the settings below and watch the preview update in real time. Click Split to see settings and preview side by side, or use the tabs to switch between them.
Storefront preview
Settings
| Setting | What it does |
|---|---|
| Color scheme | Picks which set of colors to use for this section |
| Heading | The title above the table |
| Orientation | Columns (default) builds the side-by-side product comparison from Column blocks. Rows (specs table) builds a single label/value specs list from Spec blocks instead — Column blocks are not used in this mode. |
| Feature header | The label for the feature-name column (e.g., "Feature"). Only shown when Orientation is set to Columns. |
| Enable sortable | Lets visitors sort columns by clicking a column header. Only available when Orientation is set to Columns. |
Column names come from the Column title field on each Column block — see Blocks below.
Blocks
Column
Each column in the comparison table is a Column block. Add one block per product or option.
| Setting | What it does |
|---|---|
| Column title | The name of this column (e.g., the product name) |
| Subtitle | A short description below the title |
| Image | A product or category image for this column |
| CTA label | The button text for this column's call-to-action |
| CTA link | Where the CTA button links to |
| Highlighted | Mark this column as featured or recommended |
| Cell 1 label – Cell 10 label | The feature name for each row (e.g., "Weight", "Material") |
| Cell 1 value – Cell 10 value | The value for this column in each row (e.g., "1.2 kg", "Stainless steel") |
Cell value fields are only shown after their corresponding label is filled in.
The first block owns the row labels
The table's row names come from the Cell labels on the very first block in the section — whatever its type. Every other column contributes only its values; its own cell labels are ignored. If a Spec row block happens to sit in the first slot it has no cell labels to give, so the table comes out with no rows at all.
So keep a Column block first, set the row names once on it, and fill in just the values on the rest. If a row is missing from the table, the cause is almost always an empty Cell n label on that first block: rows without a label there are not rendered at all, for any column.
Spec row
Used only in the Rows (specs table) orientation. Each Spec row block is one row of the specs list: a spec name, a value, and an optional unit.
On mobile
Below 768 px the table doesn't shrink or scroll — it becomes one card per column. Each card repeats its column's name, subtitle, "Recommended" badge, and CTA, and lists that column's specs as label/value pairs.
This matters because a comparison table read on a phone has to stay attributable: every value a shopper sees is next to both the feature it describes and the product it belongs to. (A table stacked row-by-row produces cards whose values no longer name their column — which is the one thing a comparison table cannot afford to lose.)
Nothing to configure: the same blocks render both ways.
Advanced
Niche metafield namespace — an advanced setting that sets the metafield namespace associated with this section. The default (uisce_tine) is the Tine preset's namespace; most stores can leave it as-is. The comparison rows you see come from the Cell label/value fields on each Column block.
Related article — pick a blog post to link from the comparison table, for shoppers who want more guidance. Leave it unset to show no link.
Preset signature — Tine
Comparison table is a Tine signature section. Under Tine it is styled as a forge spec plate: a riveted steel outline, platform names on charcoal plates, values set in tabular monospace like a trade-counter spec sheet, and the Highlighted column heat-marked with the molten seam that runs along its top edge, plus a forge-red "Recommended" stamp. Buttons ignite on hover rather than lifting.
This is purely visual. The section, its settings, and its blocks are identical on every preset — only the skin changes.
Tips
- Highlight your recommended product to guide visitors who feel overwhelmed by options. A "Most Popular" or "Best Value" label goes a long way.
- Keep feature rows to 5–8. More than that and the table becomes hard to scan. Link to individual product pages for full details.
- Put the recommended column first or in the middle — not last. It's the column you want read, and on mobile the columns become cards in block order, so the recommended one should not be the third card down.