Category Tiles

A shop-by-department row whose links stay right

Pictures with names that lead to your categories, products or pages. Each link is picked from your catalogue and looked up by Magento every time the page is shown, so a changed URL key never leaves a tile pointing at a missing page.

See it live

Read the docs

Four square tiles with white names over the pictures

Four square tiles with the names over the pictures.

Shoppers find the department first

A row of pictures under the hero sends a visitor into the right part of the catalogue in one click. The whole tile is the link, so there is no small target to aim for.

Links that survive a renamed URL

A category or a product is chosen from a tree, not pasted as an address. Magento works out the current address on every page view, so renaming a URL key does not break the home page.

Nothing to wire up

Upload a picture, type a name, pick a link. No script runs and nothing needs configuring: the grid, the shapes and the hover effects are all in the stylesheet.

Use cases

Where shops put it

Departments on the home page

Four square tiles with the names over the pictures, each leading to a category. On a phone, two per row.

Collections on a landing page

Three landscape tiles with the names under the pictures and a line such as "From 19 zł" under each, lifting a little under the pointer.

One grid per department inside tabs

Advanced Tabs for Men, Women and Gear, each tab holding its own three tiles, so the shopper chooses the department first.

What you control

Every field in the form, in plain words

Full option reference in the docs →

Two appearances: The name over the picture, on a tint you can colour, or under it.
Tiles per row for each screen size: 2 To 6 on desktop, 2 to 4 on tablet, 1 or 2 on a phone, and the gap between them, down to none.
Five tile shapes: Square, 4:3, 3:2, 16:9 and portrait 3:4. Pictures are cropped to fit, never stretched.
On hover and on keyboard focus: Zoom the picture, lift the tile, or nothing, with the name underlined whichever you choose.
The names: Their alignment, their heading level (H2, H3, H4 or not a heading), and whether the subtitles show.
Per tile: The picture, its alternative text, the name, a subtitle and a link to a category, a product, a CMS page or any address, in the same tab or a new one.

Shown in the demo store

Names under the pictures, one tile lifted under the pointer.

Tall tiles with a navy tint of your own.

Six small tiles meeting in one strip.

Native and honest

Your content is written in Magento's own format

Nothing is read from your catalogue. The pictures and the words are yours, and only the link knows the catalogue: a category or a product is stored as a reference that Magento resolves on every page view. Pictures below the first row load only when the visitor scrolls near them.

Where the promise stops: a tile does not update itself when the catalogue changes. Rename a category or give it a new picture, and the tile keeps the name and the picture you gave it. Only the address follows the catalogue.

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_PageBuilder module enabled
PHP 8.1 to 8.5 — whichever your Magento version supports
No other extension, no external icon font, no CDN dependency