Product Options
Overview
The Product Options section controls how variant options (such as size, color, etc.) are displayed and styled inside product cards.
It allows you to customize the display type, images, layout, and interaction states of option selectors for a better user experience.
Variant Option Style
Defines how options are presented.
Available Types:
- Buttons (Swatches) → Clickable option buttons
- Dropdown → Options shown in a dropdown list
- Color / Image Swatch → Visual swatches using color or images
Label Styling
Controls the appearance of option labels.
Includes:
- Font family
- Font weight
- Text transform
Button Swatches
Applies when Buttons (Swatches) is selected.
Controls:
- Border style
- Font family
- Font weight
- Disabled opacity
Color / Image Swatch
Applies when Color / Image Swatch is selected.
Controls:
- Border style
- Disabled opacity
Option Images
Controls image-based option display.
Show Images with Options
Enables images to be displayed alongside option values.
Image Source
Defines where option images are taken from:
- Variant Images → Uses images assigned to product variants
- Custom Metafield Images → Uses images from custom metafields
Behavior:
- Variant Images automatically map to options
- Custom Metafield Images allow custom visual control
Additional Option Visibility
- Show image in Option 2 → Enables images for second option group
- Show image in Option 3 → Enables images for third option group
Image Position
Defines placement of image relative to text (e.g., above text).
Object Fit
Controls how images fit inside their container.
Border Color
Defines border styling for option images.
States (Default / Hover / Selected)
Controls styling for interaction states:
- Background color
- Text color
- Visual feedback on selection
General Settings
Controls spacing and typography.
Includes:
- Option margin bottom
- Label font size
- Letter spacing
- Label margin bottom
Button Swatches Layout
Controls layout and spacing of button-based options.
Includes:
- Button group gap
- Horizontal padding
- Vertical padding
- Font size
Responsive Control
- Separate settings available for Desktop and Mobile
- Ensures proper layout and usability across devices
Behavior
- Option selection updates product state instantly
- Disabled options appear with reduced opacity
- Selected option is clearly highlighted
Best Practices
- Use Buttons for simple options (e.g., size)
- Use Color/Image Swatches for visual options (e.g., colors)
- Use Variant Images for automatic setups
- Use Custom Metafield Images for advanced customization
- Ensure clear distinction between default, hover, and selected states
- Optimize spacing and size for mobile
Summary
The Product Options section provides full control over how variant selections are displayed, including:
- Display type (buttons, dropdown, swatches)
- Image-based options
- Layout and spacing
- Interaction states
It ensures a clear, interactive, and visually consistent option selection experience within the bundle.
