• Customize Swatches Modal

  General Section Defines the fundamental behavior and layout of swatches. Size & Style (Image Swatch) Controls the visual dimensions and layout of image-style swatches.Featured

• 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)Few readers

• Import/Export Settings

  You can reuse or transfer visual settings between product groups using the built-in import and export tools. Export Exports all visual settings as a JSON file and copies it to your clipboard. Import modal Placeholder example: "version": 1, "type": "rubik-combined-listings-visual-settings", ... The system validates required variant keys before applying settings. Older exports remain compatible with newer versions. Any missing properties automatically fall back to default valuesFew readers

• Swatch Types

  The app supports three different swatch display types. You can choose the most suitable one per context in Visual Settings.Few readers

• CSS Variables Reference

  Rubik Combined Listings exposes 70+ CSS custom properties, allowing advanced styling control without editing theme files. These variables can be overridden via the Custom CSS section using the :host syntax. Below are the main variable groups: Visual swatch variables Control size, borders, shadows, typography, and active states. Examples: --rcl-swatch-width --rcl-swatch-border-radius --rcl-swatch-border-width --rcl-swatch-border-color --rcl-swatch-active-border-color --rcFew readers

• Style Presets

  The Style Presets modal helps you quickly apply ready-made swatch designs without adjusting every setting manually. At the top, you can select the image source (same options as in Image Source settings). Each preset card includes a live preview and a Select / Selected button. Presets are separated by context: Product page presets Square polaroid Square swatches Circle swatches Rounded swatches Rounded polaroid Pills with images Small circle swatches (one row)Few readers

• Visual Settings Actions

  On the edit page, the Visual settings sidebar includes quick access actions to manage and reuse your swatch design:Few readers