A Complete Guide to Customizing the Variant Picker

Dive into the world of customizing your Shopify store with our straightforward guide on color swatches. Transform how customers view and select products with a simple addition that not only elevates your store's design but also enhances user experience. Let's unlock the potential of your product pages by integrating this visually impactful feature.

‍

The Different Faces of Swatches

Dropdown (with Option Drawer): Unlike a typical dropdown, this selection expands to reveal a specialized option drawer, offering an enhanced and interactive selection process for customers.
Button Input: Creates a tactile and straightforward experience with clickable buttons, making variant selection both engaging and efficient.
Color Swatches: Adds a splash of visual appeal by showcasing available colors as touchable swatches, simplifying the choice for customers.
Variant Pictures: Replaces text with vivid images for each variant, allowing customers to view actual product variations in a pictorial format.

How to set Dropdown input

Navigate to the 'Customize' section of your Shopify theme and select the 'Product Page' template to begin customizing.
In the 'Sections' tab on the left side of the screen, click on 'Product Information' and then find the 'Variant Picker' option to configure your variant display settings.
On the right side, you will see the configuration options for the 'Variant Picker'. To set all undefined options as a dropdown, click on the 'Dropdown' choice under 'Input Type'. If you want to specify which variants appear as a dropdown, enter the names of these variants into the 'Options listed as Dropdown' text box, making sure to place each variant on a new line.
Once you have configured your options, make sure to click 'Save' to apply the changes to your Shopify store.

How to set Color swatches

Access the 'Customize' section of your Shopify theme and open the 'Product Page' template to start making changes.
In the 'Sections' tab on the left-hand side, click on 'Product Information' and then seek out the 'Variant Picker' configuration.
On the right-hand side, under the 'Variant Picker' settings, you'll find the 'Options listed as Color Swatches' field. Here, input the names of the variants you wish to display as color swatches, placing each variant name on a separate line to ensure they are recognized correctly.
Important: Shopify now provides own color swatches via metafields. If color metafields are defined, the swatches take values from there. Link to Shopify Metafield Documentation. If not set, the Theme settings>Color swatch>Custom colors setting will be used.
After entering the variant names, don't forget to hit 'Save' to preserve your settings and update your store's product page with the new color swatches.

Are you looking to further tailor your color options and images for a truly unique product display? ‍

For a deep dive into creating and customizing multiple color swatches, check out our comprehensive guide: Color swatches article

How to set Variant pictures

Begin by navigating to your Shopify theme's 'Customize' interface and select the 'Product Page' template to modify.
Look for the 'Sections' tab on the left side of the screen, click on 'Product Information,' and then locate the 'Variant Picker' section.
Within the 'Variant Picker' options on the right, locate the 'Options listed as Variant Pictures' field. Enter the names of the variants that you would like to display as pictures, ensuring that each variant name is on its own line.
Once you have listed all the desired variant names, remember to save your changes to implement the variant pictures on your product page.

Back