Pages without a developer: a visual page builder for Hyvä

A retailer's marketing team changes the website every week: a new promotion, a careers page, a landing page for a campaign. On a Hyvä store that usually means waiting for a developer, because Magento's own page builder was made for the older Luma front end and does not show what the Hyvä page will really look like.

We built a visual page builder for a multi-location retailer. Their team designs pages on a canvas that uses the live Hyvä theme, drops in real product cards with real store prices, and publishes straight to ordinary Magento CMS pages.

The challenge

What you see had to be what you get: the editor needed to show the page with the store's real Hyvä styling, not an approximation that looks different once published.
Pages had to stay Magento pages: the result had to be normal CMS content that Magento caches, indexes and serves, not a separate system to host and secure.
Products had to be live: promotion pages show products, and the retailer's prices differ by store. A product grid on a landing page had to show the right store's prices.
Every screen size mattered: a header image that looks right on a laptop may need a different size or a different picture on a phone.
Changes had to show up at once: after a save, the published page had to update without staff clearing caches by hand.
The existing content was messy: years of product descriptions had been pasted in from word processors, email and AI chat tools, and carried hidden markup that broke layouts.

What we built

A browser-based editor for staff, connected to the store's Magento install.

A real Hyvä canvas: the canvas is a blank page of the store itself, loaded with the live theme's CSS, so fonts, colours and spacing match the published page.
A full set of elements: rows and columns, text, images, video, buttons, icons, dividers, cards, grids, tables, accordions, tabs, carousels and paged sliders.
Product elements with real cards: a products grid or slider, chosen by category, by SKU list, or as new or best-selling items. The canvas previews the store's actual product card, prices and badges included.
Optional live product cards: a product element can be switched to load its cards when the page is viewed, so prices and stock are always current even on a cached promotion page.
Magento blocks and widgets: any existing CMS block or widget can be placed in a design and previewed on the canvas.
Per-screen control: elements can be hidden per device. Images get a "size per screen" table (desktop, laptop, tablet, mobile), each with its own size mode, width and height.
Easy editing: insert anywhere with "+" bars between elements, a layers tree with collapsible branches, a large editor for text and HTML, and automatic row heights so short rows do not leave gaps.
A media gallery: folders, bulk upload with progress, and "pick from gallery" on every image slot. Magento's own catalog and system folders stay read-only.
Share links: one click copies a link that opens the same design in a teammate's editor.
Publish to Magento: open an existing CMS page, save a design as a CMS page, or preview it on a scratch page first.

How it works

Open or start a page. A staff member opens the editor and either starts a new design or opens an existing CMS page that was built with it.
Build on the canvas. They add rows and elements, drag them into place and set styles. The canvas is the store's own Hyvä page, so what they see is how the page will look.
Check each screen size. A breakpoint switch previews desktop, laptop, tablet and mobile. Per-screen settings apply only where they are set, and the editor shows which value each screen inherits.
Add products. A products element is configured by category or SKUs, and the canvas asks the store to render the real product card for a preview store, so prices and badges match the live site.
Preview, then save. A preview opens the design on a scratch CMS page. Saving writes the page to Magento as normal CMS content: clean HTML plus standard Magento directives for products and blocks. The editor's own controls never reach the published page.
The page updates at once. On save, the editor clears that one page from the full-page cache and the CDN. It does not flush the whole site's cache, and it adds no cache-busting query strings to the address.
Visitors get a fast page. The published page is served and cached by Magento like any other CMS page. Live product elements fetch fresh cards for the visitor's chosen store after the page loads.

Under the hood

Mage-OS (Magento 2 open source): designs are stored as standard CMS pages through Magento's own APIs. Product elements use Magento's catalog widget with our own grid and slider templates.
Hyvä theme: the canvas and the published pages use the store's Hyvä theme, Tailwind CSS and Alpine.js, so nothing extra has to load on the front end.
A small Magento module for live product cards: it builds the product list only from validated settings (never from raw input), respects the visitor's chosen store, and is never cached.
The store-pricing layer: the same per-store prices that power the rest of the site, with a default preview store for the editor.
Caching: targeted purges by page cache tag in the full-page cache and Varnish, plus a best-effort CDN purge that can never block a save.
Automated tests: the editor has its own test suites for placement, visibility, image sizing, product rendering, the media gallery and sharing, and new features are written test first.
Access: the editor is a staff-only tool and is not reachable by the public.

Content clean-up that came with it

A builder only helps if the existing content is in good shape. Alongside the editor, we cleaned up the retailer's product descriptions in two passes, with a full backup and a dry run before each one:

One standard structure: 1,455 descriptions were converted to the same row-and-text structure, so every one opens the same way in the editor.
Pasted markup removed: 518 descriptions were stripped of hidden markup copied in from AI chat tools and email clients. Only plain formatting was kept: paragraphs, lists, headings, bold and links.
No text lost: the clean-up checked every row's visible text before and after, and skipped any row whose words would have changed. It reported zero rows with lost text.

We also moved 319 posts from a legacy blog extension to the store's own blog module, using the same row-and-text pattern.

What it changed

We don't have traffic or conversion figures to share for these pages. This is what the retailer's team can now do:

Publish without a developer: marketing staff design and publish landing pages, promotion pages and pages such as careers on their own.
Trust the preview: the canvas is the real theme, so there is no gap between what was designed and what goes live.
Sell from content pages: promotion pages show real product cards with the visitor's store prices, and can be set to stay live under caching.
Get mobile right: each screen size can have its own image size or picture, set in one place.
See changes immediately: a save updates the live page within seconds, with no full cache flush.
Work with consistent content: every product description now has the same clean structure.

Could this work for you?

A visual builder made for Hyvä is worth it when content changes often and developer time is scarce:

retailers who run weekly promotions and campaign landing pages;
stores moving from Luma to Hyvä that relied on a Luma page builder and need a replacement;
multi-store or multi-location businesses whose product grids must show local prices;
teams that have years of messy pasted content to clean up before a redesign.

We build and adapt tools like this on Mage-OS and Hyvä. If your store is still on Magento 1 or on a Luma theme, we can move it first: see our Magento 1 to Mage-OS and Hyvä migration, our Magento 2 to Mage-OS and Hyvä upgrade, or all migration options.

See everything we offer on our services page, or tell us how your team publishes content and we will tell you how we would approach it.