Articles on: Website Builder
This article is also available in:

How to use variant picker in Website Builder

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

In this article

A. Add product variants
B. Customize variant picker in Website Builder

A. Add product variants

In Admin dashboard, go to Products > All products and click the desired product you would like to add product variants.

Add product variants: Please visit this article to learn more.

B. Customize variant picker in Website Builder

Content tab

1.1 In Content tab in the section: Choose Product as Data source so that you can customize variant picker.

1.2. In Content tab of Variant picker: Choose Variant picker > Content tab. In default, The data source of variant picker will be the data source of the section. Once you change variant picker's source into other product that is different from section's one, section's source will be updated as same as variant picker's source.

Design tab: This tab has 2 parts: Variant and Common.

2.1. Variant

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

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

Button layout
Dropdown layout
Color preview: You can display color variants instead of text. There are 3 options: None, Color only or Color & Text. If you choose Color only or Color & Text, the Option's name must contains 1 of the 4 following words: Color, Colors, Colour or Colours.

Color only
Color & Text
Image preview: You can display product variants as images, instead of text. There are 3 options: None, Image only or Image & Text.

Image only
Image & Text
If the option variant has both image swatches and color swatches, we will prioritize color swatches. For example: If you choose Color only / Color & text (in Color preview) and Image only / Image & text (in Image preview), we will prioritize Color only or Color & text.

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

Pill shape
Color only is shown, not Image only
2.2. Commons

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

Launch a web page using Website Builder
Customize your product detail

Updated on: 08/03/2024

Was this article helpful?

Share your feedback


Thank you!