From theme version 4.3.0, you can use the category listing element to edit the experience worlds - exclusively for the Pro version of the themes on Shopware self-managed systems.
Last updated
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".
Element settings
There are a lot of settings to configure the elements layout.
Content
Content settings of the category listing element.
Custom entry point (optional)
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.
CSS classes
Add custom CSS classes for custom styling. Multiple classes can be added by separating them with a space. No dots before class names.
Basic settings
The basic settings specifies the appearance and style of each category listing item.
Layout
Choose between different layout types of your category listing.
Image + text | Image | Text
Gutter (in px)
Defines the space between the items.
Category per row
Define the number of items per row for each viewport.
Slider (per viewport)
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.
Styling
Background
Background color of the category listing item.
Border
Border around the category listing item.
Paddings (px)
Add inner spacings of the category listing item. The background color will be visible around the category image.
Border radius
Add a border radius for the edges of the category listing item. Be aware that the image could have an individual border radius, too.
Mouse-Over effect | Mouse-Out effect
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.
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.
Typography
Font-family
Choose between the general text font-family or the headline font-family.
Text alignment
Defines the horizontal alignment of the text - mostly visible if you set a min-width (px, %) for the text element.
Font-size
The font-size of the text-element. The font size is scaled with the viewport size and may appear smaller on smaller screens.
Font-weight
Defines the font-weight of the text. Make sure to only use font styles that use the font you are using.
If font styles are retrieved that the font does not deliver, browsers use the approximatuin method.
Text element
Color
The text color of the text element.
Background
The background of the text element.
Also note the alpha channel field in the color picker to create partially transparent backgrounds.
Background blur (px)
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:
Position
Defines if the text-element is over the image or next to the image.
This option is only available if the Layout type is set to Image + text.
Horizontal align
The Horizontal alignment in conjunction with the Vertical alignment determines the basic placement of the contents on the image.
Vertical align
The Vertical alignment in conjunction with the Horizontal alignment determines the basic placement of the contents on the image.
Min width (px, %)
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.
Max width (px, %)
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.
Advanced settings
Paddings (px)
Determines the inner spacings in the text element container and is mainly noticeable when a background color has been set for this container.
Margins (px, %)
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.
Border radius
Sets an border-radius for the text element container.
Be aware that this is only visible if a background color has been defined.
Text hover
Defines a little hover animation for the text element. Choose between None | Show arrow | Arrow animation.
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.
Display mode
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.
Minimum height
It specifies the minimum height of the element.
Image alignment
Horizontal image align
Specifies the horizontal alignment of the image within the element's box.
Vertical image align
Specifies the vertical alignment of the image within the element's box.
Advanced settings
Overlay background image with color
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.
Border radius
Specify a individual border radius to the image.
Be ware that the entire item could have a border radius, too.
Image hover
Gives you the option to apply a small hover effect to the element.
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.
In the media selection Category listing media, you can define an alternative image or video for the category listing.
In addition you can set the overlay as gradient to transparent and if active, chose an angle for this gradient.
Example:
