Introducing the Color Variant Picker! Give your customers a more engaging and interactive way to explore product colors. With our new variant picker element you can create custom color swatches in seconds.
Requirements
Before using the color variant picker, ensure the following:
Requirement | Description |
Color Metafields | Color swatches must be set up in Shopify. Learn more about setting up color metafields |
Product Connection | Your layout must be a product page template or product section connected to a Shopify product |
Buy Button | The connected section should include a buy button for complete functionality |
Important: The color variant picker requires color metafields to be configured in Shopify before the element will function correctly.
Adding a Color Variant Picker
Step 1: Open the Insert Panel
Navigate to the Insert panel in the left sidebar.
Step 2: Find the Color Picker Element
Hover over the Variant header. A popover appears with all variant picker options.
Step 3: Insert the Element
Select Color Picker and drag it onto your canvas. Place it within your product page or section layout.
Note: The color variant picker only functions within a container connected to a Shopify product (e.g., product template or product section).
Configuration
With the color variant picker selected, access settings in the right sidebar.
Option
Select which variant category to display from the dropdown. This will show color options associated with the connected product.
Styling
Customize the appearance of your color swatches under the Style tab.
Available Style Options
Option | Description |
Fill | Background color behind the swatch |
Border | Border style, width, and color |
Radius | Corner roundness (use high values for circular swatches) |
Rotation | Rotate the element |
Shadow | Apply drop shadow effects |
Opacity | Transparency level |
Sizing and Spacing
Option | Description |
Size | Width and height of each swatch |
Spacing | Gap between swatches |
Interaction States
With the color picker selected, navigate to the Interactions tab to define visual states.
State | Description |
Active | Style for the currently selected color |
Disabled | Style for unavailable color options |
Hover | Style when hovering over a color swatch |
Common Active State Styling
To indicate the selected color, consider:
Adding a border
Increasing the scale
Adding a shadow
Changing opacity
Quick Reference
Task | Location |
Insert color picker | Insert panel → Variant → Color Picker |
Set swatch direction | Right sidebar → Direction |
Select variant option | Right sidebar → Option dropdown |
Style swatches | Right sidebar → Style tab |
Adjust swatch size | Right sidebar → Size |
Set spacing | Right sidebar → Spacing |
Define active state | Right sidebar → Interactions → Active |
Define hover state | Right sidebar → Interactions → Hover |
Define disabled state | Right sidebar → Interactions → Disabled |
Setup Checklist
Step | Status |
Color metafields configured in Shopify | Required |
Layout connected to Shopify product | Required |
Buy button included in section | Recommended |
Active state styling defined | Recommended |