Zenit Design - Themes
Buy themeThemesSupport
EN
EN
  • First steps
  • Start Guides
    • Atmos - Demo 1
    • Atmos - Demo 2
    • Atmos - Demo 3
    • Atmos - Demo 4
    • Gravity - Demo 1
    • Gravity - Demo 2
    • Horizon - Demo 1
    • Horizon - Demo 2
    • Sphere - Demo 1
    • Sphere - Demo 2
    • Stratus - Demo 1
    • Stratus - Demo 2
    • Stratus - Demo 3
    • Stratus - Demo 4
  • Tips
    • Dashboard
    • Theme configuration
    • Dictionary
    • Multiple sales channels
  • Configuration sets
  • Support
    • Read errors
    • Find cause
  • 🎨Styling
    • General
      • Basic layout
      • Product images
      • Produkt Layout-Typ
      • Global background
      • Preloader
      • Accent line
      • Scroll animation
    • Typo & Colors
      • Theme colors
      • Status messages
      • Fonts
      • Typography
      • E-Commerce
      • Buttons
    • Logos
    • Header
      • Header
      • Search
      • Top bar
      • Shop navigation
      • Main navigation
      • Flyout navigation
      • Dropdown navigation
    • Footer
      • Footer
      • Content
      • Columns
      • Columns styling
      • Footer bottom
    • Components
      • Sidebar
      • Sidebar navigation
      • Forms
      • Image & gallery slider
      • Produkt slider
      • Category Listing Slider
      • Pagination
      • Breadcrumbs
      • Cookie banner
      • Offcanvas
      • Backdrop
      • Scroll-Up button
    • Category
      • Category header
      • Hero section
      • Filter
      • Listing actions
      • Product boxes
      • Quickview
    • Product
      • Detail
      • Gallery
      • Description
      • Description navigation
      • Description content
    • Checkout
      • Cart
      • Checkout
  • ⚙️SETTINGS
    • Basic settings
    • Custom field assignment
      • Custom fields for product page details
      • Custom fields for product datasheets
    • Social media icons
    • Marketing text slider
    • Custom tab details page
    • Custom footer columns
    • Custom code
  • 📂Contents
    • Shopping experiences
      • Sections
      • Blocks
        • Elements
          • Image text slider
          • Search banner
          • Text banner
          • Teaser
          • Features
          • Breadcrumbs
          • Code
          • Divider
          • Category-navigation
          • Footer navigation
          • Placeholder
        • Commerce
          • Image gallery and buy box with product name & manufacturer logo
          • Image gallery and buy box with product name & manufacturer logo & description
          • Image gallery and buy box with description
          • Image gallery with description and buy box with product name & manufacturer logo
        • Category
          • Category listing
        • Columns
        • Layouts
      • Block inner spacings
      • Block outer spacings
      • Animations
      • CSS Variables
    • Category
      • Hero section
      • Category header
      • CSS classes
      • Category badges
      • Category Icons
      • Products per row
    • Product page
      • Layouts
      • Default layout
      • Gallery mode
      • Custom tabs
      • Videos tab
      • Datasheets
    • Product images
      • Image sizes
      • Aspect ratio
      • File format
      • Product image background
    • Layout type
    • Responsive tables
    • Multilingualism
  • 🎓Tutorials
    • Demodata import
    • Demo theme configuration import
    • Duplicate Child-Theme
    • Customizations
    • Configuration export/import
    • Custom Fields export/import
    • Embed fonts locally
    • Embed fonts locally with child-theme
  • 🛠️Update Guides
    • Child theme update
    • Shopware 6.6.9.0
    • Shopware 6.6.0.0
    • Shopware 6.5.0.0
    • Theme 3.5.3
    • Theme 2.11.0
  • ❓FAQ
    • Overview
    • Accessibility
      • Typography
      • Colors
      • Images
      • Video
      • Accessibility checker and resources
    • General
      • Copyright notice
      • Wishlist
    • Product layout
    • Licenses
      • Trial version vs full version
      • Changing the licence domain
    • Derivations
      • Child theme
      • Theme duplicate
      • Child theme vs theme duplicate
    • Updates
      • Theme is displayed as incompatible
      • Update is not displayed
    • Known issues
      • Could not assign child-theme
      • Text modules show technical name
      • Theme save error
      • SVG logo is not displayed
      • Search / Input mobile zoom
      • Text is not visible / readable
Powered by GitBook
On this page
  • Element settings
  • Content
  • Basic settings
  • Text settings
  • Image settings
  • Image alignment
  • Advanced settings
  • Alternate image

Was this helpful?

  1. Contents
  2. Shopping experiences
  3. Blocks
  4. Category

Category listing

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 5 months ago

Was this helpful?

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.

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.

If font styles are retrieved that the font does not deliver, browsers use the .

In addition you can set the overlay as gradient to transparent and if active, chose an angle for this gradient. Example:

📂
approximatuin method