Playground

The PLP Playground provides a visual and interactive environment where merchants can preview, search, and configure PLPs per collection before changes go live.

Accessing the Playground

Navigate to the Playground tab in the main navigation menu. From there, you can access the PLP preview environment.

Playground Capabilities

Collection selector — Dropdown listing all Shopify collections
Search field — Quickly find a specific collection
Live visual preview — See the PLP grid exactly as it will render
Device toggles — Switch between desktop and mobile views
Real-time reflection — See current filters, pinning, ranking, and banners

Using the PLP Playground

Steps to Preview

Open the PLP Playground from the main navigation
Select a collection from the dropdown or use the search field
The preview will display:
- Product grid with current merchandising rules applied
- Pinned products in their designated positions
- Banners injected at their configured slots
- Active filters available for selection
Toggle device views to see desktop and mobile layouts
Validate that the layout matches your expectations

What the Playground Shows

Merchandising Preview

Pinned products appear in their exact grid positions
Promoted products are boosted toward the top
Buried products appear lower in the grid
Hidden products are not displayed

Single card banners appear in their designated product slots
Full row banners span the grid width between rows
Banner positioning reflects the absolute dataset index

Filter Preview

Only enabled filters from allowed_filter_attributes are displayed
Filter ordering matches the Portal configuration
Applying filters updates the preview in real-time

Device Preview

The Playground supports multiple viewport configurations:

Device	Description
Desktop	Full-width grid with maximum column count
Tablet	Mid-size viewport for responsive testing
Mobile	Narrow viewport showing mobile column configuration

[!TIP] Test your PLP on mobile to ensure filters, banners, and grid layouts work well on smaller screens.

Playground vs Live

[!IMPORTANT] Changes previewed in the Playground are not live. The Playground is a safe environment for testing and validation.

Workflow

Configure merchandising rules, filters, and banners in the Portal
Preview changes in the Playground
Validate the layout and positioning
Save / Publish when ready to go live

Linking from Configuration

The PLP Configuration Page includes a direct link to preview in the Playground. This allows you to:

Make configuration changes
Immediately see the impact in the visual preview
Iterate quickly without publishing

Reducing Risk

The Playground is designed to minimize risk and guesswork:

See before you publish — No surprises when changes go live
Test edge cases — Check how the grid looks with different product counts
Validate mobile experience — Ensure a good user experience on all devices
Confirm banner placement — Verify promotional content appears correctly

[!NOTE] Allow a few moments for configuration changes to be reflected in the Playground environment after saving.