Variant picker

Placement and available controls for the Variant picker block.

Scale Theme · v1.9.3 · 1 min read

Where to find it

Open the parent section and use Add block where this block is offered.

Usage notes

Displays variants from parent product

Edit variant styling in [theme settings](/editor?context=theme&category=variants)

Editor controls

Conditional controls appear after choosing the relevant source, style or option. Saved values may differ from new defaults.

Color source: Theme colors use Color DNA, Color scheme uses a shared Shopify preset, and Custom affects only this block.Options: Theme colors · Color scheme · Custom
Color schemeConditional: Choose an available Shopify color scheme.
Option headingConditional: Choose a local color when the relevant custom source is enabled.
Option textConditional: Choose a local color when the relevant custom source is enabled.
Selected optionConditional: Choose a local color when the relevant custom source is enabled.
Selected option textConditional: Choose a local color when the relevant custom source is enabled.
Option borderConditional: Choose a local color when the relevant custom source is enabled.
Option backgroundConditional: Choose a local color when the relevant custom source is enabled.
Input borderConditional: Choose a local color when the relevant custom source is enabled.
Style: Choose the presentation or source that fits this component.Options: Dropdowns · Buttons · Swatches
Show Selected Value in Label: Enable or disable this option and preview the result.
Selected Value Color: Choose a local color when the relevant custom source is enabled.
Show heading divider: Enable or disable this option and preview the result.
ThicknessConditional: Adjust within the range offered by the theme editor.
StyleConditional: Choose the presentation or source that fits this component.Options: Solid · Dashed · Dotted · Double
Border radiusConditional: Choose the presentation or source that fits this component.Options: Square · Rounded
LengthConditional: Adjust within the range offered by the theme editor.
GapConditional: Adjust within the range offered by the theme editor.
ColorConditional: Choose a local color when the relevant custom source is enabled.
Swatches: Enable or disable this option and preview the result.
Alignment: Use the matching control in the theme editor and preview the component before publishing.
Selected Background: Choose a local color when the relevant custom source is enabled.
Selected Border: Choose a local color when the relevant custom source is enabled.
Selected Text: Choose a local color when the relevant custom source is enabled.
Border Width: Adjust within the range offered by the theme editor.
Border Radius: Adjust within the range offered by the theme editor.
Swatch Size: Adjust within the range offered by the theme editor.
Swatch Border Radius: Adjust within the range offered by the theme editor.
Swatch Border Color: Choose a local color when the relevant custom source is enabled.
Swatch Selected Border Color: Choose a local color when the relevant custom source is enabled.
Swatch Border Width: Adjust within the range offered by the theme editor.
Swatch Gap: Adjust within the range offered by the theme editor.
Top: Adjust within the range offered by the theme editor.
Bottom: Adjust within the range offered by the theme editor.
Left: Adjust within the range offered by the theme editor.
Right: Adjust within the range offered by the theme editor.