Konfiguration
Der Theme Builder gliedert die Konfiguration in mehrere Bereiche. Diese Seite ist die vollständige Feldreferenz; für eine geführte Tour siehe Erste Schritte.
Metadaten
| Feld | Typ | Pflicht | Default | Beschreibung |
|---|---|---|---|---|
technicalName | String | ja | – | PascalCase, Regex ^[A-Z][A-Za-z0-9]+$. Bestimmt Plugin-Klasse + Verzeichnis. |
label | String | ja | – | Anzeigename des Themes im Admin. |
author | String | ja | – | Wird zu Composer-Vendor-Slug; Fallback custom bei nicht eindeutigem Slug. |
guppyVersion | String | ja | ^2.2 | Composer-Constraint für dmf/sw6-guppy-theme. |
description.de-DE | String | ja | – | Deutsche Plugin-Beschreibung. |
description.en-GB | String | ja | – | Englische Plugin-Beschreibung. |
Theme-Variablen (~176 Felder)
Aufgeteilt in 5 Sub-Tabs:
General
Brand-Farben (Primary, Secondary), Borders, Backgrounds, System-Status (Success/Info/Warning/Danger), Graustufen-Palette.
Typography
Font-Families (Body, Headlines), Größen (h1–h6, Display 1–3), Line-Heights, Textfarbe, Headlines-Farbe, Linkfarben.
UI Components
- Button-Farben/-Sizes
- Input-Borders
- Badge-Farben (Neu/Top-Seller/Discount, mit Outline-Toggles)
- Alert-Hintergründe + Textfarben
Layout
- Container-Breiten (Default/Fluid/Narrow/Wide/Extra-Wide)
- Section-Padding (Desktop/Tablet/Mobile)
- Header-/Navigation-/Footer-Varianten
- Productcard-Konfiguration
- USP-Bar (Toggle, Farben, Texte, Social-Links)
Advanced
Detailpage-Buybox-Styling, Produktbilder, Slider, Lieferstatus-Farben, Order-Item-Status-Farben, Block-Padding.
Bidirektionale Bootstrap-Synchronisation
Felder, die guppyManagedBy: 'sw-*' markiert sind (z. B. font-family-base ↔ sw-font-family-base), bleiben im Bootstrap-Editor read-only und referenzieren das Guppy-Pendant.
Bootstrap-Variablen (~80 Felder)
Direkter Zugriff auf Bootstrap-5-Variablen, gegliedert nach Kategorie:
| Kategorie | Beispiele |
|---|---|
| Colors | primary, secondary, success, info, warning, danger, light, dark, body-color |
| Typography | font-family-base, font-family-sans-serif, font-size-base, font-weight-bold, line-height-base |
| Spacing | spacer, grid-gutter-width |
| Borders | border-radius (default, sm, lg, xl, pill), border-width |
| Shadows | box-shadow (default, sm, lg), enable-shadows Toggle |
| Layout | Container-Breiten, enable-negative-margins, Grid-Breakpoints |
| Components | Button-/Input-/Card-Radii, Link-Decoration, Pagination, Badge-Sizing |
| Feature Flags | enable-rounded, weitere enable-*-Toggles |
Validierung
Der Builder validiert Bootstrap-Feldnamen gegen die bekannten Bootstrap-5-Variablen. Tippfehler werden im UI markiert.
Assets
Fünf Slots, zwei davon Pflicht:
| Slot | Pflicht | Format | Empfohlene Größe | Max | Ziel im Plugin |
|---|---|---|---|---|---|
pluginIcon | ja | PNG | 512 × 512 | 2 MB | src/Resources/config/plugin.png |
themePreview | ja | JPEG/PNG/WebP | 1280 × 720 | 5 MB | src/Resources/app/storefront/dist/assets/theme-preview.jpg |
logo | nein | SVG/PNG/JPEG/WebP | 320 × 120 | 3 MB | befüllt sw-logo-desktop, sw-logo-tablet, sw-logo-mobile |
favicon | nein | ICO/PNG | 64 × 64 | 1 MB | befüllt sw-logo-favicon |
shareImage | nein | SVG/PNG/JPEG/WebP | 512 × 512 | 3 MB | befüllt sw-logo-share |
Fonts
.woff- und .woff2-Dateien hochladen. Pro Familie wird ein Verzeichnis erzeugt:
src/Resources/app/storefront/dist/assets/font/{family-slug}/{filename.woff2}Die @font-face-Regeln landen in src/Resources/app/storefront/src/scss/base/_fonts.scss. Hochgeladene Familien werden anschließend in den Typography-Feldern als Auswahl angeboten.
Pfad-Auflösung
@font-face-Pfade nutzen $app-css-relative-asset-path, sodass die Fonts auch nach Theme-Compile korrekt geladen werden.
Custom-SCSS-Variablen
Name-Wert-Paare, die in abstract/variables/custom.scss mit !default angefügt werden:
$custom-spacer: 12px !default;
$brand-accent: #f49927 !default;Werden vom Child-Theme-SCSS übernommen und können nachträglich überschrieben werden.
Snippets
Übersetzungs-Keys für Storefront-Texte, jeweils in de-DE und en-GB. Werden zu:
src/Resources/snippet/de_DE/storefront.de-DE.json
src/Resources/snippet/en_GB/storefront.en-GB.jsonSpacer-Map
Custom-$spacers-Einträge:
| Feld | Beschreibung |
|---|---|
| Key | numerischer oder benannter Map-Schlüssel |
| Value | CSS-Wert (z. B. 24px, 1.5rem) |
Icon-Mappings
Shopware-Icon-Name ↔ Phosphor-Icon-Konfiguration:
| Feld | Beschreibung |
|---|---|
| Shopware-Name | Standard-Icon-Bezeichner aus Shopware |
| Phosphor-Icon | Ziel-Icon |
| Weight | thin, light, regular, bold, fill, duotone |
| Pack | Phosphor-Pack |
Validierungsregeln
| Regel | Wirkung |
|---|---|
technicalName muss Regex ^[A-Z][A-Za-z0-9]+$ matchen | Pflicht, sonst kein Export. |
technicalName sollte auf Theme enden | Warnung, kein Block. |
Pflicht-Assets (pluginIcon, themePreview) müssen vorhanden sein | Pflicht, sonst kein Export. |
| Asset-Dimensionen werden gegen Empfehlungen geprüft | Info-Hinweis, kein Block. |
| Bootstrap-Variablen-Namen werden gegen Bootstrap-5-Schema validiert | Fehler im UI. |
| Snapshot-Schema-Version wird beim Import migriert | Auto-Migration v0–v7 → v8. |
Snapshot
.guppy-builder.json enthält:
- Alle 176 Theme-Variablen-Werte
- Alle Bootstrap-Variablen
- Asset-Metadaten + Base64-Inhalte
- Font-Dateien (Base64)
- Custom-SCSS-Variablen, Snippets, Spacer-Map, Icon-Mappings
- Schema-Version (aktuell
v8)
Re-Import: Bestehender Snapshot per Load Snapshot in den Builder laden. Das Formular wird vollständig wiederhergestellt.