Erscheinungsbild
Theme-Integration
In den meisten Fällen funktioniert das Plugin out-of-the-box mit Ihrem Theme — kein Eingriff in SCSS oder Twig nötig. Die Plugin-Einstellungen (Badge-Styling) decken alle gängigen Anpassungswünsche ab.
Diese Seite ist relevant, wenn:
- Sie ein spezielles Marketplace-Theme einsetzen, das das Plugin-Badge nicht zeigt.
- Sie als Theme-Entwickler tiefer in die Plugin-Stile eingreifen wollen.
Theme-Kompatibilitätsmatrix
Stand 2026-05. „✅ OK" = Plugin funktioniert ohne Anpassung. „⚠️ Drop-in" = Theme-Autor muss eine Code-Zeile einbinden (siehe unten).
| Theme | PDP-Galerie | Listing-Karten | Cart / Line-Items | Search-Suggest |
|---|---|---|---|---|
| Shopware-Default-Storefront | ✅ OK | ✅ OK | ✅ OK | ✅ OK |
| Indigo7BoutiqueTheme (v1.9+) | ✅ OK (Theme-Integration) | ✅ OK | ✅ OK | ✅ OK |
| Indigo7BoutiqueTheme (< v1.9) | ⚠️ Drop-in | ✅ OK | ✅ OK | ✅ OK |
| zenitPlatformHorizon (HORIZON Pro) | ⚠️ Drop-in | ✅ OK | ✅ OK | — neutral |
| AtlKatanaTheme (KATANA. Theme) | ✅ OK | ⚠️ Drop-in | ✅ OK | — neutral |
Ihr Theme ist nicht aufgelistet?
Die meisten Themes folgen der Shopware-Standard-Block-Struktur und funktionieren OK. Falls Sie auf einem nicht gelisteten Theme das Badge nicht sehen: testen Sie zunächst mit dem Default-Storefront-Theme — funktioniert es dort, liegt es am Theme. Kontakt: ms@indigo7.de.
Wenn das Badge fehlt: Drop-in-Lösung
Drei strukturelle Pattern brechen die Plugin-Override-Kette — die technische Erklärung würde diese Seite überfrachten. Kurz: das Theme ersetzt eine Twig-Stelle, an die das Plugin hooked, ohne den Hook beizubehalten.
Lösung für Merchant: Bitten Sie Ihren Theme-Entwickler, an der jeweils betroffenen Render-Stelle den folgenden Twig-Snippet einzubinden:
twig
{% if isPluginActive('Indigo7AiLabel') %}
{% sw_include '@Indigo7AiLabel/storefront/component/ai-badge.html.twig' with {
media: media,
mode: 'full'
} %}
{% endif %}Voll-Dokumentation (Twig-Pfade, isPluginActive-Helper-Registrierung) für Theme-Entwickler steht in der versions-stabilen HANDBUCH.md §5 im Plugin-Repository.
CSS-Variablen (für Theme-Entwickler)
Wenn Sie die Plugin-Einstellungen nicht nutzen wollen und stattdessen über Ihre Theme-SCSS Badge-Stile zentral verwalten, exponiert das Plugin die folgenden Custom Properties:
scss
:root {
--i7-ai-badge-bg: rgba(0, 0, 0, 0.7);
--i7-ai-badge-fg: #fff;
--i7-ai-badge-radius: 999px;
--i7-ai-badge-font-size: 0.75rem;
--i7-ai-badge-padding-x: 0.5rem;
--i7-ai-badge-padding-y: 0.25rem;
--i7-ai-badge-z: 5;
--i7-ai-badge-compact-size: 22px;
}Reihenfolge der Stile
Die Plugin-Einstellungen werden im Storefront-<head> als inline-<style> gerendert. Theme-SCSS-Stile, die später kommen, gewinnen durch CSS-Spezifität — also: Plugin-Einstellungen sind ein Fallback, Ihre Theme-SCSS gewinnt.
Geplant: theme-agnostischer JS-Fallback (Roadmap v1.1)
Mit Phase 2.D (Roadmap) erübrigen sich die Drop-in-Pattern oben — ein storefront-seitiges JS-Plugin injiziert das Badge unabhängig von der Theme-Override-Kette.