Layout Options

Rubik Combined Listings supports two layout types for image and button swatches: Grid and Carousel.

Grid layout

• Built with CSS Grid and auto-fill columns
• Adjustable gap, alignment, and inner padding
• Supports “Limit to one row” and “Max visible” controls
• Displays a “+N more” overflow indicator when swatches are hidden

Grid layout is ideal for structured, multi-row swatch displays on product pages.

Carousel layout

• Powered by a namespaced Swiper instance (RubikSwiper)
• Auto slide width based on swatch size
• Optional navigation arrows
• Adjustable arrow size, roundness, blur, and color
• Each category renders as a separate carousel
• Navigation is hidden automatically when all items fit

Carousel layout works well for horizontal scrolling swatches on product pages and product cards, especially when there are many options.

Updated on: 18/02/2026