Product Grid
Overview
The Product Grid controls how products are arranged and displayed within the bundle, including layout type, spacing, and alignment.
Product Card Display
Controls how products are presented:
- Grid → Products are displayed in a multi-column grid layout
- Slider → Products are displayed in a scrollable slider
Purpose
Defines the overall structure to ensure products are displayed in a clean, organized, and user-friendly layout.
Controls
- Card Width (Desktop / Tablet / Mobile) → Controls product card size across devices
- Horizontal Gap → Spacing between columns
- Vertical Gap → Spacing between rows
- Alignment → Controls positioning of items
Behavior
- Changes apply instantly in preview
- Affects all product cards consistently
- Works with both grid and slider layouts
Responsive Behavior
- Layout adapts based on selected card width per device
- Grid adjusts columns automatically
- Slider becomes touch-friendly on mobile
Summary
Product Grid defines the layout structure (Grid or Slider) and spacing of product listings, ensuring a responsive and visually consistent product display.
