CSS customization

The plugin’s storefront SCSS is built so themes can override visual details without forking the plugin. Two layers of customization: CSS variables (most things) and BEM classes (when variables aren’t enough).

For an exhaustive list see Reference → CSS variables.

CSS variables

The plugin exposes its visual surface via custom properties (CSS variables). These can be overridden from your theme’s SCSS / CSS for selective tweaks without touching the plugin.

Shell-level variables

Set on the .p2lab-stage__shell element:

• --p2lab-stage-z — z-index of the stage. Default 9999. Lower if you need to render under a sticky header.
• --p2lab-stage-shell-width / --p2lab-stage-shell-height — designed dimensions of the shell.
• --p2lab-stage-shell-padding — content padding inside the shell.
• --p2lab-stage-shell-bg-color / --p2lab-stage-shell-bg-image / --p2lab-stage-shell-bg-size / --p2lab-stage-shell-bg-pos / --p2lab-stage-shell-bg-repeat — background.
• --p2lab-stage-shell-border-* — border family (width / style / color).
• --p2lab-stage-shell-backdrop-filter — backdrop filter.

Close button variables

Set on the .p2lab-stage__close element. Driven from the Stage Settings → Close button style inspector:

• --p2lab-stage-close-size, --p2lab-stage-close-padding
• --p2lab-stage-close-color, --p2lab-stage-close-bg, --p2lab-stage-close-bg-hover
• --p2lab-stage-close-border-* family
• --p2lab-stage-close-radius, --p2lab-stage-close-opacity

Slider variables

• --p2lab-stage-slider-transition-ms — transition duration (driven from Stage Settings → Slider).

Composite-widget variables (countdown / coupon)

• --p2lab-countdown-value-* — typography family for the digit values (font-family / size / weight / line-height / letter-spacing / color / text-decoration / text-transform / opacity).
• --p2lab-countdown-label-* — same family for the unit labels.
• --p2lab-countdown-unit-padding-* / --p2lab-countdown-unit-border-* / --p2lab-countdown-unit-background-color — box styling per unit.
• --p2lab-coupon-* — equivalent family for the coupon widget.

Grid layout variables (section / row / column)

Used by the Grid content mode:

• --p2lab-section-gap, --p2lab-section-padding, --p2lab-section-max-width, --p2lab-section-bg, --p2lab-section-align.
• --p2lab-row-gap, --p2lab-row-align, --p2lab-row-justify.
• --p2lab-col-xs / --p2lab-col-sm / --p2lab-col-md / --p2lab-col-lg / --p2lab-col-xl — responsive flex-basis breakpoints.
• --p2lab-col-padding, --p2lab-col-bg.

BEM classes

When CSS variables aren’t enough — you need to change selectors, add pseudo-elements, etc. — fall back to overriding the plugin’s BEM classes from your theme. The relevant classes:

Root and shell

• .p2lab-stage — root wrapper (always present).
• .p2lab-stage--modal / .p2lab-stage--banner_top / .p2lab-stage--banner_bottom / .p2lab-stage--slide_in_left / .p2lab-stage--slide_in_right / .p2lab-stage--toast_top_right / .p2lab-stage--toast_top_left / .p2lab-stage--toast_bottom_right / .p2lab-stage--toast_bottom_left — variant modifiers.
• .p2lab-stage__shell-wrap — outer wrapper carrying the scaled dimensions after transform: scale.
• .p2lab-stage__shell — inner canvas at designed pixel dimensions.

Layers

• .p2lab-stage__layer-wrap — outer per-layer wrapper. Owns positioning, parallax transform. Animations target this element when the property is positional.
• .p2lab-stage__layer — inner per-layer container. Owns rotation, opacity, type-specific styling.
• .p2lab-stage__layer-img — image layer’s <img> element.
• .p2lab-stage__scene — scene wrapper (for scene-type layers).
• .p2lab-stage__scene-inner — scene’s child grid (carries data-design-width / data-design-height).

Affordances

• .p2lab-stage__close — the X close button.
• .p2lab-stage__permanent — the “Don’t show again” button.

Grid layout

• .p2lab-stage-grid__section, .p2lab-stage-grid__row, .p2lab-stage-grid__col — grid mode containers.

Slider

• .p2lab-stage-slider — slider root.
• .p2lab-stage-slider__viewport — clipping viewport.
• .p2lab-stage-slider__slide — one per slide.
• .p2lab-stage-slider__global-overlay — constant cross-slide layers.
• .p2lab-stage-slider__nav — prev/next button wrapper.
• .p2lab-stage-slider__dots — dot strip (tablist role).

Example: customize the close button from a theme

.p2lab-stage__close {
    --p2lab-stage-close-size: 40px;
    --p2lab-stage-close-color: #ff0044;
    --p2lab-stage-close-bg: rgba(255, 255, 255, 0.9);
    --p2lab-stage-close-bg-hover: rgba(255, 0, 68, 0.1);
    --p2lab-stage-close-radius: 999px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

Example: variant-specific shell tweak

.p2lab-stage--banner_top .p2lab-stage__shell {
    border-radius: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

Example: dot strip color

.p2lab-stage-slider__dots [role="tab"] {
    background: rgba(255, 255, 255, 0.4);
}
.p2lab-stage-slider__dots [role="tab"][aria-current="true"] {
    background: white;
}

When to override SCSS vs editor settings

• Editor settings (Stage settings, Layer style) — for content-specific values that should differ between stages.
• CSS variables — for branding-level values that should be consistent across all stages on a sales channel.
• BEM classes — for structural changes that the editor doesn’t expose (animation timing functions, custom pseudo-elements, breakpoint overrides).

Where to go next

• Reference → CSS variables — full table with defaults.
• Storefront → Mouse parallax — where the layer-wrap transform lives.
• Stages → Popup — which display variant maps to which modifier class.