Custom CSS

The Custom CSS field (the last subgroup on each device tab of the Display card) lets you fine-tune a popup's appearance without touching the theme. Paste a snippet, save, and it applies only to your popups — no rebuild required.

Per-device — no media queries needed

Custom CSS is a per-device field. On the Tablet and Mobile tabs it inherits the Desktop CSS until you click the chain-link icon to unlock it; once unlocked it holds that device's own CSS.

At runtime the plugin injects only the active device's CSS, swapping it live when the visitor crosses a breakpoint. This means you usually do not need @media queries to make a popup look different on mobile — just put the mobile-specific rules on the Mobile tab. (Plain @media queries still work if you prefer them.) The active device's CSS replaces the previous one entirely, so the tabs do not stack.

How scoping works — write selectors relative to the modal

The CSS you enter is automatically scoped to this popup and this device. The plugin wraps your rules in a per-popup, per-device selector before injecting them, so you do not need to add any popup prefix yourself — write your selectors as if they live inside the popup modal.

You write	Affects
.btn-close { … }	the close (X) button of this popup on this device
.modal-dialog { … }	the popup window
.modal-body { … }	the content area (your CMS page)
.modal-content { … }	the modal frame (corners, shadow, etc.)

Because the scope is automatic, the same snippet on the Desktop, Tablet, and Mobile tabs only ever touches that device's view of this one popup — it never leaks to other popups or other breakpoints.

Migrating from an older version: drop the .ssd-popup-modal prefix from any existing snippets. A rule like .ssd-popup-modal .btn-close { … } no longer matches now that scoping is automatic — write .btn-close { … } instead.

The closing </style> sequence is stripped automatically for safety, so you only need to write normal CSS.

Common snippets

Make the close (X) button white

Useful when the X floats over a dark image and is hard to see.

.btn-close {
    filter: brightness(0) invert(1);
}

Keep the X legible on any background (contrast halo)

Adds a soft outline so the X stays visible over both light and dark areas.

.btn-close {
    filter:
        drop-shadow(0 0 1px #fff)
        drop-shadow(0 0 1px #fff)
        drop-shadow(0 0 2px rgba(255, 255, 255, .85));
}

Put the X on a contrasting chip (most robust)

A translucent disc behind the X so it is always readable, regardless of the image.

.btn-close {
    background-color: rgba(0, 0, 0, .45);
    border-radius: 50%;
    padding: .6rem;
    opacity: 1;
    /* whiten the X so it reads on the dark chip */
    filter: brightness(0) invert(1);
}

Frosted-glass chip

.btn-close {
    background-color: rgba(255, 255, 255, .25);
    backdrop-filter: blur(8px);
    border-radius: 50%;
    padding: .6rem;
    opacity: 1;
}

Different close-button styling per device

White X on mobile (where the image is on top), default dark X on larger screens.

The simplest way is the built-in Light close icon toggle — unlock it on the Mobile tab and turn it on. If you prefer CSS, put this rule on the Mobile tab's Custom CSS (no media query needed, because the Mobile tab's CSS only runs on phones):

.btn-close {
    filter: brightness(0) invert(1);
}

Round the popup corners / add a shadow

.modal-content {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
}

Tips

• The field accepts any valid CSS, including multiple rules and @media queries.
• You do not need the popup's ID — scoping to this single popup (and the current device tab) is automatic.
• Changes apply on the next storefront page load (clear the HTTP cache if it does not appear immediately).