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.
Choose Your Plan
Simple, transparent pricing. No hidden fees.
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.
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.
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!”
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 Shadow DOM Class Selectors:
.c: The outer banner wrapper card (container, pill, or modal)..btn: The “Apply” CTA button..x: The dismissal “×” close button..w: The text and flag wrapper element.
These are the actual internal class names used in the Shadow DOM. Targeting .container, .close, or .text-wrap will have no effect.
/* Inject via the "Custom CSS" field in your project Dashboard */
/* Banner wrapper — affects pill shape, background, borders */
.c {
font-family: 'Inter', sans-serif;
border-radius: 16px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}
/* "Apply" CTA button */
.btn {
background: #2563EB;
border-radius: 8px;
font-weight: 700;
text-transform: uppercase;
}
.btn:hover {
background: #1D4ED8;
}
/* Dismissal × button */
.x {
color: #64748B;
}
/* Flag + message text wrapper */
.w {
gap: 10px;
}Next: Universal Platform Integrations
Install ParityEdge across Webflow, Framer, Shopify, React, and Next.js.