Variant Picker Block
The Variant picker block lets customers choose product options such as color, size, fit, length, or material. It appears in product forms, including the Product template and Featured product section.
Use Variant Pickers and Swatches when you need the full setup workflow across Shopify product data, global Variant picker styling, global Swatches behavior, product-card swatches, and Product page picker verification.
Setup Order
- Prepare product optionsIn Shopify Admin, confirm each product has the option names and variants you expect customers to choose.
- Open the product surfaceIn the theme editor, open the Product template or Featured product section that contains the product form.
- Select the picker modeChoose the Variant picker block and set the visual style: underline, buttons, or dropdowns.
- Review swatchesIf option values use color or image swatches, confirm global Swatches settings and the block-specific underline swatch controls.
- Test purchase statesSelect available, unavailable, sale, and sold-out variants where those states exist, then confirm price, media, and buttons update.
Where It Appears
| Surface | Use |
|---|---|
| Product template | Primary product purchase flow. |
| Featured product | Addable product form on editorial or campaign pages. |
| Quick add modal | Used indirectly when a product card needs variant selection before adding to cart. |
Key Settings
| Setting group | What to use it for |
|---|---|
| Style | Choose underline, button, or dropdown presentation for option values. |
| Mobile style | Keep a compact mobile picker when desktop uses a wider layout. |
| Hide labels | Visually hide option labels such as Color or Size while keeping them available to assistive technology. |
| Option name label typography | Adjust the labels that identify each product option. |
| Text option style | Change text option button sizing when size, fit, or length values need more room. |
| Underline style | Adjust selected underline color, thickness, offset, and swatch sizing in underline mode. |
| Dropdown appearance | Override dropdown background, border, text color, height, and radius when the inherited global dropdown style is not enough. |
| Padding | Space the picker relative to title, price, quantity, and buy buttons. |
Product Data Checklist
| Data | Why it matters |
|---|---|
| Option names | Drives visible labels such as Color, Size, or Waist. |
| Option values | Drives buttons, dropdown choices, and swatch labels. |
| Variant availability | Controls disabled and sold-out states. |
| Variant media | Updates product media when a selected variant has specific media. |
| Swatch colors or images | Powers visual swatches where Shopify product data supports them. |
QA Checklist
| State | What to confirm |
|---|---|
| Default variant | The first selected option state matches the shown price, media, and availability. |
| Variant link | A URL with a selected variant opens with that variant reflected in the picker. |
| Unavailable combination | The customer can see the requested option state but cannot add an unavailable variant to cart. |
| Sold out value | Sold-out indicators match global Swatches settings. |
| Dropdown mode | Dropdown text, border, and background remain legible on desktop and mobile. |
| Long option values | Values such as Extra long inseam or Limited edition color do not overflow. |