Your first stage

This walkthrough creates a centered modal popup with an image and a “Close” button, assigns it to a sales channel, and previews it. Once you’ve done it once, every other stage you’ll build follows the same five-step shape.

What you need before starting

• The plugin is installed and activated (Installation).
• Master switch on for at least one sales channel.
• One image in your media library (anything will do — a placeholder is fine).

Step 1 — Open the module

Go to Marketing → Stages in the admin sidebar. On the first visit you’ll see the empty state — No stages yet.

Step 2 — Create a stage

Click Add stage in the top right. The Create new stage modal opens. Fill it in:

• Name — My first popup (anything works).
• Type — Popup (the other choice, Slider, embeds into CMS pages and needs a CMS section to host it — out of scope for the first walkthrough).
• Display type — Modal (centered with overlay).
• Default content mode — leave it at the default for now.
• Width / Height — leave the defaults (600 × 400 px).

Click Create. The stage is created and you land on its detail page, on the Overview tab.

Tip

Want a head start? On the create modal you can also click Browse templates… and start from a built-in template instead of an empty canvas. We’re going blank here so the walkthrough covers every panel.

Step 3 — Build the canvas

Switch to the Editor tab. You’re in the visual editor — top toolbar, left tool strip, center canvas, right panels, bottom timeline.

Add an image layer:

1. On the left tool strip, click Add image layer.
2. The image layer appears centered on the canvas. The right panel switches to the layer’s Properties.
3. In Properties, click the image picker and pick a media file from your library.

Add a button layer:

1. Click Add button layer on the left tool strip.
2. In Properties, set the Label to Got it.
3. Move the button below the image by dragging it on the canvas.

Configure the button’s click action so it closes the popup:

1. Double-click the button layer in the Layers panel on the right. The Layer style modal opens.
2. Switch to the Click action tab.
3. Toggle Enable on, set Action to Close popup.
4. Click Apply to dismiss the modal.

Hit Save in the top toolbar. The stage now has content.

Step 4 — Configure trigger, frequency, and targeting

Go back to the Overview tab (the tabs are at the top of the detail page).

In Trigger:

• Trigger type — Immediately on page load.

In Frequency & dismissal:

• Frequency — Once per session (visitor sees it once, then it’s suppressed until they close the browser).
• Show close (X) button — on (so visitors can also dismiss with the X).
• Close on overlay click — on (clicking outside the popup closes it too).

Switch to the Targeting tab.

In Channels & customer groups:

• Sales channels — pick the storefront you want this popup to fire on.

Leave the rest (rules, page types, URL patterns, customer groups) empty for now — empty means “any” on those axes, so the popup will fire on every page of that sales channel.

Click Save at the top.

Note

For a real campaign you’ll almost always set Page types too — otherwise the popup also fires on cart, checkout, and account pages. For the walkthrough we want maximum visibility while you’re testing, so we leave it open.

Step 5 — Preview on the storefront

Open the storefront for the sales channel you picked. The popup should appear immediately on page load. Click the Got it button or the X — it closes. Refresh the page — it does not reappear (frequency cap kicked in). Open the storefront in an incognito window — it shows up again (new session, no suppression state).

That’s a complete stage, end to end.

What just happened under the hood

1. The footer template (layout_footer_inner_container) injected a hidden [data-p2lab-stage] container with the page context.
2. The browser JS posted to /p2lab-stage/resolve with that context.
3. The backend filtered every active stage by sales channel / page type / URL / rules / schedule / frequency state, pre-rendered the matching ones to HTML, and returned them.
4. The plugin scheduled the popup according to its trigger (immediate), mounted it, recorded an impression event, and wired the close + click-action handlers.
5. On close, it recorded a close event and (depending on GDPR mode) wrote dismissal state to sessionStorage or PHP session.

Where to go next

• Refine the default prompts and make the editor work for your shop’s design system — Editor overview.
• Pick the right display variant for a real popup — Stage types → Popup.
• Cap visibility to specific pages/audiences for production — Targeting.
• See what the storefront actually receives — Storefront → How stages render.