Instant provides multiple variant picker elements for building product selection interfaces. This guide covers all available variant pickers, their configuration options, and styling capabilities.
Accessing Variant Pickers
Navigate to the Insert panel in the left sidebar
Hover over the Variant header
A popover appears with all available variant picker elements
Available Variant Pickers
Element | Description |
Basic Variant | Simple button-style variant selector |
Dropdown | Dropdown menu variant selector |
Color Picker | Color swatch variant selector using Shopify metafields |
Custom | Fully customizable variant picker for complex buy boxes |
Selling Plan | Pre-configured custom picker with selling plan selectors |
Important: Variant pickers only function within a container connected to a Shopify product (e.g., product template or product section).
Basic Variant Picker
The basic variant picker displays variant options as buttons placed side by side in a column structure.
Layer Structure
Variant Select (parent layer)
Options (repeated element)
Note: The Options layer is a repeated element—you see one button per variant option on the canvas, but it appears as a single layer in the Layers panel.
Configuration
With the variant picker selected, access settings in the right sidebar:
Setting | Description |
Option | Select which variant category to display (e.g., colors, sizes) |
Styling the Options Layer
Select the Options layer to access styling controls:
Text Settings
Option | Description |
Color | Text color |
Font | Typeface selection |
Weight | Font weight |
Size | Font size |
Style Settings
Option | Description |
Fill | Background color for the button |
Border | Border style and color |
Radius | Corner roundness |
Rotation | Rotate the element |
Shadow | Apply drop shadow |
Opacity | Transparency level |
Interaction States
With the Options layer selected, navigate to the Interactions tab to define:
State | Description |
Active | Style for the currently selected variant |
Disabled | Style for unavailable variants |
Hover | Style when hovering over a variant |
Dropdown Variant Select
The dropdown variant functions the same as the basic variant but displays options in a dropdown menu.
Styling Limitations
You can style the dropdown toggle button
The dropdown menu itself inherits styling from the user's operating system and cannot be customized
Configuration
Same settings as the basic variant picker—select which variant option category to display.
Color Picker Variant
The color picker variant displays color swatches for variant selection.
Important: This element requires color metafields to be set up in Shopify. Configure your color metafields in Shopify before using this element.
Configuration
Setting | Description |
Direction | Column (side by side) or Row (stacked vertically) |
Styling
Option | Description |
Fill | Background color |
Border | Border style and color |
Radius | Corner roundness |
Rotation | Rotate the element |
Shadow | Apply drop shadow |
Opacity | Transparency level |
Spacing | Space between swatches |
Size | Swatch dimensions |
Interaction States
Navigate to the Interactions tab to define:
Disabled state
Hover state
Active state
Custom Variant Picker
The custom variant picker allows you to build complex buy boxes with fully customizable variant options.
Layer Structure
Variant Select (parent layer)
Variant Option (group layer)
Indicator
Product Info
Price
Additional elements
Variant Option (group layer)
...
By default, inserting this element creates two variant option groups.
Customization
Each element within the custom variant picker can be fully styled. Text elements can be connected to Shopify fields:
Variant title
Variant price
Variant description
Other variant-specific data
Configuring Actions
With a variant option selected, navigate to the Interactions tab to define the action:
Select Variant Option Action
Setting | Description |
Option Type | Select the variant category (size, color, etc.) |
Selected Option | Select the specific option value (small, medium, large, etc.) |
Example: To create a "Size: Small" button, set Option Type to "Size" and Selected Option to "Small."
Select Selling Plan Action
Remove the default action and apply Select Selling Plan to create subscription interval selectors.
Setting | Description |
Option | Select which selling plan this option represents |
Set Quantity Action
Remove the default action and apply Set Quantity to create quantity selector buttons.
Setting | Description |
Quantity | Define the quantity this option sets |
Common Use Cases
Use Case | Action Type |
Size/color selection | Select Variant Option |
Subscription intervals | Select Selling Plan |
Quantity bundles | Set Quantity |
Selling Plan Variant
The selling plan variant is a pre-configured custom variant picker specifically designed for subscription products.
Features
Selling plan selectors already embedded within each variant option
Ready to use without additional configuration
Fully stylable like the custom variant picker
Dropdown in Custom Variant
When a dropdown variant is inserted inside a custom variant element connected to a selling plan, additional options become available:
Option | Description |
Selling Plan | Select subscription time intervals from the dropdown |
Quick Reference
Task | Location |
Insert variant picker | Insert panel → Variant → Select type |
Select variant category | Right sidebar → Option dropdown |
Style variant buttons | Select Options layer → Style tab |
Set active state | Select Options layer → Interactions → Active |
Set disabled state | Select Options layer → Interactions → Disabled |
Configure custom action | Select Variant Option → Interactions → Action |
Variant Picker Comparison
Feature | Basic | Dropdown | Color Picker | Custom | Selling Plan |
Button style | ✓ | ✗ | ✓ | ✓ | ✓ |
Dropdown style | ✗ | ✓ | ✗ | ✗ | ✗ |
Color swatches | ✗ | ✗ | ✓ | ✗ | ✗ |
Full customization | Limited | Limited | Limited | ✓ | ✓ |
Selling plan support | ✗ | ✗ | ✗ | ✓ | ✓ |
Quantity actions | ✗ | ✗ | ✗ | ✓ | ✗ |
Requires metafields | ✗ | ✗ | ✓ | ✗ | ✗ |