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.
Updated on: 16/02/2026
Thank you!