Skip to main content
Podifai offers several layout options for how option values (swatches, badges, etc.) are displayed within each option group.

​
Swatch Layout

For Image Swatch and Color Swatch options, you can control how swatches are arranged:

​
Grid Layout

Swatches display in a responsive grid that wraps based on available space. This is the default and works well for most cases.
  • Best for 4–12 swatches
  • Automatically adapts to mobile screens

​
List Layout

Swatches stack vertically with labels beside each one. Good for options where each value has a description or long label.
  • Best when swatch labels are important
  • More vertical space used

​
Swatch Sizing

SizeDimensionsBest For
Small32×32pxColor swatches, compact layouts
Medium48×48pxDefault, works for most cases
Large64×64pxImage swatches with detail
Adjust swatch sizes in the option settings, or use Custom CSS for precise control.

​
Option Group Spacing

The spacing between option groups is managed automatically to match your theme. For custom spacing, use CSS: 
.podifai-option-group {
  margin-bottom: 24px; /* Adjust as needed */
}

​
Mobile Responsiveness

All layouts are responsive by default:
  • Grid layouts wrap to fewer columns on narrow screens
  • Swatch sizes remain touch-friendly (minimum 44×44px tap target)
  • Accordion mode is recommended for mobile-heavy stores with many options

​
See Also