> For the complete documentation index, see [llms.txt](https://themedocs.zenit.design/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://themedocs.zenit.design/en/content/shopping-experiences/blocks/category/category-listing.md).

# Category listing

With the category listing element you can list the subcategories as tiles in your category page. To display a category listing, there are already five preconfigured blocks with the category listing element available in the block category "Category".

<figure><img src="/files/y3273pqGxQfxiuRf7xgf" alt=""><figcaption></figcaption></figure>

## Element settings

There are a lot of settings to configure the elements layout.

### Content

Content settings of the category listing element.

<figure><img src="/files/ZbU9d3gr06FhJvZ1o2h6" alt=""><figcaption></figcaption></figure>

<details>

<summary>Custom entry point (optional)</summary>

Choose an individual entry point for the element - this is particularly useful if you want to display a certain category structure, for example on the homepage. It is also possible to chose multiple entry points which will then get merged together to show a wider category selection.

{% hint style="warning" %}
**Note:** The selected entry point must be part of a navigation (main navigation, footer navigation, or service navigation). However, you can hide the chosen entry point category from the navigation by using the settings in the category. This way, it will not appear in your menus but will still be displayed as a category listing.
{% endhint %}

</details>

<details>

<summary>Custom categories (optional)</summary>

Instead of using a existing category structure from your category tree you can also select each category one by one.

</details>

<details>

<summary>CSS classes</summary>

Add custom CSS classes for custom styling. Multiple classes can be added by separating them with a space. No dots before class names.

</details>

### Basic settings

The basic settings specifies the appearance and style of each category listing item.

<figure><img src="/files/tqje6QZjXG0N4YwOAyEf" alt=""><figcaption></figcaption></figure>

<details>

<summary>Layout</summary>

Choose between different layout types of your category listing. \
`Image + text` | `Image` | `Text`

</details>

<details>

<summary>Gutter (in px)</summary>

Defines the space between the items.

</details>

<details>

<summary>Category per row</summary>

Define the number of items per row for each viewport.

</details>

<details>

<summary>Slider (per viewport)</summary>

On mobile devices, listing categories can take up a lot of vertical space. To avoid this, you can configure the viewport to display the category listing as a slider. The number of categories per row determines the number of categories visible simultaneously.\
\
**Tip:** You can also enter decimal numbers for **categories per row** so that the slider partially displays the next tiles. This suggests to the customer that there are more.

</details>

<details>

<summary>Show hidden categories</summary>

Determines whether categories hidden from navigation are shown in the category listing.

</details>

#### Styling

<details>

<summary>Background</summary>

Background color of the category listing item.

</details>

<details>

<summary>Border</summary>

Border around the category listing item.

</details>

<details>

<summary>Paddings (px)</summary>

Add inner spacings of the category listing item. The background color will be visible around the category image.

</details>

<details>

<summary>Border radius</summary>

Add a border radius for the edges of the category listing item. Be aware that the image could have an individual border radius, too.

</details>

<details>

<summary>Mouse-Over effect | Mouse-Out effect</summary>

Various **Mouse-Over** and **Mouse-Out effects** let you control the visibility of the content on the category element. For example, the content can only become visible when the mouse is over or disappear when the mouse is moved over the image, so that the image becomes completely visible.

</details>

### Text settings

The text settings specifies the appearance and style of the text over or next to the image. This tab is only available if you set content > layout option to `Image + text` or `text`.

<figure><img src="/files/pfKA8vGPKtkZfMmRn5Q7" alt=""><figcaption></figcaption></figure>

#### Typography

<details>

<summary>Font-family</summary>

Choose between the general text font-family or the headline font-family.

</details>

<details>

<summary>Text alignment</summary>

Defines the horizontal alignment of the text - mostly visible if you set a **min-width (px, %)** for the text element.

</details>

<details>

<summary>Font-size</summary>

The font-size of the text-element. The font size is scaled with the viewport size and may appear smaller on smaller screens.

</details>

<details>

<summary>Font-weight</summary>

Defines the font-weight of the text. Make sure to only use font styles that use the font you are using.&#x20;

*If font styles are retrieved that the font does not deliver, browsers use the* [*approximatuin method*](https://developer.mozilla.org/de/docs/Web/CSS/font-weight#n%C3%A4herungsverfahren)*.*

</details>

#### Text element

<details>

<summary>Color</summary>

The text color of the text element.

</details>

<details>

<summary>Background</summary>

The background of the text element.&#x20;

*Also note the alpha channel field in the color picker to create partially transparent backgrounds.*

</details>

<details>

<summary>Background blur (px)</summary>

With **Background blur** everything behind the text element can be blurred with the entered value in pixels. The effect is only visible if a transparent or partially transparent background color was selected using the color picker.\
\
Example:&#x20;

<img src="/files/zd0PfJNoEgrFzoTQCHgL" alt="" data-size="original">

</details>

<details>

<summary>Position</summary>

Defines if the text-element is over the image or next to the image. &#x20;

*This option is only available if the **Layout** type is set to `Image + text`.*

</details>

<details>

<summary>Horizontal align</summary>

The **Horizontal alignment** in conjunction with the **Vertical alignment** determines the basic placement of the contents on the image.

</details>

<details>

<summary>Vertical align</summary>

The **Vertical alignment** in conjunction with the **Horizontal alignment** determines the basic placement of the contents on the image.

</details>

<details>

<summary>Min width (px, %)</summary>

The minimal width determines how wide the text element should be. \
\
*This setting, in conjunction with the Max width (px, %), creates a dynamic width between minimum and maximum width.*

</details>

<details>

<summary>Max width (px, %)</summary>

The Max width (px, %) determines how wide the text element can be at least. \
\
*This setting, in conjunction with the Min width (px, %), creates a dynamic width between minimum and maximum width.*

</details>

#### Advanced settings

<details>

<summary>Paddings (px)</summary>

Determines the inner spacings in the text element container and is mainly noticeable when a background color has been set for this container.

</details>

<details>

<summary>Margins (px, %)</summary>

Ensures that the text element container does not stick to the edge of the image and also determines the exact positioning depending on the vertical and horizontal alignments.

</details>

<details>

<summary>Border radius</summary>

Sets an border-radius for the text element container.&#x20;

*Be aware that this is only visible if a background color has been defined.*

</details>

<details>

<summary>Text hover</summary>

Defines a little hover animation for the text element. Choose between `None` | `Show arrow` | `Arrow animation`.

</details>

### Image settings

The image settings specifies the appearance and style of category image. This tab is only available if you set content > layout option to `Image + text` or `image`.

<figure><img src="/files/Uamkgnt6UtFa9O3AYio0" alt=""><figcaption></figcaption></figure>

<details>

<summary>Display mode</summary>

With the **Display mode** setting you decide how the image should be displayed:

* **Cover/Cropped:** The element is completely filled with the image. In the case of smaller images, this causes them to be stretched (and therefore appear blurry). Images with an inappropriate aspect ratio will have the longer side cut off, meaning the full image will not be displayed.
* **Contain/Fixed height:** The image is stretched and fitted to the size of the box. It will not be cut here.

</details>

<details>

<summary>Minimum height</summary>

It specifies the minimum height of the element.

</details>

### Image alignment

<details>

<summary>Horizontal image align</summary>

Specifies the horizontal alignment of the image within the element's box.

</details>

<details>

<summary>Vertical image align</summary>

Specifies the vertical alignment of the image within the element's box.

</details>

### Advanced settings

<details>

<summary>Overlay background image with color</summary>

Using the **Overlay background image with color** option, you can tone down the category  image as desired with a partially transparent color and thus make the text more readable.

In addition you can set the overlay as gradient to transparent and if active, chose an angle for this gradient. \
\
Example:\
![](/files/okVKTQpxXuXHURzKHDgC)

</details>

<details>

<summary>Border radius</summary>

Specify a individual border radius to the image.&#x20;

*Be ware that the entire item could have a border radius, too.*

</details>

<details>

<summary>Image hover</summary>

Gives you the option to apply a small hover effect to the element.

</details>

## Alternate image

Categories of the type `Link` do not have their own category display image in Shopware. You can also use this additional field to implement an alternative image for the category listing if the general display image of the category is not suitable.

<figure><img src="/files/dgYKKtEPBtKGG4wxTkSS" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/yHkPlZo8ETnPYjairw1l" alt=""><figcaption></figcaption></figure>

In the media selection **Category listing media**, you can define an alternative image or video for the category listing.