Conversion and UX

How to display subcategories as image tiles on PrestaShop

On a mid-level category, the visitor arrives with an intention that is still broad. They are not looking for a specific product, they want to know what the section contains. A list of text links answers that badly, a grid of image tiles answers it well.

What the default theme does

Native behaviour varies between themes. The most common: a text list of subcategories, sometimes with a small thumbnail, placed above or below the product grid.

Three limits.

The visuals are absent or tiny, which makes them useless for orientation.

The position is fixed, usually under the category description, where few visitors look on mobile.

And above all, on many themes, the list disappears as soon as there are products in the current category, which is the most frequent case.

Where to place the block

The answer depends on the level of the category, and that is what decides effectiveness.

On a top-level category, with no products of its own or very few, the tiles fill the whole page. This is the ideal case: the page becomes a visual choice between sub-sections.

On an intermediate category that contains both subcategories and products, the tiles go above the product grid, on one or two rows at most. The visitor first sees the possible paths, then the products if they prefer to browse.

On a leaf category, with no subcategory, the block has no reason to exist. Some implementations show sibling categories there, which is a different function and deserves separate treatment, rather at the bottom of the page.

Visual Category Page: Subcategories as Image Tiles (Category Wall)Category pages that make people want to click, not just a bullet list.89.00

Choosing the visuals

This is the point that decides the result, more than the technique.

Consistency beats beauty. Twelve tiles of which eight are cut-out product shots and four are lifestyle photos produce a messy grid. Pick one approach and hold it across the whole shop.

Product shot or usage shot? On a technical catalogue, the product shot is more legible: the visitor immediately recognises what it is. On homeware, textiles or food, the usage shot sells better.

The format must be uniform. A single ratio applied to every tile, with automatic centred cropping. Images with different proportions break the grid.

The text must stay readable. If the label overlays the image, plan a scrim or a semi-opaque background. A white title on a light photo is unreadable, and contrast is an accessibility criterion, not an aesthetic preference.

How many tiles, and in what order

Between four and twelve. Below four, a text list is enough. Beyond twelve, the grid becomes a catalogue in itself and the visitor stops choosing.

If you have twenty subcategories, two options: regroup them in the tree, or show only the main ones as tiles with a “see all categories” link.

For ordering, use the position defined in the back office rather than alphabetical order. Put what sells first, not what starts with A.

Accessibility

Two rules often missed on this kind of block.

The link must carry a readable label. A tile that is nothing but a clickable image, with no alternative text, is an empty link for a screen reader. The category name must be real text, not part of the image.

The clickable area must cover the whole tile, not just the title. It is also a matter of touch comfort.

The category with no products of its own

A top-level category containing only subcategories raises an SEO question.

With neither products nor content, the page is thin and ranks poorly, even though it often carries the most searched generic query of its section.

Three elements make it useful: the subcategory tiles, an introduction of 150 to 300 words explaining what the section brings together, and possibly a selection of flagship products drawn from the subcategories.

That last point is the most commercially effective: it gives the page merchandising content while preserving its orientation role.

Measuring

Two indicators are enough.

The click-through rate to subcategories from the parent page, before and after. That is the direct expected effect.

The bounce rate of the parent page, which should fall. A top-level page with a high bounce rate signals that the visitor found no obvious path.

A third figure is worth watching on large catalogues: average session depth from those pages. If it rises, your navigation is working better.

The Visual Category Page module for PrestaShop sets up this block on PrestaShop 8 and 9: subcategories as image tiles in a uniform format, configurable position per category level, display preserved even when the category contains products, and text labels for accessibility.

Keep reading

Related articles