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

--rcl-swatch-shadow

--rcl-swatch-media-aspect-ratio

--rcl-swatch-hover-transform

--rcl-swatch-hover-shadow

--rcl-swatch-label-color

--rcl-swatch-label-font-size

--rcl-swatch-label-font-weight

--rcl-swatch-price-color

--rcl-swatch-price-font-size

--rcl-swatch-compare-price-color

--rcl-swatch-active-label-color

--rcl-swatch-active-price-color

--rcl-swatch-placeholder-bg

Button swatch variables

Control background, border, typography, image size, and selected states. Examples:

--rcl-button-border-radius

--rcl-button-bg-color

--rcl-button-text-color

--rcl-button-font-size

--rcl-button-padding

--rcl-button-border-width

--rcl-button-border-color

--rcl-button-active-border-color

--rcl-button-hover-bg-color

--rcl-button-hover-text-color

--rcl-button-active-bg-color

--rcl-button-active-text-color

--rcl-button-invert-bg-color

--rcl-button-invert-text-color

--rcl-button-image-size

--rcl-button-image-border-radius

Dropdown variables

Control dropdown appearance and spacing. Examples:

--rcl-dropdown-border-radius

--rcl-dropdown-bg-color

--rcl-dropdown-text-color

--rcl-dropdown-font-size

--rcl-dropdown-padding

--rcl-dropdown-width

--rcl-dropdown-border-width

Group label variables

Control the option name and selected value styling. Examples:

--rcl-group-label-color

--rcl-group-label-font-size

--rcl-group-label-font-weight

--rcl-group-label-margin-bottom

--rcl-group-label-text-transform

--rcl-group-selected-value-font-weight

Layout variables

--rcl-grid-gap

--rcl-grid-template-columns

Carousel variables

--rcl-carousel-nav-color

--rcl-carousel-nav-size

--rcl-carousel-nav-bg

--rcl-carousel-nav-hover-bg

Tooltip variables

--rcl-tooltip-bg-color

--rcl-tooltip-text-color

--rcl-tooltip-font-size

--rcl-tooltip-padding

--rcl-tooltip-border-radius

Out-of-stock variables

--rcl-out-of-stock-opacity

--rcl-out-of-stock-line-color

--rcl-out-of-stock-line-width

Overflow indicator variables

--rcl-overflow-color

--rcl-overflow-font-size

--rcl-overflow-hover-color

--rcl-overflow-button-*

These variables make it possible to fully align swatches with your store’s branding while keeping styles isolated from your theme.

Updated on: 16/02/2026