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.
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us