The custom CSS feature lets you adjust styling details that can't be configured in the visual editor by writing code directly.

What you can do

Change the popup's border radius, shadow, and background color
Adjust font size and line height for headings and body text
Customize button shape, color, and hover effects
Style input fields
Add animations such as fade-in effects

Requirements

Custom CSS is available on the Professional plan and above.

Setup

Open the display you want to customize.
Open the Custom CSS section under Design Settings.
Edit the template selector { } that appears in the CSS editor.

About the selector placeholder

The word selector in the template is a placeholder. When the display is published, selector is automatically replaced with a unique CSS class that applies only to that display. This ensures your CSS affects only this display and not any other elements on your site.

Available class names

Use the following class names to target child elements within the display. selector on its own refers to the root element of the entire display.

Class name	Target
`selector .plmw-display`	Popup window body
`selector .plmw-body`	Content area
`selector .plmw-overlay`	Background overlay (dimmed area)
`selector .pl-heading`	Heading component
`selector .pl-text-box`	Text component
`selector .pl-form`	Form component
`selector .button-wrap`	Button wrapper
`selector button`	Button element
`selector input`	Input field
`selector .pl-countdown`	Countdown
`selector .plmw-coupon-code`	Coupon code text

Examples

/* Popup border radius and background color */
selector .plmw-display { border-radius: 16px; background-color: #fff8f0; }

/* Heading font size */
selector .pl-heading { font-size: 24px; }

/* Button color and shape */
selector button { background-color: #e85d04; border-radius: 8px; }

/* Button hover effect */
selector button:hover { background-color: #c44d00; }

/* Input field border */
selector input { border: 1px solid #ccc; border-radius: 4px; }

/* Background overlay opacity */
selector .plmw-overlay { background-color: rgba(0, 0, 0, 0.3); }

/* Base font size for the entire display */
selector { font-size: 14px; }

/* Display animation */
selector .plmw-display { animation: fadeIn 0.5s ease-in; }

Troubleshooting

CSS isn't being applied: Make sure your selector starts with selector. Also check that your CSS syntax (braces and semicolons) is correct.
CSS is affecting the entire site: Always start with selector. Writing a class name alone (e.g., .pl-heading { }) can affect other elements on your site as well.

How to change the font

How to Add Custom CSS to a Display