Variant selector

The Variant Selector block is a crucial tool for products with multiple variants, such as different sizes or colors. It allows customers to select their preferred option before adding the product to their cart. This block can be styled as a dropdown menu or pill-shaped buttons, providing flexibility in how variant options are presented.

Color and image swatches offer visual representations of product variants, enhancing the shopping experience by allowing customers to see their options at a glance. Swatch styles can be customized in shape and column count for both desktop and mobile devices. Additionally, swatch borders can be adjusted to highlight selected options, ensuring clarity and ease of use.

The Variant Selector block is available in the Featured product and Product information sections, making it versatile for various product displays. Usage examples include products with multiple colors or image variants, where swatches can be used to visually guide customer choices. Responsive design considerations ensure that the block functions seamlessly across all devices, enhancing accessibility and user experience.

Overview #

The Variant Selector block is designed to provide an interface for selecting a product's variant options. This block is essential for products with multiple variants, such as different sizes or colors, allowing customers to choose their preferred option before adding the product to their cart.

Key components and functionality #

Variant selector style

The variant selector style setting allows you to choose the style of the variant selector interface. This impacts how customers interact with the product options.

• Dropdown: Displays the variant options in a dropdown menu. Default
• Pills: Displays the variant options as pill-shaped buttons.

Color swatch settings

Color swatches provide a visual representation of the available color variants for a product. This setting includes several options to customize the appearance and functionality of color swatches.

• Show color swatches: Enable or disable the display of color swatches. Default: false
• Swatch style: Choose the shape of the color swatches. Options include:
  • Circle
  • Landscape
  • Portrait
  • Square
  • Widescreen
  • Default: Circle
• Desktop column count: Set the number of swatches displayed per row on desktop devices. Default: 4
• Mobile column count: Set the number of swatches displayed per row on mobile devices. Default: 4
• Option names: Define custom names for the color swatches.

Image swatch settings

Image swatches display a thumbnail image for each variant option, providing a visual cue for selection.

• Show image swatches: Enable or disable the display of image swatches. Default: false
• Swatch style: Choose the shape of the image swatches. Options include:
  • Default
  • Circle
  • Landscape
  • Portrait
  • Square
  • Widescreen
  • Default: Square
• Desktop column count: Set the number of swatches displayed per row on desktop devices. Default: 4
• Mobile column count: Set the number of swatches displayed per row on mobile devices. Default: 4
• Option names: Define custom names for the image swatches.

Swatch border settings

These settings control the appearance of borders around swatches, helping to highlight selected options.

• Show swatch border: Enable or disable the display of borders around swatches. Default: true
• Swatch border color: Set the color of the swatch border.
• Active swatch border color: Set the color of the border for the active (selected) swatch.

Visibility settings

Control the visibility of the variant selector on different devices.

• Visibility: Choose when the variant selector should be hidden. Options include:
  • Do not hide
  • Hide on desktop
  • Hide on mobile
  • Default: Do not hide

Available in sections #

• Featured product
• Product information

Usage notes #

• Ensure that the variant selector is visible and accessible on all devices to enhance the shopping experience.
• Use contrasting colors for swatch borders to make selected options stand out.
• Regularly update the option names for swatches to reflect any changes in product variants.

Usage examples #

1. Product with multiple colors: Use color swatches to allow customers to visually select their preferred color variant. Customize the swatch style and column count to fit your design needs.

2. Product with image variants: Use image swatches to display thumbnails of each variant, such as different patterns or designs. This helps customers make informed decisions based on visual cues.

3. Responsive design: Adjust the column count for swatches on desktop and mobile devices to ensure a seamless shopping experience across all devices.