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
  • 1. Vorlage herunterladen
  • 2. Entpacke die Zip-Datei
  • 3. Anpassungen vornehmen
  • 4. Fertig

Was this helpful?

  1. Tutorials

Child-Theme duplizieren

Möchtest Du ein Child-Theme für mehrere Verkaufskanäle einsetzen, so kannst Du das Child-Theme duplizieren und umbenennen. Im Folgenden zeigen wir Dir, wie das funktioniert.

Last updated 6 months ago

Was this helpful?

Dauer: 5-10 Minuten Schwierigkeitsgrad: Einfach Programmierkenntnisse: Keine Programme: Editor oder Notepad

Ab Theme Version 4.4.0 hast Du die Möglichkeit, Dir über unser kostenfreies Child-Theme-Generator Plugin ein personalisiertes Child-Theme zu generieren und anschließend die gewünschte Demo-Vorlage zu importieren.

1. Vorlage herunterladen

Navigiere dazu in den Bereich Demos (1) und filtere (2) auf den Namen des Themes, welches Du gekauft hast. Über den Vorlage Download (3) Link kannst Du die Zip-Datei herunterladen.

Bitte beachte, dass die in den Demos gezeigten Bilder und Demodaten aus urheberrechtlichen Gründen nicht Bestandteil des Themes und der Vorlagen sind.

Für dieses Beispiel verwenden wir Horizon Vorlage 2

2. Entpacke die Zip-Datei

Entpacke die Zip-Datei auf Deinem Computer. Du erhältst folgende Dateien:

Entpackte Zip zenitPlatformHorizonSet2
└──  (1)
    ├──  (2)
    └── src
        ├──  (3)
        └── Resources
            ├──  (4)
            ├── app
            │   └── storefront
            │       ├── dist
            │       │   ├── assets
            │       │   │   └── ...
            │       │   └── storefront
            │       │       └── js
            │       │           ├──  (5)
            │       │           │   └──  (5)
            │       │           └──  (5)
            │       └── src
            │           └── scss
            │               ├── base.scss
            │               └── overrides.scss
            └── config
                └── ...

3. Anpassungen vornehmen

Es sind kleine Namensänderungen an 5 stellen notwendig. Wir haben in der obigen Abbildung die einzelnen Dateien mit Nummern gekennzeichnet.

Ordnername zenitPlatformHorizonSet2 (1)

Ändere den Ordnernamen in den gewünschten technischen Namen des neuen Themes. Am einfachsten ist es, wenn Du Set2 durch eine beliebige Zeichenfolge ersetzt. In unserem Beispiel wird aus zenitPlatformHorizonSet2 => zenitPlatformHorizonSetBeispiel

Umschreibungen in der composer.json (2)

Öffne die Datei in einem Editor oder Notepad.

  • Zeile 1: zenit/horizon-set-2 → zenit/horizon-set-beispiel

  • Zeile 20: zenit\\PlatformHorizonSet2\\zenitPlatformHorizonSet2 →zenit\\PlatformHorizonSetBeispiel\\zenitPlatformHorizonSetBeispiel

  • Zeile 24-25: Gib Deinem Child-Theme einen Namen

  • Zeile 28-29: Gib Deinem Child-Theme eine Beschreibung

  • Zeile 42: zenit\\PlatformHorizonSet2\\→ zenit\\PlatformHorizonSetBeispiel\\

composer.json
{
    "name": "zenit/horizon-set-2",
    "description": "Theme Horizon by Zenit Design",
    "version": "3.6.5",
    "type": "shopware-platform-plugin",
    "license": "proprietary",
    "authors": [
        {
            "name": "Zenit Design",
            "homepage": "https://zenit.design",
            "role": "Manufacturer"
        }
    ],
    "require": {
        "shopware/core": "^6.5",
        "shopware/storefront": "^6.5",
        "zenit/horizon": ">=3.0.0"
    },
    "extra": {
        "shopware-plugin-class": "zenit\\PlatformHorizonSet2\\zenitPlatformHorizonSet2",
        "plugin-icon": "src/Resources/config/plugin.png",
        "copyright": "(c) by Zenit Design",
        "label": {
            "de-DE": "Theme HORIZON | Pro - Set 2",
            "en-GB": "Theme HORIZON | Pro - Set 2"
        },
        "description": {
            "de-DE": "Theme HORIZON | Pro - Set 2",
            "en-GB": "Theme HORIZON | Pro - Set 2"
        },
        "manufacturerLink": {
            "de-DE": "https://store.shopware.com/zenit-design.html",
            "en-GB": "https://store.shopware.com/en/zenit-design.html"
        },
        "supportLink": {
            "de-DE": "https://help.zenit.design",
            "en-GB": "https://help.zenit.design"
        }
    },
    "autoload": {
        "psr-4": {
            "zenit\\PlatformHorizonSet2\\": "src/"
        }
    }
}

