Deutsche Version

Back to overview

Storefront

When the message appears

On category pages the plugin replaces the message Shopware shows when a product listing is empty. If a message is set for the category (or, through inheritance, for a parent category), it appears instead of the default message. Without a message, the default Shopware message stays unchanged.

HTML structure

<div class="mmd-empty-category-message your-class">
    <div class="mmd-empty-category-image-wrapper mmd-empty-category-image-wrapper--align-center">
        <img class="mmd-empty-category-image mmd-empty-category-image--size-medium" ...>
    </div>
    <div class="mmd-empty-category-text mmd-empty-category-text--align-center">
        Your message
    </div>
</div>

The image area only appears when an image is set.

CSS classes

The value of the CSS classes field is sanitized: only letters, digits, hyphens, underscores and spaces are kept.

Image

• The image is output with the URL from the media manager.
• The alt text reads "No products in {category name}" (snippet mmd.emptyCategory.imageAlt).
• The image carries width and height attributes with the value of the selected size, plus loading="eager" and fetchpriority="high".

CSP compatibility

The plugin uses no inline styles. Layout and alignment run entirely through CSS classes, so strict style-src Content Security Policy rules cause no problems.

Custom styling

Add this to your theme's SCSS:

.mmd-empty-category-message {
    padding: 2rem;
    background: #f8f9fa;
    border-radius: 8px;

    .mmd-empty-category-image {
        margin-bottom: 1rem;
    }

    .mmd-empty-category-text {
        color: #666;

        h3 {
            color: #333;
            margin-bottom: 0.5rem;
        }
    }
}

Languages

The image alt text is available as a snippet in German (de-DE) and English (en-GB). The message itself is a custom field of the category and is maintained by you.