Variant picker

Setting	Description
Bottom space	You can adjust space after “Variant picker” block using this option: None Small Medium Large
Label weight	Control the font weight of option labels to match your store's design. Available styles: Normal – Regular font weight (400px). Suitable for minimal or subtle designs. Medium – Slightly heavier than normal (500px). A balanced option for better readability. Semibold – Noticeably bolder (600px). Ideal for emphasizing option labels without overpowering other elements. Bold – Strong and prominent (700px). Best for high-contrast or bold design aesthetics.
Style	Choose how product variants (e.g., size, color, material, design…) are displayed on the product detail page. Dropdown: A simple dropdown menu for selecting variants. Pills: Button-like options for a clean and interactive style.
Variant item font weight	Control the font weight of variant items to match your store’s design. Available styles: Normal – Regular font weight (400px). Suitable for minimal or subtle designs. Medium – Slightly heavier than normal (500px). A balanced option for better readability. Semibold – Noticeably bolder (600px). Ideal for emphasizing option labels without overpowering other elements. Bold – Strong and prominent (700px). Best for high-contrast or bold design aesthetics.
Show borders	Slide the toggle to the right to add top and bottom lines separating options from other blocks and content.
Use custom styles	This option allows you to set a custom background color for variant items. Leave this option disabled if the default background color from your store’s color scheme meets your design needs.
Custom background color	Select a color from the palette to use as the background for variant options.
Custom border color	Customize the border color of variant option items to better match your store’s design. Note: This option only applies to the "Dropdown" style.

Color swatch

Setting	Description
Type	Select how color variants are displayed on the product detail page. Dropdown: A simple dropdown menu for selecting color variants. Pills: Button-like options for a clean and interactive style.
Swatch	Visual representations of variants, like colors or patterns. Circle: Rounded swatches Square: Boxed swatches None: No specific shape; uses the default display: dropdown or pills.
Enable custom swatch size	Overrides the default swatch size with the custom sizes below. Disabled by default. Only available when Type is Pills and Swatch is not set to None.
Custom swatch size	Sets the swatch size on desktop. Range: 20–80px, step 1px (default: 24px). Only available when Enable custom swatch size is on (and the same Type/Swatch conditions as above).
Custom swatch size mobile	Sets the swatch size on mobile. Range: 20–80px, step 1px (default: 44px). Only available when Enable custom swatch size is on (and the same Type/Swatch conditions as above).