Variant pickers and swatches

The theme shows variant options in two places. The Variant picker block lets a shopper choose options (size, flavor, format) on the product page. The Swatches block shows the same choices as small tiles on product cards in listings. This article covers both. For how blocks fit inside a section, see Sections, blocks, and groups.

Variant picker (product page)

The Variant picker block adds the option selector inside the product details on a product page. It reads its options from the product it sits in, so you do not pick a product for it. The block is added from Add block under the Products group.

Add the block

Open the theme editor and go to a product page template.
In Product information, expand Details.
Click Add block, then choose Variant picker from the Products group.
Drag the block to where you want the option selector to appear in the section's blocks.

Settings

Style: how options render. Pills (the default) shows each value as a tappable button. Dropdowns shows each option as a select menu. This applies to every option that is not shown as a swatch.
Use image swatches: when an option carries swatch images set in your Shopify admin, that option renders as visual swatches instead of pills or a dropdown. On by default. Turn it off to keep every option as plain pills or dropdowns. When it is on, a swatch option stays a swatch even if Style is set to Pills or Dropdowns.
Variant option name: the name of the option that gets the note below it, and where a pop-up trigger appears (a sizing guide, for example). Type the exact option name as it exists on the product. Prefilled with Size.
Variant option note: short text shown under the option named above. Use it for guidance like storage, serving, or how the sizes compare. Italic and bold are supported.

Add a pop-up link

The Variant picker block accepts an Inline pop-up child block. Its trigger renders in the heading of the option you named in Variant option name, and nowhere else. To use it, select Variant picker, click Add block, and choose Inline pop-up. Set its Link label, then put the content inside the Pop-up dialog block nested under it. For a full measurements guide (a table with a unit toggle) built this way, see Add a size chart.

This block also uses the standard Margin controls. See Common section settings.

Swatches (product cards)

The Swatches block adds a row of swatches to a product card in listings, so a shopper can see the choices without opening the product. It belongs to the product card and uses the card's own product, so there is no product to pick. It shows one option only: the first product option whose values carry native Shopify swatches. If no option has swatches, the block renders nothing.

Find the block

The Swatches block lives inside the product card. To reach its settings, open a section that shows product cards (a collection or a featured product grid, for example), open the card's blocks, and select Swatches.

Display

Show variant image: shows the variant photo on each swatch instead of the swatch color or pattern. Off by default.
Swap card image on swatch hover: hovering a swatch swaps the card's main image to that variant's image. On by default.

This block also uses the standard Margin controls. See Common section settings.

If swatches do not appear

Use image swatches and the Swatches block both rely on swatches you set up in Shopify admin, on the product option values. If swatches do not appear, confirm the option has color or image swatches assigned there first.
The Swatches block reads the first option with swatches, so if a product has two swatched options only the first one shows on the card. Order the product's options in the admin to control which that is.
For the Variant option note and the pop-up link to attach, Variant option name must match the product's option name exactly.