How to use variant picker in Website Builder
This article will show you how to customize the design of Variant Picker in Website Builder.
A. Add product variants
B. Customize variant picker in Website Builder
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.
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).
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.
Image preview: You can display product variants as images, instead of text. There are 3 options: None, Image only or 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).
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
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).
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.
Image preview: You can display product variants as images, instead of text. There are 3 options: None, Image only or 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).
2.2. Commons
You can customize other commons settings. Please visit this article to learn more about how to customize common settings.
Related articles
Launch a web page using Website Builder
Customize your product detail
Updated on: 06/07/2023
Thank you!