Add to Bundle Button
Overview
The Add to Bundle Button controls the styling, behavior, and placement of the button used to add products to the bundle.
It is the primary interaction element for product selection.
Purpose
- Enable users to add products to the bundle
- Provide a clear call-to-action
- Control how variant selection is handled
- Customize button placement and appearance
Smart Variant Selection
Controls how products with variants are handled when adding to the bundle.
Behavior:
- Enabled →
- Single-variant products are added directly
- Multi-variant products open Quick View for selection
- Hides the separate Quick View button on product images
- Disabled →
- Standard behavior applies (manual variant selection required)
Styling Controls
Colors
Controls button appearance for different states:
- Default
- Hover
- Out of Stock
Includes:
- Background color
- Text color
Text & Position
Position
Defines where the button appears on the product card.
Options:
- Bottom of card → Button appears below product content
- Hover on image → Button appears when hovering over product image
- Show on image → Button is always visible on the image
- Custom position → Allows manual placement
Typography
Controls button text styling:
- Font family
- Font size
- Font weight
Responsive Control
- Separate settings available for Desktop and Mobile
- Allows optimized positioning and sizing per device
Behavior
- Clicking the button adds the product to the bundle
- May trigger Quick View for variant selection
- Updates instantly reflect in:
- Bundle Box
- Progress system
Best Practices
- Use Bottom of card for clear visibility
- Use Hover on image for cleaner UI
- Enable Smart Variant Selection for better UX
- Ensure strong contrast for button visibility
- Optimize placement for mobile usability
Summary
The Add to Bundle Button controls:
- Button styling and states
- Variant selection behavior
- Button positioning on product cards
It plays a key role in driving user interaction and improving conversion.
