Slider
A Slider stage renders as a hero slider embedded into a Shopware CMS page (Shopping Experiences). Unlike a popup, it doesn’t fire client-side — it’s part of the regular CMS layout pipeline, rendered server-side as soon as the page loads. Multiple slides each hold their own scene of layers, kept in sync by a built-in slider timeline.
When to use a slider
Section titled “When to use a slider”- Hero rotation on the homepage — the typical “5 banners that auto-rotate” use case.
- Storytelling sections on category landing pages — sequential frames that walk visitors through a campaign.
- Comparison grids where each slide is a different angle on the same offer.
If you want something that fires once per session over arbitrary pages, use a popup instead.
Slides
Section titled “Slides”Each slide is one scene layer (a container with its own internal timeline) plus optional constant layers that persist across all slides (logo, dots, navigation, decorative elements). Slides are managed from the Slider slide panel at the bottom of the editor.
The built-in Slider timeline root scene auto-aligns slides to a single master timeline so the per-slide animations and the cross-slide transitions stay in sync.
Adding a slider to a CMS page
Section titled “Adding a slider to a CMS page”- Open Catalogues → Shopping Experiences → Pages (or the layout assigned to a category).
- Edit the layout, add a section, and inside it add a block.
- From the block’s element picker pick P2Lab Stage Slider (CMS element registered as
p2lab-stage-slider). - The element’s config (right side panel) shows a Slider stage picker. Pick one of your stages of type
slider. The storefront preview updates inline. - Save the CMS page.
Until a stage is assigned, the element shows “Pick a slider stage in the side panel to assign.” Once assigned, the preview shows a live render of the slider.
Playback configuration
Section titled “Playback configuration”Slider playback is configured per stage in the Stage settings modal (gear icon in the editor toolbar), section Slider:
- Autoplay — slides advance automatically.
- Loop slides — when autoplay reaches the last slide, it wraps to the first instead of stopping.
- Transition — visual effect between slides. Crossfade, horizontal slide, or 3D flip.
- Transition duration (ms) — how long the transition animation runs.
- Show prev/next arrows — left/right arrow buttons rendered over the slider edges.
- Show dots — bottom strip of small navigational dots (one per slide). Each dot has
role="tab"+aria-currentfor accessibility. - Pause on hover — autoplay pauses while the cursor is over the slider.
- Enable touch swipe — visitors can swipe left/right on touch devices to navigate.
The Convert to multi-slide option is available when the editor detects a single-slide stage and offers to upgrade it.
What the storefront renders
Section titled “What the storefront renders”The CMS element delegates to the stage-slider.html.twig partial, which produces:
<div class="p2lab-stage-slider" data-p2lab-stage-slider>root.p2lab-stage-slider__viewportcontaining one.p2lab-stage-slider__slideper slide.p2lab-stage-slider__global-overlayfor constant cross-slide layers (if any).p2lab-stage-slider__navwith prev/next arrows (if enabled).p2lab-stage-slider__dotsstrip (if enabled)
The P2LabStageSliderPlugin JS instance on each data-p2lab-stage-slider element handles autoplay, transitions, swipe, keyboard, and the parallax engine.
Sliders vs popups — at a glance
Section titled “Sliders vs popups — at a glance”| Slider | Popup | |
|---|---|---|
| Where it appears | Inside a CMS page section | Overlaid on any page |
| When it renders | Server-side with the page | Client-side after /p2lab-stage/resolve |
| Multiple variants | No (always inline) | 9 display variants (modal, banner, slide-in, toast) |
| Multiple “frames” | Yes (slides) | No (single scene) |
| Trigger / frequency | n/a (always visible on host page) | Configurable per stage |
| Targeting | By CMS page assignment | By page types / URL patterns / channels / rules |
| Statistics | Currently popup-focused — sliders don’t fire impression / close events the same way | Full impression / CTA / close / dismiss tracking |
Related
Section titled “Related”- Editor → Stage Settings — Slider section (autoplay / loop / transition / arrows / dots).
- Editor → Timeline — keyframes and presets work the same on slider scenes.
- Editor → Templates — built-in slider starters (
rotating-cans,studio-edit,editorial-spotlight). - Storefront → CSS customization — slider-specific classes (
.p2lab-stage-slider__*).