Comparison Table

A horizontally scrollable table that lines up products in columns with spec rows underneath. On mobile the label column sticks to the left edge while the product columns scroll freely. On PDP only, the first column is highlighted with a grey background (bg-charcoal-100); collection pages have no highlight.

On PDP, the current product’s columns get Add to Cart buttons — multi-variant products open the quick-add modal so users can select options, while single-variant products add directly to cart. Comparison products get “Explore the {name}” links that go to their PDP (with ?variant= when applicable).

Spec rows are driven by metaobjects: each product’s nama.comparison_specs references a list of comparison_row entries, each pointing to a shared comparison_stat label. The section figures out which rows to show based on context — on PDP it uses the current product’s rows; on collections it shows every comparison_stat in the store (sorted by sort_order). A legacy fallback renders hardcoded Best For / Yields / Height rows for products that haven’t been migrated to the dynamic system.

Products with the nama.variant_cards and nama.variant_card_group_option metafields expand into multiple columns — one per unique value of the grouping option (e.g. “Traditional” and “Easy Clean”). See Variant Cards for how to set this up.

The section requires at least two products to render. On PDP, the current product counts as one (or more, if it has variant cards) — so at least one comparison product must be set.

Settings

Setting	What it does
Section ID	Optional anchor for jump links.
Product list	Manual product picker for collection and content pages. On PDP this is ignored — products come from nama.comparison_products. On collections, falls back to nama.collection_comparison_table_products if empty.
Padding top / bottom	Default 48/64/80px each.

There are no display toggles — the table adapts its behaviour entirely based on page context (PDP vs collection vs content page).

Blocks

Static blocks:

• Title — centred heading above the table. On collection pages, overridden by the nama.collection_compare_table_title metafield when set.

Repeatable:

• Rich text, Divider, Buttons, Spacer, Custom HTML, Tag, Trust badges — all render in the header area above the table, useful for adding a subtitle or trust signals.

Variant card expansion

When a product in the comparison table has nama.variant_cards and nama.variant_card_group_option set, it expands into multiple columns:

• Header: Each variant group gets its own column with “Product Name - Group Value” title and the group’s default variant price
• Spec rows: Same spec values duplicated across variant columns (specs are product-level, not variant-specific)
• Footer: PDP variant columns get Add to Cart buttons with the correct variant ID; comparison product columns get “Explore” links

On PDP, the current product is skipped in the comparison products list to avoid rendering it twice. The PDP product renders its own expanded columns first (highlighted), then the remaining comparison products follow.

Variant titles come from the variant title

The grouping option value is parsed from variant.title (e.g. “White / Traditional” split by “ / “). This is more reliable than .option1 or .options[0] on metafield-referenced variants.

Auto-hide on PDP

On product pages, the section does not render if the total product count (including expanded variant columns) is fewer than two. If no comparison products are attached via nama.comparison_products, the section silently disappears.

On collection pages, the same two-product minimum applies — the section hides if the product list resolves to fewer than two items.

Where it’s used

• Product templates (flagship PDP)
• Collection templates
• Any content page with a manual product list

Tips

• Always set comparison products on the product, not the section. Use the nama.comparison_products metafield so the table travels with the product and stays consistent across templates.
• Create comparison_stat entries for every row you want. The label is shared across all products — only the values differ. Missing values show a dash.
• The table scrolls horizontally. Add as many products as needed — the sticky label column stays visible while product columns scroll freely.
• Put the best differentiator in the first row. Most visitors scan top-down and won’t scroll every spec.
• Don’t add the current product to its own comparison list. The PDP already renders it as the first column. If it appears in nama.comparison_products too, it’s automatically skipped.