Umschreibungen der zenitPlatformHorizonSet2.php (3)

Abgesehen vom Dateinamen müssen auch in der Datei zwei Stellen angepasst werden.

  1. Passe den Namen der Datei an den neuen Namen an: zenitPlatformHorizonSet2.php → zenitPlatformHorizonSetBeispiel.php

  2. Schreibe in der Datei die Namen um, öffne die Datei in einem Editor oder Notepad.

    Zeile 3: zenit\PlatformHorizonSet2 → zenit\PlatformHorizonSetBeispiel

    Zeile 8: zenitPlatformHorizonSet2 → zenitPlatformHorizonSetBeispiel

zenitPlatformHorizonSetBeispiel.php
<?php declare(strict_types=1);

namespace zenit\PlatformHorizonSet2;

use Shopware\Storefront\Framework\ThemeInterface;
use Shopware\Core\Framework\Plugin;

class zenitPlatformHorizonSet2 extends Plugin implements ThemeInterface
{
    public function getThemeConfigPath(): string
    {
        return 'theme.json';
    }
}

Umschreibungen in der theme.json (4)

Öffne die Datei in einem Editor oder Notepad.

  • Zeile 2: Gib Deinem Child-Theme einen beliebigen Namen

  • Zeile 9: @zenitPlatformHorizonSet2 → @zenitPlatformHorizonSetBeispiel

  • Zeile 19: app/storefront/dist/storefront/js/zenit-platform-horizon-set2.js → app/storefront/dist/storefront/js/zenit-platform-horizon-set-beispiel.js

  • Zeile 20 : app/storefront/dist/storefront/js/zenit-platform-horizon-set2/zenit-platform-horizon-set2.js

    → app/storefront/dist/storefront/js/zenit-platform-horizon-set-beispiel/zenit-platform-horizon-set-beispiel.js

theme.json
{
    "name": "Theme HORIZON | Pro - Set 2",
    "author": "Zenit Design",
    "previewMedia": "config/horizon-set-2-preview.png",
    "views": [
        "@Storefront",
        "@zenitPlatformHorizon",
        "@Plugins",
        "@zenitPlatformHorizonSet2"
    ],
    "style": [
        "app/storefront/src/scss/overrides.scss",
        "@zenitPlatformHorizon",
        "app/storefront/src/scss/base.scss"
    ],
    "script": [
        "@Storefront",
        "@zenitPlatformHorizon",
        "app/storefront/dist/storefront/js/zenit-platform-horizon-set2.js"
        "app/storefront/dist/storefront/js/zenit-platform-horizon-set2/zenit-platform-horizon-set2.js"
    ],
    "asset": [
        "@Storefront",
        "@zenitPlatformHorizon",
        "app/storefront/dist/assets"
    ],
    "configInheritance": [
        "@Storefront",
        "@zenitPlatformHorizon"
    ],
    "config": {
        ...
    }

Anpassen des Dateinamens der zenit-platform-horizon-set2.js (5)

Zum Schluss muss nur noch der Dateiname der Javascript-Datei auf den im vorigen Schritt geänderten Namen aus der theme.json (Zeile 19) geändert werden.

zenit-platform-horizon-set2.js → zenit-platform-horizon-set-beispiel.js

Solltest du eine Child-Theme Version 4.0.0 oder höher verwenden, muss zusätzlich auf dieser Ebene ein Ordner und darin eine weitere Javascript-Datei umbenannt werden. Ordner: zenit-platform-horizon-set2 → zenit-platform-horizon-set-beispiel Javascript-Datei: zenit-platform-horizon-set2.js → zenit-platform-horizon-set-beispiel.js

4. Fertig

Zippe nun den Ordner wieder und lade die Datei manuell in Deinem Shop hoch. Du kannst das duplizierte Child-Theme nun wie gewohnt installieren.

Lade die gewünschte Vorlage als Zip-Datei auf unserer kostenlos herunter.

🎓
Webseite
Child-Theme Generator für Zenit Design ThemesShopware Store
Logo