Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Eigenes Shopware Theme erstellen

Eigenes Shopware Theme Erstellen

Es empfiehlt sich, gerade bei der Ersteinrichtung von Shopware 5, ein eigenes Template zu erstellen. Mithilfe dessen erstellen Sie Ihren Shopware-Shop updatesicher. Die Standarddateien werden bei einem Update nun nicht einfach mehr überschrieben.

1. Einleitung

Shopware bietet standardmäßig zwei Themes an.

Bare Theme
Das Bare Theme ist die Grundstruktur eines Shopware-Templates, komplett nackt und ohne grafischen Inhalte. Alle benötigten Daten für die Grundlage eines funktionierenden Themes sind hier enthalten. Dieses Theme richtet sich vor allem an Grafiker und Entwickler.

Responsive Design
Das Responsive Theme enthält alle nötigen Stylesheets um optisch ansprechend auf allen Geräten ein vernünftiges Design zu präsentieren. In dieser Anleitung werden wir das eigene Shopware-Theme von diesem ableiten.

2. Eigenes Theme erstellen

Im Shopware-Backend klicken Sie auf den „Theme-Manager“. Dieser verwaltet alle Themes von Shopware. Im zweiten Schritt klicken Sie einfach auf „Theme erstellen“. Alle Felder sollten mit den entsprechenden Informationen gefüllt werden. Wichtig hierbei ist, dass wir das neu erstellte Theme vom Resposnive Design ableiten.

3. Theme anpassen

In dem Ordner:

themes/Frontend/FlatResponsive/frontend/_public/src/less/

Wird folgende Datei angelegt:

all.less

Von dieser Datei werden nunmehr alle Daten und Codeschnipsel abgeleitet. Das schafft eine saubere Struktur und verhilft zu mehr Übersichtlichkeit.

Sollten wir nun im späteren Verlauf Anpassungen am Header oder an der Shopware Logo-Größe vornehmen, wird in der „all.less“ lediglich der Hinweis hinterlegt, dass die entsprechende Änderung in diesem Theme geladen werden soll.

Beispielsweise:

Wenn wir einen abgeänderten Header von Shopware haben möchten, erstellen wir einfach im Ordner:

themes/Frontend/DEINTHEME/frontend/_public/src/less

Eine Datei mit den Namen „header.less“ mit entsprechendem Inhalt. Beispielsweise aus dem Tutorial „Shopware Logo-Größe ändern“ mit folgendem Inhalt:

.header-main {
  // Logo
  .logo-main {
    // Smaller logo for mobile viewports
    .logo--shop {
      .unitize-height(35, 16);
    }
    .logo--link {
      .unitize-height(35, 16);
    }
  }
}
@media screen and (min-width: @tabletViewportWidth) {
  .header-main {
    // Logo
    .logo-main {
      // Smaller logo for mobile viewports
      .logo--shop {
        .unitize-height(80, 16);
      }
      .logo--link {
        .unitize-height(80, 16);
      }
    }
  }
}

In der „all.less“ fügen wir nun folgende Zeile ein:

@import "_modules/header";

Dies sagt der „all.less“, dass die Datei header.less für dieses Theme importiert und angewendet werden soll.

Fertig. Sie haben nun ein eigenes Theme erstellt, welches auch bei bevorstehenden Updates keine Probleme in der Darstellung verursachen sollte.

Der Beitrag Eigenes Shopware Theme erstellen erschien zuerst auf Webhosting, Server & Cloud Blog.



This post first appeared on Shopware Webhosting, please read the originial post: here

Share the post

Eigenes Shopware Theme erstellen

×

Subscribe to Shopware Webhosting

Get updates delivered right to your inbox!

Thank you for your subscription

×