Product Variant Options

The picker for products whose options don’t fit the pack cards. It renders every option the product has — Size, Flavour, Species, whatever they’re called in Shopify — and switches the variant when a customer chooses.

There are three layouts, and which one an option uses is set on the product, not in this block. See Choosing a layout below.

Add it inside Product Main. On the pack-size products use Product Pack Selector instead.

Settings

Setting	What it does
Block ID	Optional anchor, so a link elsewhere can jump to this block.

That’s the whole list. Everything else about this block — the option names, the values, the layout, the images — comes from the product.

When it appears

The block renders nothing when the product has no options, or has only one variant. A single-variant product needs no picker, so none is shown.

Choosing a layout

Each option is drawn in one of three ways, decided by a metafield on the product:

Metafield	Value	Result
custom.option_1_layout	Swatches	Image tiles, first option only
custom.option_1_layout	Dropdown	A <select> menu
(anything else, or empty)	—	Pills — the default

The metafield is numbered to match the option position, so the second option uses custom.option_2_layout, the third custom.option_3_layout, and so on. Each option can use a different layout.

Swatches only work on the first option

Swatches is honoured only for option 1. Setting option_2_layout to Swatches falls through to pills. If the option you want as swatches isn’t first, reorder the options on the product in Shopify admin.

Pills (default)

Rectangular outlined buttons showing the option value. The selected one fills solid black. Unavailable values are dimmed and struck through. This is what you get with no metafield set, and it’s the right choice for most options.

Dropdown

A standard select menu. Unavailable values are disabled and labelled “– Sold Out”. Worth using when an option has more values than will fit in a tidy row of pills.

Swatches

Square image tiles with the value name underneath. The images and the extra copy come from a Species metaobject list on the product (custom.species), matched to option values by title:

• Image — the species’ image. A value with no matching species entry renders an empty tile, so every value needs one.
• Badge — if a species has a tag, it appears as a small badge floating above its tile.
• A value literally named None is treated as a “no selection” tile.

The swatch layout also prints a fixed line of helper copy — “Choose your preferred option from the available variants” — and a “Which one is right for me?” link. Neither is editable in the customizer.

“Which one is right for me?” doesn’t go anywhere yet

That link is rendered with a placeholder destination. It looks clickable to customers but does nothing. If a product is going live with swatches, flag it — the link needs a real target adding in the theme code before launch.

What happens on selection

Choosing a value updates the whole buy column at once: the price, the subscription options, the gallery, the stock message and the Add to Cart button all follow the newly selected variant. There is nothing to wire up — every other product block listens for the change.

Tips

• Name your options for customers. The option name is printed as the heading above the values exactly as it appears in Shopify admin, so “Size” reads better than “opt1”.
• Set the layout metafield before launch, not after. With no metafield the option silently renders as pills — which looks intentional, so a missing swatch configuration is easy to ship by accident.
• Every swatch value needs a species entry. A value with no match renders as a blank tile with just its label. If one swatch looks empty, that’s the reason.
• Check the sold-out styling. Pills strike through, dropdown options say “Sold Out”, swatches dim. Preview a product with at least one unavailable combination.
• Don’t add this alongside the pack selector on the same product. Both hide themselves when they don’t apply, so nothing breaks — but on a product where both apply you’d get two pickers for the same option.