Variant picker (Options)

Render and select variant options. Color and size detection is automatic — the theme matches option names to your configured language list (Theme settings → Product → Variant option name matching).

Auto-detection

Option names matching the Color option names list (default: color, colour, renk, couleur, farbe, …) render with the Color display style. Option names matching the Size option names list render with the Size display style. Anything else uses the Other display style.

Edit those lists in Theme settings → Product if you use a custom term (e.g., "Material" → add material to color names if you want swatch-style display).

Color display style

Style	Visual
variant_image	Swatch tiles using the variant's featured image
circle_swatch	Circular swatches with swatch.color or value handle as background
square_swatch	Square swatches
button	Plain text buttons
dropdown	Native select

Most editorial brands use variant_image — the swatch IS the photo, which doubles as a tiny gallery thumbnail.

Size display style

Style	Visual
button (default)	Square buttons (S / M / L / XL or 28 / 30 / 32)
dropdown	Native select
checkbox	Checkbox list

Sizes always show "out of stock" with a strikethrough — picking an unavailable variant is allowed in dropdown but disabled in button mode.

Other display style

For options like Material, Style, Edition. Choose button or dropdown.

Out-of-stock handling

• Button / swatch styles — sold-out variants show a strikethrough overlay; can still be clicked (so the price/badge updates and customer sees they're unavailable)
• Dropdown — sold-out options have — Sold out appended and are disabled (can't be selected)

Color family fallback

If a product has no color option but is linked to other "color sibling" products via the custom.color_family metafield, those siblings render as additional swatches that link to each sibling product. See Color family.

Size guide

Customize → block setting Size guide page — pick a Page from your shop. A "Size guide" link appears in the size option header.

Setting	Notes
Size guide style	ruler icon / hanger icon / text-only
Size guide page	Picker — content rendered as a side drawer

The guide opens as a slide-out drawer on click; doesn't navigate away.