Variant Cards

Some products have a “tier” option — like Style (Traditional vs Easy Clean) — where each tier should appear as its own card in the collection grid and its own column in the comparison table, with color swatches underneath. This system makes that work without creating separate products.

Setup

Three metafields on the product control the system, plus two optional variant-level metafields:

Metafield	Type	What to set
`nama.variant_card_group_option`	Text	The option name to split on — e.g. `Style`. Must match a product option name (case-insensitive).
`nama.variant_cards`	List of variant references	One variant per group — pick any variant from each group as the “default” (e.g. White/Traditional and White/Easy Clean).
`nama.variant_display_title`	Text (on the variant)	Optional. Overrides the auto-generated card title for that variant.
`nama.variant_style_description`	Text (on the variant)	Optional. Short description shown on the Style card selector on PDP, quick-add modal, and cart upsell (e.g. “Slower to juice, but easier to clean.”). Set on one variant per style value.
`nama.product_variant_card_image`	File (on the variant)	Optional. Card image override — used in collection grid cards and Style card selectors.

That’s it. Once these are set, the collection grid, comparison table, and product-card blocks automatically expand the product into multiple cards/columns.

What happens

Collection grid

The product appears as N cards instead of one, where N is the number of unique values in the grouping option. Each card:

Title: “Alternate Title - Group Value” (e.g. “Nama J4 Cold Press Juicer - Easy Clean”), or the full variant_display_title if set
Image: The variant’s card image (nama.product_variant_card_image) or featured image
Price: The default variant’s price
Swatches: Color dots for the non-grouping option (e.g. White, Black), filtered to only variants in that group. Clicking a swatch swaps the card image and price without navigation.
URL: Links to the PDP with ?variant=ID pre-selected
Quick add: Opens the quick-add modal with the correct variant pre-selected

Comparison table

The product expands into multiple columns, one per variant group:

Header: Group-specific title and variant price
Spec rows: Same values across all variant columns (specs are product-level)
Footer: PDP variant columns get Add to Cart with the correct variant ID; comparison product columns get “Explore” links
On PDP, the current product is automatically skipped in the comparison products list to avoid duplicate columns

Product card blocks (collection rows, carousels)

The product-card block also supports variant expansion. When a product with nama.variant_cards is added as a product-card block (e.g. in a collection row or carousel section), it automatically expands into multiple cards — one per variant group. This means manually composed grids get the same expansion as the auto-fill collection grid.

Products without variant cards

Nothing changes. Products without the nama.variant_cards metafield render as a single card/column, exactly as before.

How the grouping works

The system splits variant.title (e.g. “White / Traditional”) by / and uses the grouping option’s position to extract the right value. For a product with options Color (position 1) and Style (position 2):

Variant title “White / Traditional” → position 2 → “Traditional”
Variant title “Black / Easy Clean” → position 2 → “Easy Clean”

All variants sharing the same grouping value form one card. The swatch option is whichever option is NOT the grouping option.

Checklist

Product has at least 2 options (e.g. Color + Style)
nama.variant_card_group_option is set to the tier option name (e.g. “Style”)
nama.variant_cards has one variant reference per group (pick any color within each style)
Each variant in variant_cards has a card image set via nama.product_variant_card_image (otherwise the card shows the product’s featured image for all groups)
For Style options: set nama.variant_style_description on one variant per style value (the block reads the first match)
Product is in the collection (for collection grid display)
On PDP, the product is NOT duplicated in its own nama.comparison_products list (it renders automatically as the first column)