Konfiguration — Mobile App-Navigation¶
Die Konfiguration läuft pro Verkaufskanal über die Standard-Plugin-Konfiguration.
Konfiguration öffnen¶
- Erweiterungen → Meine Erweiterungen → Apps
- Bei „Kommora Mobile App Navigation" auf das Drei-Punkte-Menü → Konfigurieren
- Oben rechts den Verkaufskanal auswählen (oder „Alle Verkaufskanäle" für globale Defaults)
Karte: Allgemein¶
| Feld | Standard | Bedeutung |
|---|---|---|
| Sichtbar bis Breakpoint | Smartphones & kleine Tablets (< 768px) |
Bis zu welcher Bildschirmbreite die Bar sichtbar ist (sm = 576px, md = 768px, lg = 992px) |
| Theme-Farben verwenden | aus | Wenn an, übernimmt die Bar die Farben deines Storefront-Themes statt der unten konfigurierten Color-Picker-Werte |
Karte: Header auf Mobile reduzieren¶
Vermeidet Doppelungen zwischen der Bottom-Bar und dem klassischen Storefront-Header.
| Feld | Standard | Bedeutung |
|---|---|---|
| Konto-Icon im Header auf Mobile ausblenden | an | Versteckt das Konto-Icon im Header (Pendant ist in der Bar) |
| Warenkorb-Icon im Header auf Mobile ausblenden | an | Versteckt das Warenkorb-Icon im Header |
| Such-Icon im Header auf Mobile ausblenden | an | Versteckt das Such-Icon — empfehlenswert nur, wenn der Such-Button in der Bar aktiv ist |
| Menü-Button (Hamburger) im Header auf Mobile ausblenden | an | Versteckt den Hamburger — empfehlenswert nur, wenn der Kategorien-Button in der Bar aktiv ist |
Karte: Farben¶
| Feld | Standard | Bedeutung |
|---|---|---|
| Hintergrundfarbe der Leiste | #ffffff |
Farbe der Bar selbst |
| Icon-Farbe (inaktiv) | #5a6e84 |
Standard-Farbe der Icons |
| Icon-Farbe (aktiver Tab) | #0a233f |
Farbe des Icons der aktuellen Page (z. B. wenn auf Konto-Page → Konto-Icon) |
| Badge-Hintergrundfarbe (Cart/Wunschliste) | #e74c3c |
Farbe des kleinen Zähler-Badges |
| Badge-Textfarbe | #ffffff |
Schriftfarbe im Badge |
Theme-Farben automatisch übernehmen
Wenn du „Theme-Farben verwenden" anschaltest, werden alle Color-Picker-Werte in der Bar ignoriert und stattdessen die CSS-Variablen deines Storefront-Themes verwendet. Praktisch, wenn du Branding-Konsistenz willst.
Karte: Buttons¶
Bis zu 6 konfigurierbare Buttons kannst du einzeln aktivieren/deaktivieren:
| Feld | Standard | Bedeutung |
|---|---|---|
| Startseite anzeigen | an | Home-Icon → führt zur Storefront-Startseite |
| Kategorien (Off-Canvas-Menü) anzeigen | an | Hamburger-Icon → öffnet das Standard-Shopware-Off-Canvas-Menü |
| Suche anzeigen | aus | Lupen-Icon → öffnet die Standard-Such-Collapse |
| Wunschliste anzeigen | an | Herz-Icon → führt zur Wunschliste (mit Live-Item-Counter) |
| Konto anzeigen | an | Personen-Icon → eingeloggt: Popup mit „Mein Konto" + „Abmelden", ausgeloggt: Login-Page |
| Warenkorb anzeigen (mit Live-Badge) | an | Cart-Icon mit Live-Counter (Pulse-Animation bei neuen Items) |
| Dynamischer „In den Warenkorb"-Button auf Produkt-Detailseiten | an | Auf PDPs wird der Warenkorb-Button zum direkten „Kaufen"-Button |
Karte: Eigene Icons (optional)¶
Pro Button kannst du im Media-Manager ein eigenes Icon hochladen (24×24 px empfohlen, SVG oder PNG mit transparentem Hintergrund). Wenn keines hochgeladen ist, wird das mitgelieferte Default-SVG verwendet.
| Feld | Bedeutung |
|---|---|
| Icon Startseite | Eigenes Home-Icon |
| Icon Kategorien | Eigenes Kategorien-Icon |
| Icon Suche | Eigenes Such-Icon |
| Icon Wunschliste | Eigenes Wunschlisten-Icon |
| Icon Konto | Eigenes Konto-Icon |
| Icon Warenkorb | Eigenes Warenkorb-Icon |
Speichern¶
Oben rechts auf Speichern. Die Storefront übernimmt die Konfiguration sofort (kein theme:compile nötig, da die Bar ein eigener Twig-Block mit Inline-Style-Variablen ist).
Mehrere Sales-Channels
Wenn du verschiedene Konfigurationen pro Verkaufskanal willst (z. B. unterschiedliche Farben oder Buttons je B2B/B2C-Channel), wechsle einfach oben den Verkaufskanal im Plugin-Konfigurations-Header und passe die Werte an. Felder, die du nicht überschreibst, erben den globalen Default-Wert.
Nächster Schritt¶
→ Troubleshooting — häufige Fragen und Lösungen.