How to configure popup appearance
This guide explains how to control the visual presentation of a popup: its size, vertical position, header visibility, content, custom CSS, and trigger — all of which can be set per device.
Per-device settings and inheritance
The Display card is organised into three tabs — Desktop, Tablet, and Mobile — each grouping the same settings (Content, Appearance, Trigger & Timing, Custom CSS).
- Desktop is the base. The values you set on the Desktop tab apply everywhere.
- Tablet and Mobile inherit Desktop by default. Each inherited field shows a chain-link icon and is greyed out, displaying the Desktop value.
- Unlock a field by clicking its chain-link icon. The field is seeded with the current Desktop value as a starting point, and you can then give that device its own value.
- Re-link a field by clicking the icon again to clear the override and inherit Desktop once more.
Inheritance is flat: unlocking Tablet does not affect Mobile, and vice-versa — both inherit only from Desktop.
The storefront resolves the effective value per device from the theme's own breakpoints, so it stays correct even when a theme customises its breakpoints. Phones (XS/SM) use the Mobile values, tablets (MD) use Tablet, and larger screens (LG/XL/XXL) use Desktop. If a visitor resizes or rotates their device while a popup is open, its size, alignment, light close icon, custom CSS, and CMS content all swap live to the new device.
Modal Size
In the Display section, the Modal Size field controls the width of the popup dialog. The values map directly to Bootstrap modal size classes:
| Option | Bootstrap class | Approximate width |
|---|---|---|
| Small | modal-sm | ~300 px |
| Default | (none) | ~500 px |
| Large | modal-lg | ~800 px |
| Extra Large | modal-xl | ~1140 px |
| Fullscreen | modal-fullscreen | 100 vw × 100 vh |
Choose Fullscreen for immersive content such as cookie-consent overlays or splash screens.
Vertical Alignment
The Vertical Alignment field controls where the popup sits on the screen vertically.
| Option | Behaviour |
|---|---|
| (none) | Modal appears at the top of the viewport (Bootstrap default). |
| Top | Same as the default — modal appears near the top. |
| Center | Modal is vertically centred in the viewport. |
| Bottom | Modal is aligned to the bottom of the viewport. |
Center and Bottom are useful for toast-style or cookie-notice–style popups.
Hide Header
The Hide Header toggle in the Display section removes the modal header bar (which normally contains the popup title and the × close button).
When Hide Header is on:
- The header bar becomes invisible.
- The close button is repositioned as a floating overlay in the top-right corner of the modal content area, so the visitor can still dismiss the popup.
- The modal body retains its zero-padding styling — your CMS content goes edge to edge.
Use Hide Header for image-only popups or full-bleed CMS layouts where the header bar would visually break the design.
Light close icon
The Light close icon toggle controls the colour of the × button. The default close button is a dark "X", which can be hard to see when it sits over a dark image or a full-bleed CMS layout (a common issue on Mobile, where an image often moves to the top of the modal). Turn the toggle on to render the × in white so it stays visible on dark popup backgrounds; off (the default) keeps the normal dark ×.
Because it is a per-device setting, you can, for example, keep the default dark × on Desktop and show the white × only on Mobile — unlock the Light close icon on the Mobile tab and turn it on.
Responsive CMS page (content)
Under each device tab's Content subgroup you can assign a different CMS page:
| Tab | Device | Breakpoints |
|---|---|---|
| Desktop — CMS Page (required) | Desktop | LG, XL, XXL (and fallback for others) |
| Tablet — CMS Page | Tablet | MD |
| Mobile — CMS Page | Phone | XS, SM |
Leave the Tablet or Mobile CMS Page empty to fall back to the Desktop CMS page.
The plugin monitors viewport changes. If a visitor resizes their browser or rotates their device while the popup is open, the plugin detects the new device class and swaps the modal body content to the matching CMS page — without closing the popup.
CMS content and spacing
The popup plugin sets padding: 0 on the modal body. All padding and spacing is the responsibility of the CMS page's sections and blocks. This gives you full control over edge-to-edge images, background colours, and internal spacing.
When Hide Header is off, the modal header provides a default title (the popup's internal name is not shown; Shopware's modal renders a blank header) and the standard × button.
Examples
| Goal | Configuration |
|---|---|
| Full-screen welcome modal | Desktop → Modal Size: Fullscreen, Hide Header: on |
| Centred discount offer | Desktop → Modal Size: Default, Vertical Alignment: Center |
| Bottom-anchored cookie notice | Desktop → Modal Size: Large, Vertical Alignment: Bottom |
| Different design for phones | Mobile tab → set a single-column CMS Page |
| Visible close button on mobile only | Mobile tab → unlock Light close icon, turn it on |
| Smaller dialog on phones | Mobile tab → unlock Modal Size, choose Small |