> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://rubik-combined-listings.crisp.help/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Customize Swatches Modal

### General Section

Defines the fundamental behavior and layout of swatches.

| Label | Options |
| ---- |
| Swatch type | Image, Button, Dropdown |
| Image source | See section 3.3 |
| Layout | Grid, Carousel (not available for Dropdown) |

### Size & Style (Image Swatch)

Controls the visual dimensions and layout of image-style swatches.

| Label | Range / Options |
| ---- |
| Width | 20–200 px |
| Corner radius | 0–100 px |
| Spacing | 0–50 px (Grid only) |
| Vertical padding | 0–20 px (Grid only) |
| Horizontal padding | 0–20 px (Grid only) |
| Grid alignment | Left, Center, Right |
| Height ratio | 0.5–2.0 (step 0.1) |
| Image fit | Fill (may crop), Fit (show all) |
| Image background | Alpha supported |

### Visibility (Image & Button)

Controls how many swatches are shown and how they are grouped.

| Label | Notes |
| ---- |
| Show category headers | Groups swatches visually |
| Limit to one row | Grid only |
| Max visible | 0–50, 0 = show all |

When swatches are hidden due to limits, a **+N more** indicator appears automatically.

### Swatch Info (Image Swatch)

Controls name and price styling below the swatch image.

Name options:

* Show name
* Name font size: 6–18 px
* Name font weight: 400–700
* Name max rows: 1–3
* Name color (alpha supported)

Price options:

* Show price
* Price font size: 6–18 px
* Price font weight: 400–700
* Price color (alpha supported)
* Gap between name and price: 0–16 px

Additional:

* Info background color
* Text alignment: Left, Center, Right

### Carousel (Layout = Carousel)

Available only when Layout is set to Carousel.

| Label | Range |
| ---- |
| Spacing | 0–50 px |
| Show arrows | Toggle |
| Arrow size | 10–50 px |
| Arrow roundness | 0–50% |
| Blur | 0–20 px |

### Group Title (All Swatch Types)

Controls the option label such as “Color” and the selected value display.

Option name:

* Show option name
* Font size: 10–24 px
* Font weight: 400–700
* Color

Selected value:

* Show selected value
* Font size: 10–24 px
* Font weight: 400–700
* Color

Spacing below title:

* 0–32 px

### Borders (Image Swatch)

| Label | Range |
| ---- |
| Width | 0–10 px |
| Default color | Alpha supported |
| Selected color | Alpha supported |
| Offset | 0–5 px |
| Offset color | Alpha supported |

### Sold Out Styling (Image & Button)

Defines how unavailable products appear.

| Label | Range |
| ---- |
| Opacity | 0.1–1.0 |
| Show strikethrough | Toggle |
| Line color | Alpha supported |
| Line opacity | 0.1–1.0 |

### Spacing (All Swatch Types)

Controls outer margins and container padding.

| Label | Range |
| ---- |
| Top / Bottom / Left / Right | 0–50 px |
| Between categories | 0–50 px |
| Container vertical padding | 0–20 px |
| Container horizontal padding | 0–20 px |

### Button Appearance (Button Swatch)

Selection style:

* Border
* Fill

Fill style:

* Fill color
* Fill text color

Other options:

* Corner radius: 0–50 px
* Border width: 0–5 px
* Border color
* Selected border color
* Background
* Hover background
* Text color
* Font size: 8–32 px
* Vertical padding: 0–30 px
* Horizontal padding: 0–40 px
* Spacing between buttons: 0–50 px (Grid only)
* Grid alignment: Left, Center, Right

Optional image inside button:

* Show image
* Image size: 16–64 px
* Image roundness: 0–50 px
* Image fit
* Image background

Optional price inside button:

* Show price
* Price font size: 6–18 px
* Price font weight: 400–700
* Price color
* Gap between name and price: 0–16 px
* Text alignment: Left, Center, Right

### Dropdown Appearance (Dropdown Swatch)

| Label | Options |
| ---- |
| Width | Full width, Auto, 200px, 250px, 300px |
| Corner radius | 0–50 px |
| Background | Alpha supported |
| Text color | Alpha supported |
| Font size | 8–32 px |
| Vertical padding | 0–30 px |
| Horizontal padding | 0–40 px |

### Custom CSS (Advanced)

Available for all swatch types.

* Override CSS variables to customize styles
* Link to documentation
* Textarea placeholder:

```
:host { --rcl-swatch-label-color: red; }
```

Users must wrap CSS inside `:host { }`.

At runtime, `:host` is transformed to a group-specific selector such as:

`[data-rcl-group="N"]`

Supports 70+ CSS variables.