Variant Picker

Configure Volume variant display: choose from dropdown, pill, color swatch, or variant image styles with two layout options and adjustable input sizes.

The Variant Picker settings in Theme Settings → Variant Picker allow you to customize how product options are displayed. These settings apply to the Product Overview section (Product template), Quick View template, and Featured Product section.

---

Option Display Types

There are four display (UI) types for variant options:

• Dropdown
• Pill
• Color Swatch
• Variant Image

Additionally, there are two layout options:

• Two columns
• In a row

You can also adjust the Input Size with two options: Big or Small.

To apply a specific display type, enter the option name in the Option Label field.

Dropdown

This is the default design when no other display type is selected.

Pills

Applying the Pills display type to an option like Size allows you to choose from four layout variations:

• One-column pills with checkboxes

• Two-column pills with checkboxes

• Pills in a row

• Pills in two columns

Color Swatches

The Color Swatch settings work similarly to Pills, offering three layout options:

• One-column swatches (small)

• Two-column swatches (small)

• Swatches in a row

Additionally, you can adjust the Media Ratio and Corner Radius for Color swatches style.

Variant Image

With this option, the variant image is displayed as a swatch.

In this case, the Layout settings do not apply. Instead, you get advanced controls for adjusting the Image size separately for desktop and mobile, as well as options for Media Ratio and Corner Radius.

To apply different display types to different options, enter multiple option names in the Option Label field, separated by commas.

The shape of input elements can be customized in Theme Settings → Shapes.

---

Linked products

Some of our clients choose to populate color variations as separate products instead of using Variants, as a workaround for Shopify's limitations:

1. Show each color as a separate product on Collection pages.
2. Display only images of the selected color in the product gallery on Product pages.

We've developed the Linked Products feature, which allows linking products and displaying them as a Color swatches block on the Product page in the Product overview section.

In Theme settings → Variant picker → Linked products, you can adjust:

• Image size for desktop and mobile.
• Media ratio
• Focal point
• Corner radius