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