How to customize Variant picker block in Website Builder

The variant picker on an e-commerce website plays a key role in enhancing the customer shopping experience by allowing shoppers to seamlessly view and select different versions of a product, such as its size, color, material, or other attributes.

This article will show you how to customize the design of Variant Picker in Website Builder.

A. Add a Variant picker block

On admin dashboard, go to Online Store > Design > Customize.

To add a new Variant picker block to your web page, from the Website Builder, open the Insert panel and drag your block into the desired position. Then, you can freely customize the Content and Design of each block in Website Builder.

B. Customize the content tab of Variant picker block

Select the Variant picker block > Content tab.

Data source: In default, The data source of variant picker will be the data source of the section. Once you change the variant picker's source into another product that is different from section's one, section's source will be updated as same as variant picker's source.

C. Customize the design tab of Variant picker block

Select the Variant picker block > Design tab.

Variant section:

Variant type: You can choose Button (Variants are displayed as buttons), or Dropdown (Variants are displayed as a dropdown list).

Option layout: Select the style of the variant option picker that is displayed on the product page. There are three different styles to choose from:

Text only: This style is the simplest, focusing solely on the text to present variant options available.

Enable slider: If you have numerous text-based options, you should activate a slider for smooth navigation.

Slider arrow: Arrows can be added to navigate the slider if the Enable Slider option is active.

Text & thumbnail: In this style, alongside the text, thumbnails of the variant options are displayed.

Use actual color: This allows you to preview the color variant options in their actual colors rather than just text or generic images.

When the Option's name includes any of these four words: Color, Colors, Colour, or Colours, the corresponding thumbnail will display the actual color if all color names are included in the color list.

Enable slider: Choose whether the thumbnails Images, Colors, or Text will be displayed in a slider form for easier browsing.

Enable a slider for easier browsing in mobile device

Slider arrow: Arrows for navigating the slider are applicable if enabled.

Thumbnail only: For a more visual approach, this style exclusively uses thumbnail images to represent the variants.

Use actual color: This allows for actual color representation in the thumbnails for color variants.

When the Option's name includes any of these four words: Color, Colors, Colour, or Colours, the corresponding thumbnail will display the actual color if all color names are included in the color list.

Image ratio: Set the image ratio of the thumbnails to Square (1:1), Portrait (3:4), or Landscape (16:9) according to the visual appeal or consistency you desire.

Enable slider: A slider can be implemented for Images, Colors or Text navigation if you have multiple thumbnails.

Slider arrow: The use of arrows for slider navigation is viable here as well.

Show option in: To enhance the user experience, particularly for products with a large number of variant options, it is recommended to set a default limit for the displayed variants. This is effective when you're not utilizing a slider to show options. There are six display configurations available: 1 row, 2 rows, 3 rows, 4 rows, 5 rows, Show all.

Shape: You can customize the shape of variant values as Rectangle, Rounded, or Pill.

Label color: You can customize the text color of the option name.

Image thumbnails will only display if all variants have images, and each variant in different groups must have a unique image. Only variants in the option which assigned to the group can display image thumbnails. To enable variant group swatches, you can refer to this article.

Common section:

You can customize other common settings. Please visit this article to learn more about how to customize common settings.

Launch a web page using Website Builder

Get started with Website Builder

Set up sections on Website Builder