SScale Themedocs
FR

The 5 picker types for product variants: Radio, Swatch, Button, Dropdown, and Image. Configuration and customization.

Variant Options

The Variant Option block in Scale Theme offers 5 different picker types to display your product variant options (size, color, material...). Each type is fully configurable to fit your catalog.

The 5 picker types

TypeDescriptionBest for
RadioClassic radio buttons with text labelText-based options (size S/M/L/XL)
SwatchColor or pattern swatchesColor options
ButtonRectangular buttons with textMixed options (size, material)
DropdownDropdown menuNumerous options (20+), saves space
ImageImage thumbnailsVisual options (pattern, model, style)

Radio

The Radio picker displays each option as a radio button with a text label. It is the simplest and most compact mode.

SettingDescriptionOptions
LayoutOption arrangementHorizontal / Vertical
Show availabilityGray out sold-out optionsYes / No

Swatch (Color)

The Swatch picker displays colored circles for color options. The color is automatically detected from the option name or can be set via a metafield.

SettingDescriptionOptions
SizeSwatch dimensionsSmall (24px) / Medium (32px) / Large (40px)
ShapeSwatch shapeCircle / Square / Rounded
BorderBorder around swatchesYes / No
CheckSelection indicatorCheck / Thick border / None
TooltipHover tooltipColor name
Color sourceColor originAuto-detection / Metafield / Image

Automatic color detection

Scale Theme automatically detects the color from the option name in both French and English:

Option nameDetected color
Noir / Black#000000
Blanc / White#FFFFFF
Rouge / Red#E53E3E
Bleu / Blue#3182CE
Vert / Green#38A169
Rose / Pink#ED64A6
Gris / Gray#A0AEC0
...+ 30 colors
💡If a color is not automatically detected, use a color metafield on the variant or option to define the exact hex value.

Swatch with image

In addition to solid colors, swatches can display a thumbnail image (pattern, texture, fabric). Configure this via variant metafields or theme files.

Button

The Button picker displays each option as a rectangular button with text. More visible than radios, ideal for sizes or materials.

SettingDescriptionOptions
StyleButton appearanceOutline / Filled / Minimal
WidthButton widthAuto / Equal / Full width
Show availabilityStrike through sold-out optionsYes / No
Sold-out styleSold-out option appearanceStrikethrough / Grayed out / Hidden

The Dropdown picker displays options in a dropdown menu. Especially useful when the option has many values or space is limited.

SettingDescriptionOptions
PlaceholderDefault textFree text ("Choose a size")
Show availabilityIndicate sold-out optionsYes / No
SearchFilter options (for long lists)Yes / No

Image

The Image picker displays a thumbnail for each option. Ideal for visually showing the differences between variants (models, patterned colors, configurations).

SettingDescriptionOptions
Image sourceImage originVariant image / Metafield / Custom
RatioThumbnail proportionsSquare / Portrait / Landscape
SizeThumbnail dimensionsSmall / Medium / Large
Selection borderSelection styleBorder / Shadow / Opacity

Configuration per option

You can configure a different picker type per product option. For example:

OptionRecommended type
ColorSwatch
SizeButton or Dropdown
MaterialButton
ModelImage
StyleRadio or Image

Source: auto-detection or custom name

The Variant Option block automatically detects the option type based on the Shopify option name:

Detected namesDefault type
Color, Colour, CouleurSwatch
Size, TailleButton
Material, MatiereButton
Style, ModelRadio
Any other nameDropdown

Custom option name

If auto-detection doesn't work for you, you can force the mapping:

SettingDescription
Option nameThe exact Shopify option name (e.g., "Color", "Shoe size")
Forced typeThe picker type to use
ℹ️The "Auto" source works in the vast majority of cases. Only use a custom name if your options have non-standard names (e.g., "Colorway" instead of "Color").

Best practices

  1. Colors: Always use Swatches for color options. Text labels are less effective than visual color chips
  2. Sizes: Buttons are preferred over Dropdown for fewer than 8 options. Beyond that, Dropdown saves space
  3. Sold-out options: Always display sold-out options as grayed out rather than hiding them. The customer should see all available options
  4. Mobile: Swatches and Buttons automatically wrap on mobile. Make sure labels are not truncated
⚠️Avoid mixing too many picker types on the same product. Two different types (e.g., Swatch for color + Button for size) is the recommended maximum to keep a clean interface.
PreviousProduct BlocksNextSticky Add to Cart