Hotspots
Let the photograph do the selling, and the points do the linking
Points on a styled scene, each opening a bubble with a product from your catalogue — thumbnail, name and price — or with whatever you write instead. You place them by dragging them onto the picture.
One product bubble open, with its thumbnail, name and price.
Reads your catalogue
A point's product name, price and thumbnail are not stored in the page. They are read from your catalogue every time the page is shown, so the product bubbles need the module switched on — without it, each bubble falls back to the words you typed under it.
A styled photograph is the advert; this makes it shoppable
The picture your studio produced sells the look. The points turn it into five ways into the catalogue without covering it in captions.
Placed by dragging, not by typing numbers
Drag a marker onto the shoe and the position is written for you, as a percentage — so it stays on the shoe at every screen size.
Prices that are still true
A point's name and price are read from the catalogue at every page view. Nothing about the product is copied into the page, so nothing goes stale.
Use cases
Where shops put it
Shop the look
A styled flat lay or a model shot with a point on each item, each linking to its product page. The one pattern fashion catalogues have used for a decade, without a bespoke template.
A room set on a furniture site
Five points on one photograph of a finished room, so the visitor who liked the lamp can find the lamp.
A diagram with its parts named
Points with your own titles and text rather than SKUs, for a product's features or a plan of the shop.
- The picture and its alternative text
- Plus an optional heading above it.
- Marker style
- A pulsing dot or a counted number — and an accent colour for both.
- The position of every point
- By dragging it or by typing two percentages.
- Per point
- A product SKU, or a title, text, link, link label and a picture of your own.
- The Advanced tab on a point dresses its bubble
- Which is the box you actually see.
Shown in the demo store
Five points on a scene, all closed.
Numbered markers in an accent colour on a tall picture.
Native and honest
Your content is written in Magento's own format
This element needs the module on the storefront for the product half, and that is the honest version. A point's name and price are read from the catalogue at every page view rather than stored — so with the module removed the product reference renders as nothing and the bubble falls back to the words you typed under it. That fallback is done by the stylesheet, with no script involved, which is why it is as reliable as the page itself.
With the module gone entirely, what is left is the heading, the picture with its alternative text, and a readable list of what is in it: every point as a list item with its title, text and link. No markers are left behind, because they are stored hidden and a browser honours that on its own — so there are no dead buttons anywhere.
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 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.
Product Spotlight
One product from your catalogue, with your own words between its name and its price.
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.