Custom CSS for the product customizer
How to style the Chamevo product customizer using CSS custom properties and the ::part() pseudo-element.
Chamevo's product customizer is a Stencil web component (<cv-customizer>) that uses Shadow DOM. Shadow DOM encapsulates component styles, so regular CSS selectors cannot reach inside it. The old fpd- class selectors used in earlier versions no longer work.
There are two supported ways to style the customizer from your theme or stylesheet:
- CSS custom properties (
--cv-*) — override theme tokens that cascade through the shadow boundary. ::part()pseudo-element — target named shadow DOM parts exposed by the component.
Where to add custom CSS
Option 1: WordPress Customizer
Go to Appearance → Customize → Additional CSS. This stylesheet loads after plugin styles and affects the full page.
Option 2: Child theme stylesheet
Add rules to your child theme's style.css.
Option 3: UI Composer — Custom CSS field
In Chamevo → UI Composer, open a layout and add CSS in the Custom CSS field. This CSS is injected into <head> on pages using that layout, and is the most targeted option when different products need different styles.
All three locations support CSS custom properties and ::part() selectors.
CSS custom properties
CSS custom properties cascade through the shadow DOM boundary. Override them on cv-customizer (or any ancestor element) to change the customizer's colors, spacing, and layout without ::part().
Color tokens
| Property | Default | Purpose |
|---|---|---|
--cv-primary |