Theme compatibility

FutiStockBadge modifies the storefront through a single, targeted Twig override.

sw_extends on badges.html.twig

The plugin extends, via sw_extends, the file @Storefront/storefront/component/product/card/badges.html.twig and overrides two blocks within it: component_product_badges_discount and component_product_badges_new. All other blocks in the file remain unchanged and are output normally via parent() inheritance.

What happens if a theme overrides the same file

If your theme or another plugin also overrides the same file (badges.html.twig), Shopware's plugin/theme load priority determines which override takes effect first in the templating tree:

• As a general rule: extensions loaded later can override extensions loaded earlier via the sw_extends chain; blocks from different extensions remain additive as long as they use different block names.
• If another extension completely overrides the same block name (component_product_badges_discount or component_product_badges_new) instead of extending it via parent(), it can suppress or replace FutiStockBadge's output.

Conflict symptoms

• The low stock or discount badge doesn't appear at all, even though the settings are correct
• A duplicate badge appears (two plugins independently append content to the same parent() call)
• Changes to the plugin configuration show no effect in the storefront

In this case, check whether a theme or another plugin also overrides badges.html.twig, and adjust the load order or the affected theme code if needed. See Troubleshooting for more details on debugging.

CSS class for custom styling

The low stock badge carries the class futi-badge-lowstock in addition to the standard badge class:

<span class="badge futi-badge-lowstock" style="background-color: #e2650c; color: #fff;">
  Nur noch 3
</span>

If you want to adjust the badge's appearance to match your theme (e.g. font size, padding, border radius), you can target it with your own CSS via the futi-badge-lowstock class without touching the Twig override itself.

Inline style and specificity

The configured background color (lowStockColor) and the white text color are set as an inline style directly on the element. Inline styles carry very high CSS specificity and override regular class selectors from your theme stylesheet. If you want to control the color via theme CSS instead of the plugin setting, you would need to either use !important or set the color directly via the plugin configuration — the latter is the recommended approach, see Configuration.