Erste Schritte nach der Installation
Nach der Installation sind ein paar grundlegende Konfigurationen empfehlenswert. Diese Checkliste führt dich durch die wichtigsten Schritte, damit dein Shop produktionsbereit ist.
1. Theme-Konfiguration öffnen
Im Shopware-Admin: Inhalte → Themes → Guppy Theme → Konfigurieren.
Die Konfiguration ist in folgende Tabs gegliedert:
| Tab | Inhalt |
|---|---|
| Layout | Container-Breiten, Section-Padding, Sidebar-Verhalten |
| Header | Header-Variante, USP-Banner, Logo-Position |
| Footer | Spaltenanzahl, Newsletter-Block, Payment-/Shipping-Logos |
| USP | USP-Bar (Toggle, Farben, Texte, Social-Links) |
| Login | Login-/Register-Box-Verhalten |
| Checkout | Checkout-Layout, 3-Step-Progress, Trust-Elemente |
| Guppy Cards | Card-Komponenten der Detailseite |
| Productcard | Listing-/Slider-Produktkarten |
| Detailpage | Buybox-Styling, Produktbilder, Slider |
| Button | Button-Farben, Sizes, Outline-Toggles |
| Badges | Neu-/Top-Seller-/Discount-Badges |
| Alerts | Hintergrund- und Textfarbe pro Alert-Typ |
Vollständige Feldreferenz: Konfigurationsschema.
2. Layout-Varianten wählen
Die typischen Empfehlungen für ein Standard-Setup:
- Header-Variante: Guppy Standard (kompakt, optimiert).
- Footer-Variante: Guppy Standard (mehrspaltig, Newsletter, Payment-Logos).
- Produktkarten: Guppy Standard (barrierefrei, optimiertes Markup).
Header und Footer im Detail
Mehr zu Layout-Varianten in Header, Footer und Navigation.
3. Marken-Farben setzen
In den Tabs Layout / Header / Button:
- Primärfarbe: Default
#215AFF. - Sekundärfarbe: Default
#0B1845. - Border-/Background-Farben: feinere Anpassung im jeweiligen Komponenten-Tab.
Vollständiges Farbsystem
Brand-, System- und Status-Farben sind in Farben dokumentiert. Für Code-nahe Details siehe Theme-Variablen.
4. Logo und Favicon zuweisen
- Inhalte → Medien öffnen, Logo (SVG empfohlen) und Favicon hochladen.
- Verkaufskanäle → Storefront → Theme auswählen.
- Logo-Slots zuweisen: Desktop, Tablet, Mobile, Favicon, Share-Image.
- Speichern.
Logo-Empfehlungen
SVG mit max. 22 px Höhe für die Header-Variante Guppy Standard. Für Theme-Builder-Output gelten dieselben Empfehlungen, siehe Theme Builder Konfiguration.
5. Cache leeren und Theme kompilieren
Nach jeder Änderung der Theme-Konfiguration:
bin/console theme:compile
bin/console cache:clear6. Empfohlene Plugins ergänzen (optional)
Für die meisten Stores sinnvoll:
- DmfGuppyEmotionworldElements: 12 CMS-Elemente.
- DmfDropdownNavigation: barrierefreie Navigation.
- DmfGuppyCheckoutEnhancements: Checkout-UX.
- DmfCmsImportExport: Inhalte zwischen Stage und Prod migrieren.
Schnell-Installation aller empfohlenen Plugins:
bin/console guppy:install:pluginsVollständige Empfehlungen mit drei Setup-Stufen: Empfohlene Plugins.
7. Storefront testen
- Frontend besuchen, Layout, Header, Footer prüfen.
- Tab-Navigation testen, alle interaktiven Elemente erreichbar?
- Mobile-Ansicht prüfen (Browser-DevTools).
- Checkout-Flow durchlaufen (Cart → Login/Guest → Bestellabschluss).
8. Eigenes Brand-Theme generieren (optional)
Eigene Anpassungen gehören in ein Child-Theme, niemals direkt in DmfGuppyTheme.
Schneller Weg: Theme Builder: generiert ein installierfertiges Plugin-ZIP.
Manueller Weg: Child Theme manuell entwickeln.
Checkliste
- [ ] Theme der Sales-Channel zugeordnet (
bin/console theme:change) - [ ]
theme:compileausgeführt - [ ] Header-/Footer-/Productcard-Variante gewählt
- [ ] Brand-Farben gesetzt
- [ ] Logo, Favicon, Share-Image zugewiesen
- [ ] Empfohlene Plugins installiert
- [ ] Cache geleert
- [ ] Storefront getestet (Desktop + Mobile)
- [ ] Optional: Child-Theme via Theme Builder generiert