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 Name | Description | Default Value |
|---|---|---|
| --scxps--bg-color | Background color of the search lightbox | #ffffff (white) |
| --scxps--text-primary | Primary text color | #333333 (dark gray) |
| --scxps--text-secondary | Secondary text color | #777777 (medium gray) |
| --scxps--text-tertiary | Tertiary text color | #aaaaaa (light gray) |
| --scxps--text-disabled | Disabled text color | #cccccc (very light gray) |
| ... |
TIP
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.