Zenit Design - Themes
Theme kaufenThemesSupport
DE
DE
  • Erste Schritte
  • Start Guides
    • Atmos - Demo 1
    • Atmos - Demo 2
    • Atmos - Demo 3
    • Atmos - Demo 4
    • Gravity - Demo 1
    • Gravity - Demo 2
    • Horizon - Demo 1
    • Horizon - Demo 2
    • Sphere - Demo 1
    • Sphere - Demo 2
    • Stratus - Demo 1
    • Stratus - Demo 2
    • Stratus - Demo 3
    • Stratus - Demo 4
  • Tipps
    • Dashboard
    • Theme Konfiguration
    • Lexikon
    • Mehrere Verkaufskanäle
  • Vorlagen
  • Support
    • Error auslesen
    • Ursache finden
  • 🎨Styling
    • Allgemein
      • Grundlayout
      • Produktbilder
      • Produkt Layout-Typ
      • Globales Hintergrundbild
      • Preloader
      • Akzentlinie
      • Scroll Animation
    • Typografie & Farben
      • Theme-Farben
      • Status-Ausgaben
      • Schriftarten
      • Typografie
      • E-Commerce
      • Buttons
    • Logos
    • Header
      • Header
      • Suche
      • Top Bar
      • Shop Navigation
      • Main Navigation
      • Flyout Navigation
      • Dropdown Navigation
    • Footer
      • Footer
      • Inhalte
      • Spalten
      • Spalten Styling
      • Unterer Footer
    • Elemente
      • Sidebar
      • Sidebar Navigation
      • Formulare
      • Bild- & Galerie-Slider
      • Produkt Slider
      • Kategorie Listing Slider
      • Paginierung
      • Breadcrumbs
      • Cookie Banner
      • Offcanvas
      • Backdrop
      • Scroll-Up Button
    • Kategorie
      • Kategorie-Header
      • Hero Sektion
      • Filter
      • Listing Actions
      • Produkt-Boxen
      • Quickview
    • Produkt
      • Details
      • Galerie
      • Beschreibung
      • Beschreibung Navigation
      • Beschreibung Inhalt
    • Kasse
      • Warenkorb
      • Kasse
  • ⚙️Einstellungen
    • Grundeinstellungen
    • Zusatzfeld Zuweisung
      • Zusatzfelder für Details auf der Produktseite
      • Zusatzfelder für Produkt-Datenblätter
    • Social Media Icons
    • Marketing Text Slider
    • Custom Tab Detailseite
    • Custom Spalten (Footer)
    • Eigener Code
  • 📂Inhalte
    • Erlebniswelten
      • Sektionen
      • Blöcke
        • Elemente
          • Bild Text Slider
          • Suche Banner
          • Text Banner
          • Teaser
          • Features
          • Breadcrumbs
          • Code
          • Trenner
          • Kategorie-Navigation
          • Footer-Navigation
          • Platzhalter
        • Commerce
          • Galerie und Buybox mit Produktname & Hersteller-Logo
          • Galerie und Buybox mit Produktname & Hersteller-Logo & Beschreibung
          • Galerie und Buybox mit Beschreibung
          • Galerie mit Beschreibung und Buybox mit Produktname & Hersteller-Logo
        • Kategorie
          • Kategorie Listing
        • Spalten
        • Layouts
      • Block Innen-Abstände
      • Block Außen-Abstände
      • Animation
      • Erlebniswelt Beispiel
      • CSS-Variablen
    • Kategorieseite
      • Hero Sektion
      • Kategorie Header
      • CSS-Klassen
      • Kategorie Labels
      • Kategorie Icons
      • Produkte pro Zeile
    • Produktseite
      • Layouts
      • Standardlayout
      • Galerie Modus
      • Custom Tabs
      • Videos Tab
      • Datenblätter
    • Produktbilder
      • Bildgrößen
      • Bildformat
      • Dateiformat
      • Produktbilder Hintergrund
    • Layout-Typ
    • Responsive Tabellen
    • Mehrsprachigkeit
  • 🎓Tutorials
    • Demodaten importieren
    • Demo-Themekonfiguration importieren
    • Child-Theme duplizieren
    • Individuelle Anpassungen
    • Konfiguration export/import
    • Zusatzfelder export/import
    • Schriften lokal einbinden
    • Schriften lokal einbinden mit Child-Theme
  • 🛠️Update Guides
    • Child-Theme Update
    • Shopware 6.6.9.0
    • Shopware 6.6.0.0
    • Shopware 6.5.0.0
    • Shopware 6.4.8.0
    • Theme 3.5.3
    • Theme 2.11.0
  • ❓FAQ
    • Übersicht
    • Barrierefreiheit
      • Typografie
      • Farben
      • Bilder
      • Video
      • Checker-Tools und Ressourcen
    • Allgemein
      • Copyright-Hinweis
      • Merkzettel
    • Produkt Layout
    • Lizenzen
      • Testversion vs Vollversion
      • Lizenzdomain ändern
    • Ableitungen
      • Child-Theme
      • Theme-Duplikat
      • Child-Theme vs Theme-Duplikat
    • Updates
      • Theme wird als inkompatibel angezeigt
      • Update wird nicht angezeigt
    • Fehler
      • Child-Theme kann nicht zugewiesen werden
      • Textbausteine zeigen technischen Namen
      • Theme Speichern Fehler
      • SVG Logo wird nicht angezeigt
      • Suche / Input mobile Zoom
      • Text ist nicht sichtbar / lesbar
