Product Spotlight
Sell one product in your own words, at today's price
The picture, the name, the price and the basket button come from your catalogue. The paragraph between the name and the price comes from you — which is the part a category listing can never give a landing page.
The picture beside the text, with the editor's paragraph between the name and the price.
Reads your catalogue
The product's name, price and picture are not stored in the page. They are read from your catalogue every time the page is shown, so this element needs the module switched on to show the product — without it, what stays is the paragraph you wrote.
The price is never out of date
Nothing about the product is copied into the page. Change a price in the catalogue and the landing page changes with it — and saving the product clears that page from the cache by itself.
Your words, where they matter
The catalogue description belongs to the product page. The sentence that makes this product the right one for this campaign belongs here, between the name and the price.
Straight into the basket
A real form and a real button, the same ones your category pages use — so it adds to the basket without a page reload, and works with the keyboard from the start.
Use cases
Where shops put it
A campaign landing page
One product, one photograph and three sentences of your own, with the basket button under them. No grid, no rule, no risk of the wrong product appearing.
A hero on the home page
The product of the month, as a card or with the picture beside the text, with an accent colour matching the campaign.
Three picks across a row
Three of these in three columns of one Page Builder row — each with its own SKU and its own words, which is the point of choosing by hand.
- Two appearances
- The picture beside the text, or a card with the picture on top.
- The product's SKU
- The one field you type, and it is what the panel is built from.
- Your own description
- In a rich-text editor, landing between the name and the price.
- Show or hide the price, the button and the links
- On the picture and the name.
- Which side the picture stands on
- And how wide its column is.
- An accent colour
- For the button.
- Advanced tab
- For alignment, spacing, border and CSS classes.
Shown in the demo store
Three of them as cards across one row.
A product that needs a size chosen first, so the button becomes a link.
A SKU that matches nothing, which is also what the element looks like with the module removed.
Native and honest
Your content is written in Magento's own format
This element needs the module on the storefront, and that is the honest version. The product half of the panel is read from the catalogue at every page view rather than stored in the page — so with the module removed it renders as nothing at all, and what stays is the paragraph you wrote, sitting in the page as ordinary text.
We think that is the right trade here, and it is worth saying why: a name and a price frozen into a page are wrong the first time either changes, and a shopper reading an old price is worse off than a shopper reading none. The same is true of a SKU that matches nothing, a disabled product or one outside the store view — the panel is absent, your words remain, and nothing errors.
One more thing you will notice: both catalogue-reading elements register a widget that shows up under Content → Elements → Widgets. That register is the same list Magento reads to decide whether the reference in your page may run, so it cannot be hidden. It is harmless.
Every element saves itself the way native Page Builder saves its own: a plain <div data-content-type="wrizu_…"> with its settings in data-* attributes, stored with the page. There is no proprietary database table, no shortcode, no second editor and nothing that has to be converted later.
That has a practical consequence. Disable the module and the storefront keeps serving those pages: headings, copy, images, links and buttons stay visible and clickable, and the styling you set per element — alignment, colours, spacing — stays with them, because it lives in a <style> block stored with the page rather than in our stylesheets. What you lose is what our CSS draws: the layouts, the borders and shadows, the button variants and the bundled icons.
One honest warning
With the module switched off, do not open and save a page that contains Wrizu elements — Page Builder flattens any page holding a content type it does not know into a single HTML Code block, and that save cannot be undone. It behaves that way with every unknown content type, not only with ours, and the storefront is unaffected either way; the rule is simply to leave those pages alone until the module is back on.
Works with any Luma-based theme
The elements are built on the same front-end stack the native Page Builder uses: jQuery and the libraries Page Builder already loads. They target Luma-based themes — Magento Blank, Luma, and the custom themes shops build on either of them.
Buttons use Luma's own button mixins, so a Wrizu button looks like a button from your theme rather than like a button from a plug-in. All of the module's CSS is scoped to [data-content-type^="wrizu_"], so it styles our elements and nothing else in your theme.
Requirements
- Magento Open Source or Adobe Commerce 2.4.6 or newer, with the
Magento_PageBuildermodule enabled - PHP 8.1 to 8.5 — whichever your Magento version supports
- No other extension, no external icon font, no CDN dependency
Questions about this element
Catalogue
More in Catalogue
Category Tiles
A grid of pictures with names that link to your categories, products or pages.
Hotspots
Points on a photograph, each opening a bubble with a product or with your own text.
Thirty-five conversion elements for the Page Builder you already have
Wrizu Page Builder Extensions adds them to the native Magento 2 Page Builder — no second editor, no proprietary format, no content held hostage.