Skip to content
P2Lab Dynamic Variables

Per-variable CSS & JS

Each value row has optional CSS and Script fields. The plugin injects them into the storefront <head> (CSS) and <body> (JS) only on pages that actually use the variable. Other pages do not pay the cost.

Why this is useful

Section titled “Why this is useful”

A common pattern is “promo banner with its own styling and a click tracker”. Without this feature you’d dump the CSS into the theme bundle and the JS into a global script — and every page in the shop would pay for it.

With per-variable injection:

  • A landing page that contains {promotionText} loads its CSS and JS.
  • A product detail page that does not use the variable loads nothing.

The check happens at render time, after the replacer has already swept the content for the variable’s usage.

How to use it

Section titled “How to use it”
  1. Open a variable in Settings → Content → Dynamic Variables.
  2. On a value row, expand the CSS and Script fields.
  3. Paste your styles / scripts (translatable per language — see below).
  4. Save.

CSS

Section titled “CSS”
  • Goes into a <style> tag in the page <head>.
  • Scope your selectors carefully — they apply globally to the page.
  • Use a wrapping class in your HTML value (e.g. <div class="promo-banner">...</div>) and key your styles off that class.
  • Animations, media queries, custom properties — all fine.

JavaScript

Section titled “JavaScript”
  • Goes into a <script> tag in the page (no defer / async by default).
  • Runs in the page’s global scope. Wrap your code in an IIFE if you need variable isolation.
  • Beware of duplicates — if the same variable appears multiple times on the page, the CSS / JS still loads exactly once.

Translatable per language

Section titled “Translatable per language”

The CSS and Script fields follow the same translation system as the value. You can ship language-specific CSS (different font for an alphabet) or language-specific JS (different analytics label). Empty translations fall back to the system default language.

Channel-specific styling

Section titled “Channel-specific styling”

Per-channel rows have their own CSS / JS. A campaign that runs only on Channel A can ship a Channel-A-only style block that no other storefront ever loads.

Anti-patterns

Section titled “Anti-patterns”
  • Don’t put critical UI styles here. If the styling is part of the theme, put it in the theme. Per-variable CSS is for the content of the variable, not the page chrome.
  • Don’t fetch large libraries from JS. A few lines of init code is fine. Long-running scripts belong in the theme bundle so they can be cached.
  • Don’t rely on per-variable JS for accessibility-critical features. The script only loads when the variable is rendered; if a CMS editor accidentally deletes the placeholder, the JS disappears with it.