Skip to content

Custom CSS

This section provides guidance for advanced users who want to further customize the visual appearance of the Product Search plugin using custom CSS.

Using CSS Variables:

The Product Search plugin exposes a set of CSS variables that allow you to easily modify various aspects of its styling. These variables offer a more maintainable and efficient approach compared to directly overriding the plugin's styles.

Variable NameDescriptionDefault Value
--scxps--bg-colorBackground color of the search lightbox#ffffff (white)
--scxps--text-primaryPrimary text color#333333 (dark gray)
--scxps--text-secondarySecondary text color#777777 (medium gray)
--scxps--text-tertiaryTertiary text color#aaaaaa (light gray)
--scxps--text-disabledDisabled text color#cccccc (very light gray)


See the full list of CSS variables here: CSS Variables Reference.

Example: Customizing Lightbox Background:

To modify the lightbox background color, simply adjust the value of the --scxps--bg-color variable. Here's an example:

body .screets-product-search {
  --scxps--bg-color: #333333; /* Dark gray background */

Important Note:

We recommend utilizing your browser's developer tools to explore all available CSS variables within the screets-product-search class. This allows for granular control over the plugin's appearance.