Skip to content

category_tile

The category_tile renders a visual tile for a category, including its name, image, and product count. It supports custom alignment, heading levels, and accessibility features. The macro is used to display subcategories in modules like visual_subcategories.

Input parameters

category

category Category object represents a single category.

options

object represents an object of category tile attributes

Parameter Type Description
options.namePosition string Position of the name relative to the image ("under" or default).
options.nameAlignment string Alignment of the name ("left", "center", "right").
options.shouldDisplayNumberOfProducts number If set to 1, displays the number of products in the subcategory.
options.shouldShortenLongNames number If set to 1, long names are clamped.
options.levelHeader number Heading level for accessibility (e.g., 2 for

).
options.hasParentHeading boolean If true and levelHeader > 6, uses a div with aria-level for heading.

Example

In this example we render a list of subcategories on a given category view. This example is a simplifed version taken from the visual_subcategories module.

{% from "@macros/category_tile.twig" import category_tile %}

{% if category_id %}
    {% set activeCategory = ObjectApi.getCategory(category_id) %}

    {% set subcategoriesToDisplay = activeCategory.subcategories %}
{% endif %}

{% for subcategory in subcategoriesToDisplay %}
    {{ category_tile(
        subcategory,
        {
            namePosition: 'under',
            nameAlignment: 'left',
            shouldDisplayNumberOfProducts: true,
            shouldShortenLongNames: false,
            levelHeader: 'h2',
            hasParentHeading: true
        })
    }}
{% endfor %}

Accessibility

  • Uses ARIA labels for links and headings.
  • Supports heading levels and visually hidden headings for screen readers.

Modules reference

Used styles