Product Variant Options

The Product Variant Options block displays a fieldset for each product option and automatically chooses the right UI treatment based on the option name:

• Color — 60×70 image swatches pulled from variant featured images
• Plug Type — 36px circular icon swatches with an optional tooltip
• Style — Stacked cards with a 70×80 product image, title (with price delta), and description
• Everything else — Rounded pill buttons with kale tint on selection

When a product has only one variant, the block renders nothing at all.

Style cards

When a product has an option named “Style”, each value renders as a card showing:

• Image: Card image from nama.product_variant_card_image on the first matching variant, falling back to the variant’s featured image
• Title: The option value name, with a price delta suffix (e.g. “+$85”) when the variant costs more than the cheapest style
• Description: From the nama.variant_style_description metafield on the first matching variant

The same card UI is replicated in the quick-add modal and the cart upsell variant tray.

Settings

This block has no merchant-facing settings beyond the standard Block ID field. All behavior is driven by the product’s option names and values.

Used in

• Product Main

Tips

• The block reads the accentuate.plug_type_tooltip_content metafield and displays it as a hover/click tooltip next to the Plug Type legend.
• If a product has a single plug type value, the option is written as a hidden input so the variant still resolves correctly without showing unnecessary UI.
• Variant changes dispatch variantChange events through the productVariant Alpine store, which other blocks like Product Price and Product Form Submit listen to.
• Selected pill styling uses a kale border with a light kale tint background.
• Style card descriptions should be short (one sentence). Populate them on any one variant per style value — the block reads the first match.