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.
<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.
| Class | Variants | Description |
|---|---|---|
mmd-empty-category-message |
Outer container, additionally carries your CSS classes from the CSS classes field | |
mmd-empty-category-image-wrapper--align-{value} |
left, center, right |
Image alignment |
mmd-empty-category-image--size-{value} |
small (150px), medium (250px), large (400px) |
Image width, capped at 100% of the available width |
mmd-empty-category-text--align-{value} |
left, center, right |
Text alignment |
The value of the CSS classes field is sanitized: only letters, digits, hyphens, underscores and spaces are kept.
mmd.emptyCategory.imageAlt).width and height attributes with the value of the selected size, plus loading="eager" and fetchpriority="high".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.
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;
}
}
}
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.