Powered by GitBook
On this page
  • Ein Child Theme anlegen
  • Installation
  • Theme zuweisen
  • Anpassungen vornehmen
  • Aufbau
  • Anleitungen

Was this helpful?

  1. Tutorials

Individuelle Anpassungen

Bei Anpassungen, welche über die Möglichkeiten einer Konfiguration hinausgehen, können unsere Themes natürlich updatesicher individualisiert werden.

Last updated 7 months ago

Was this helpful?

Ein Child Theme anlegen

Mit einem Child-Theme () können individuelle Anpassungen updatesicher implementiert werden.

Du findest auf unserer Website.

Einfacher ist es jedoch, wenn Du dafür unser zum Generieren und Personalisieren des Child-Themes verwendest.

Alternativ kann ein Child-Theme auch manuell wie in der beschrieben, erzeugt werden.

Installation

Wenn Du eines unserer Child-Themes verwendest, kannst Du dieses unter Erweiterungen > Meine Erweiterungen über den Button Erweiterung hochladen hochladen und wie jede andere Erweiterung installieren und aktivieren.

Theme zuweisen

Das Child-Theme muss nun noch dem Verkaufskanal zugewiesen werden.

Anpassungen vornehmen

Nachdem das Child-Theme installiert ist, kann es auch schon losgehen. Navigiere in den Theme-Ordner, dort solltest Du folgende Struktur vorfinden. {MyTheme} steht hier stellvertretend für den gewählten Theme-Namen.

# move into your theme folder
$ cd custom/plugins/{MyTheme}

# structure of theme
├── composer.json
└── src
    ├── MyTheme.php
    └── Resources
        ├── app
        │   └── storefront
        │       ├── dist
        │       │   └── storefront
        │       │       └── js
        │       │           └── my-theme.js
        │       └── src
        │           ├── assets
        │           ├── main.js
        │           └── scss
        │               ├── base.scss
        │               └── overrides.scss
        ├── views
        │   └── storefront
        └── theme.json

Twig-Templates: {Root}/custom/plugin/{MyTheme}/src/Resources/views/storefront/ SCSS: {Root}/custom/plugin/{MyTheme}/src/Resources/app/storefront/src/scss/ Javascript: {Root}/custom/plugin/{MyTheme}/src/Resources/app/storefront/src/script/

Aufbau

Da Original-Dateien niemals bearbeitet oder überschrieben werden dürfen, ist es notwendig in die Struktur der Dateien zu sehen um diese erweitern oder überschreiben zu können.

Den Aufbau unserer Themes als Ableitung der Shopware Storefront findest Du unter:

Twig-Templates: {Root}/custom/plugin/zenitPlatform{Theme}/src/Resources/views/storefront/ SCSS: {Root}/custom/plugin/zenitPlatform{Theme}/src/Resources/app/storefront/src/scss/ Javascript: Root}/custom/plugin/zenitPlatform{Theme}/src/Resources/app/storefront/src/script/

Anleitungen

Für die Bearbeitung von Styles solltest Du dich maßgeblich an die Shopware Doku halten:

Alles Notwendige zum Bearbeiten der Twig-Templates findest Du hier:

Unsere Themes sind Ableitungen des Shopware Default Themes. Den grundlegenden Aufbau findest Du daher im Theme der .

🎓
Shopware Storefront
kostenlose Child-Theme-Vorlagen
kostenloses Plugin
Shopware Doku
Was ist ein Child-Theme?
ThemesShopware Developer
Add SCSS Styling and JavaScript to a ThemeShopware Developer
Customize templatesShopware Developer
Logo
Logo
Logo