Quantity Widget
Overview
The Quantity Widget controls the styling and appearance of quantity selectors used to increase or decrease product quantity within the bundle.
It ensures a clear and user-friendly interaction for managing item quantities.
Purpose
- Allow users to adjust product quantity easily
- Provide clear visual controls for adding/removing items
- Maintain consistent styling across product cards
Scope
Applies to all quantity controls inside product cards, including:
- Increase (+) button
- Decrease (−) button
- Quantity display
Styling Controls
Layout
Controls the structure and alignment of the quantity widget within the product card.
Size & Spacing
- Controls height and width of the widget
- Adjusts spacing between buttons and quantity value
Typography
Controls appearance of quantity text:
- Font size
- Font weight
- Text color
Colors
Controls visual appearance:
- Background color
- Button color
- Text color
- Border color
Border & Radius
- Border style and width
- Corner roundness (border radius)
States
Controls different interaction states:
- Default
- Hover
- Active (when pressed)
- Disabled (when quantity cannot be changed)
Behavior
- Clicking + increases quantity
- Clicking − decreases quantity
- Quantity updates instantly in:
- Product card
- Bundle Box
- Progress system
Responsive Behavior
Desktop
- Full-size controls with clear spacing
Mobile
- Optimized for touch interaction
- Buttons and spacing adjusted for smaller screens
Common Issues to Avoid
- Buttons too small for mobile interaction
- Poor contrast between text and background
- Inconsistent spacing with product card
- Disabled state not clearly visible
Best Practices
- Keep buttons large and clickable
- Maintain clear visual hierarchy
- Ensure strong contrast for readability
- Use consistent spacing with product layout
- Optimize for mobile usability
Summary
The Quantity Widget controls how users interact with product quantities, including:
- Button design
- Layout and spacing
- Typography and colors
- Interaction states
It plays a key role in ensuring a smooth and intuitive product selection experience.
