How to Preview CMS Pages & Blocks in Magento 2

Editing CMS content in Magento is straightforward — but previewing those changes before they go live is not. This guide covers every option available, from native Magento features to third-party tools.

The problem: Magento has no built-in CMS preview

If you've ever edited a CMS page or CMS block in Magento 2, you've probably noticed the same thing: there's no preview button. You make your changes, hit save, and the content is immediately live on the frontend. There's no way to check how it looks before your customers see it.

This is a well-known limitation of Magento Open Source (formerly Community Edition). Unlike platforms like WordPress or Shopify, Magento's CMS editor doesn't provide a built-in preview for pages or blocks.

For simple text edits, this might be acceptable. But for larger content changes — updating landing pages, reworking promotional banners, or redesigning block layouts — publishing blind is risky. Broken formatting, misaligned images, or missing content can all slip through.

Option 1: Save and check (the default workflow)

The most common approach among Magento developers and merchants is simply:

1. Edit the CMS page or block in the admin panel.
2. Save it.
3. Open the frontend in another tab and refresh.
4. If something's wrong, go back and fix it.

This works, but it means every edit is immediately visible to customers. If you're making a series of changes — updating copy, swapping images, adjusting layout — visitors may see a half-finished page while you're still working on it.

When this approach falls short

• Multi-step edits — changing several blocks that make up a single page means the page is in an inconsistent state between saves.
• Approval workflows — there's no way to show a stakeholder or client what a page will look like before it's published.
• High-traffic stores — publishing a broken layout on a homepage or category landing page, even briefly, impacts customer experience.
• Coordinated launches — if a promotion involves changes across multiple CMS pages and blocks, there's no way to prepare everything and publish it all at once.

Option 2: Use a staging or development environment

Many teams maintain a staging environment — a copy of the production store where they can make and review changes safely.

1. Make your CMS changes on the staging site.
2. Review them on the staging frontend.
3. When satisfied, manually replicate the changes on production.

Pros

• Full visual preview in a realistic environment.
• No risk to the live store while editing.

Cons

• Manual duplication — you have to make every change twice: once on staging, once on production. Copy-paste errors are common.
• Environment drift — staging and production often diverge over time. The preview you see on staging may not match production exactly.
• Slow feedback loop — switching between environments, logging in, navigating to the right page, and comparing takes time.
• No block preview — CMS blocks don't have their own frontend URL. To preview a block change, you need to find a page that renders that block and check it there.

Option 3: Adobe Commerce Content Staging

Adobe Commerce (formerly Magento Enterprise / Commerce Edition) includes a Content Staging module. This is a built-in feature that lets you create scheduled "campaigns" with content changes and preview them before they go live.

How it works

• You create a campaign with a start and end date.
• You stage changes to CMS pages, blocks, products, categories, and other entities within that campaign.
• A preview mode lets you view the storefront as it will appear when the campaign is active.
• At the scheduled time, the changes are automatically applied.

Limitations

• Only available on Adobe Commerce — this feature is not included in Magento Open Source. Adobe Commerce licenses start at tens of thousands of dollars per year, which puts it out of reach for most small and mid-sized merchants.
• Complexity — Content Staging fundamentally changes Magento's database schema, adding versioning tables for every entity. This increases database complexity, can affect performance, and makes debugging harder.
• Conflict resolution — overlapping campaigns with changes to the same entity can create conflicts that are difficult to manage.
• Extension compatibility — many third-party extensions are not fully compatible with Content Staging, leading to unexpected behaviour.

Option 4: Preview with MageDrop (free)

MageDrop is a free tool built specifically to solve the CMS preview problem in Magento Open Source. It adds preview, staging, and scheduled deployment for CMS pages and blocks — without modifying Magento's database schema.

How to preview a CMS page

1. Install the MageDrop companion module on your Magento store.
2. Open any CMS page in the Magento admin.
3. Make your changes in the editor.
4. Click the Quick Preview button in the toolbar.
5. A preview link opens in a new tab showing the page exactly as it will appear on the frontend, with your changes applied.

Your changes are not saved or published — the preview is generated from your current form state. Customers continue to see the existing live content.

How to preview a CMS block

CMS blocks are trickier to preview because they don't have their own URL — they're embedded inside pages, widgets, or templates. MageDrop handles this:

1. Open the CMS block in the Magento admin.
2. Make your changes.
3. Click Quick Preview.
4. The preview link opens the storefront with the block's staged content overlaid wherever the block appears.

Navigate to any page that includes the block, and you'll see your updated version rendered in place.

Previewing multiple changes together

If you need to preview changes across several pages and blocks as a group — for example, a promotional campaign that updates the homepage, a landing page, and a sidebar block — you can use a release:

1. Create a release in the MageDrop dashboard.
2. Stage changes from multiple CMS pages and blocks into that release.
3. Generate a preview link for the entire release.
4. Browse the frontend with all staged changes applied simultaneously.

This gives you a complete picture of how the store will look once everything is deployed together.

Sharing previews for approval

Preview links are shareable. Copy the URL and send it to a colleague, client, or stakeholder. They can view the preview on the live storefront without needing a Magento admin account or MageDrop login. Each person gets their own isolated preview session — their visit doesn't affect anyone else.

How MageDrop preview works under the hood

MageDrop doesn't modify your database or save any changes to Magento until you explicitly deploy. During preview:

• A secure token is set in your browser session.
• The Magento module detects the token and overlays your staged changes in memory when rendering the page.
• Full Page Cache (FPC) is handled automatically — preview content is served from a separate cache context, so it's never shown to regular visitors.
• When you exit preview, everything returns to normal.

Comparison of preview options

Getting started with MageDrop

MageDrop is free to use. To set up preview for your Magento store:

1. Create a MageDrop account and add your store.
2. Install the companion module on your Magento instance — see the installation guide.
3. Connect the module using the API token from your MageDrop dashboard.
4. Start previewing — the Quick Preview button appears on every CMS page and block edit screen.

For a detailed walkthrough, see the full documentation.