Banner Customizer & Shadow DOM Styling
Learn how to customize the ParityEdge banner layout, color themes, dynamic message templates, and inject custom CSS into the isolated Open Shadow Root.
1. Placement Positions
ParityEdge provides three non-intrusive viewport placement positions selectable in the project dashboard:
A floating capsule docked at the bottom-right viewport corner. Minimal visual footprint that doesn't obstruct site navigation.
A full-width announcement strip anchored at the top of the browser window. Ideal for high-urgency global promo announcements.
An attention-grabbing modal centered on the screen with a subtle backdrop blur. Best for dedicated pricing pages.
2. Built-in Color Themes
Sleek slate-900 background with high-contrast typography and subtle borders.
Clean pure-white card with crisp borders, ideal for light-mode e-commerce stores.
Translucent frosted-glass backdrop with a 12px blur filter and subtle indigo glow.
3. Dynamic Message Tokens
Customize the banner text template using real-time tokens that are replaced automatically on the client side:
// Custom Banner Message Template:
“Special {discount}% parity discount for visitors from {country}!”
// Evaluated output for visitor from Brazil:
“Special 40% parity discount for visitors from Brazil!”
4. Custom Shadow DOM CSS Injection
Because the ParityEdge banner is rendered inside an Open Shadow Root, global site styles will not bleed in, and your banner styles will not affect your website. You can inject custom CSS directly into the banner Shadow DOM:
Supported Class Selectors:
.container— The outer banner wrapper card..btn— The “Apply Discount” CTA button..close— The dismissal “×” button..text-wrap— The text and flag container.
/* Example: Customizing Banner Typography and Button Colors */
.container {
font-family: 'Inter', sans-serif;
border-radius: 16px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}
.btn {
background: #2563EB;
border-radius: 8px;
font-weight: 700;
text-transform: uppercase;
}
.btn:hover {
background: #1D4ED8;
}Next: Universal Platform Integrations
Install ParityEdge across Webflow, Framer, Shopify, React, and Next.js.