Anleitung: Shopware Theme anpassen

Das Shopsystem Shopware ist in unseren Augen eines der besten Shopysysteme auf dem Markt. Bereits die kostenlose Variante bietet die idealen Voraussetzungen für einen professionellen Shopauftritt im Internet. Werksseitig bietet Shopware 5 aktuell das Responsive Theme an, welches für sämtliche Endgeräte bereits sehr gut optimiert ist. Mit den Standardeinstellungen lassen sich aber lediglich Farben anpassen. Wer mehr ändern möchte, muss zu teuren Plugins greifen oder Themeentwickler mit utopischen Stundenlöhnen kontaktieren. Doch das muss nicht sein! Mit etwas technischen Verstand können die Farb- und Layoutanpassungen des Themes ganz einfach selbst verwirklicht werden.

1. Vorbereitungen für das Erstellen eines Shopware Themes

Bevor Sie starten, erstellen Sie sich bitte ein BackUp Ihrer Webseite. Am besten sichern Sie sämtliche FTP Daten und Datenbanken. Wir übernehmen keine Haftung für eventuelle Fehler. Kontaktieren Sie uns bei Fragen gerne oder falls Sie Hilfe benötigen.

Damit Sie erfolgreich Ihr Shopware Theme anpassen können benötigen Sie zunächst die FTP Zugangsdaten Ihres Webservers oder Webhosters, sowie folgende Tools:

Nachdem Sie nun die Tools und Informationen zur Hand haben, können Sie über FileZilla auf Ihren Server zugreifen. Im Verzeichnis “themes/Frontend” finden Sie das bisher aktive Theme Responsive, welches Sie zunächst herunterladen. Das Verzeichnis Bare ist das normale, originale Theme, worauf Shopware aufgebaut ist und sämtliche Funktionen und Layouts des Standard Shopware Themes beinhaltet. Das schöne an den Shopware Themes ist, dass diese in Blöcken aufgebaut sind, auf die beliebig zugegriffen werden. Somit ist es möglich, dass Sie an einer beliebigen Stelle Blöcke überschreiben oder anfügen können.

2. Eigenes Shopware Theme herstellen

2.1 Shopware Theme ableiten

Bevor es an die Anpassungen geht, müssen Sie zunächst – falls noch nicht geschehen – das Standardtheme Responsive ableiten. Dazu navigieren Sie im Backend auf:

Einstellungen - Theme Manager

Dort klicken Sie dann das Responsive Theme an und klicken auf den oberen Button Theme erstellen. Nun tragen Sie dort den gewünschten Namen (hier: Custom_Responsive) ein und die anderen gewünschten Daten. Wie dies aussehen kann, entnehmen Sie dem folgenden Screenshot. Dann speichern Sie das Ganze.

shopware-theme-ableiten
Shopware Theme ableiten / Eigener Screenshot

Nun erstellt Shopware auf Ihrem FTP-Server ein neues Verzeichnis im Ordner /themes, der in unserem

shopware-theme-ftp-server
Shopware Theme auf FTP-Server / Eigener Screenshot

Beispiel Custom_Responsive heißt. Wie das Ganze nun aussehen sollte, sehen Sie im Screenshot. Wir von KaGu | media mögen Struktur und Übersicht. Daher kopieren wir nun die komplette Ordnerstruktur des am Anfang heruntergeladenen Responsive Themes in das Verzeichnis Custom_Responsive. Im nächsten Abschnitt wird kurz erläutert, wie Sie einfach sämtliche Dateien aus dem Responsive Verzeichnis löschen können, sodass lediglich die leer Ordner-Struktur erhalten bleibt, in der Sie dann an beliebiger Stelle Änderungen am Layout vornehmen können.

2.2 Responsive Theme – Ordner Struktur hochladen

Öffnen Sie lokal auf Ihrem Computer den Ordner Responsive. Windows-Nutzer können nun im Explorer oben rechts im Suchfeld

*.tpl

eintragen. Nun erhalten Sie sämtliche Shopware-Dateien, die im Responsive-Theme enthalten sind. Löschen Sie diese Dateien. Nun haben Sie nur noch die leeren Verzeichnisse bzw. Ordner in diesem Theme.

shopware-theme-ordner-struktur-herstellen
Shopware Theme Ordner Struktur herstellen / Eigener Screenshot

Diese Ordner kopieren Sie eins zu eins auf Ihrem FTP-Server in das Custom_Responsive Verzeichnis. Nun haben Sie ein leeres und aufgeräumtes, eigenes Responsive-Theme (Custom_Responsive). Jetzt können Sie anfangen Schritt für Schritt Ihre Shopware Theme Anpassungen vorzunehmen.

3. Shopware Theme anpassen

Nachdem Sie nun Ihr eigenes Custom_Responsive Theme erfolgreich erstellt haben, können Sie anfangen die gewünschten Anpassungen und Änderungen vorzunehmen. Dabei können Sie, neben CSS und Javascript Anpassungen, natürlich auch das komplette Layout und Erscheinungsbild Ihrer Shopware-Seite anpassen. Im Folgenden erklären wir Ihnen zunächst wie Sie CSS Anpassungen vornehmen können. Im Anschluss folgen einige Beispiele für Shopware Theme Anpassungen über .tpl-Dateien, welche abgeleitet oder erweitert werden. Wichtig an dieser Stelle ist, dass Sie mit den folgenden Anpassungen die Updatefähigkeit von Shopware nicht beeinflussen. Das bedeutet in der Regel, dass sämtliche Änderungen nicht durch ein Shopware-Update zerstört werden können! Dies sollte als Grundvoraussetzung für Ihren Shop gelten, da Shopware regelmäßig Sicherheitsupdates, sowie Shopupdates veröffentlicht, die unbedingt zeitnah aufgespielt werden sollten.

3.1 Eigenes Shopware Stylesheet für CSS-Anpassungen

Das Layout ihres eigenen Responsive Themes passen Sie mittels CSS an. Dazu sind natürlich gewisse Erfahrungen im Bereich CSS von Vorteil. Damit Sie Ihre eigene CSS-Datei erstellen und bearbeiten können, müssen Sie in Ihrem neuen angepassten Theme (Custom_Responsive) die Theme.php wie folgt anpassen:

<?php
namespace Shopware\Themes\Custom_Responsive;
use Shopware\Components\Form as Form;
class Theme extends \Shopware\Components\Theme
{
    protected $extend = 'Responsive';
    protected $name = <<<'SHOPWARE_EOD'
Custom_Responsive
SHOPWARE_EOD;
    protected $description = <<<'SHOPWARE_EOD'
Custom
SHOPWARE_EOD;
    protected $author = <<<'SHOPWARE_EOD'
Custom
SHOPWARE_EOD;
    protected $license = <<<'SHOPWARE_EOD'
Custom
SHOPWARE_EOD;
/** Eigene Javascript-Datei einbinden */
	protected $javascript = array(
		'src/js/custom.js'
	);
/** Eigene CSS-Datei einbinden */
	protected $css = array(
		'src/css/mycss.css'
	);
}

Die letzten Zeilen beschreiben das Verzeichnis Ihrer CSS-Datei “mycss.css“, die Sie dort ablegen werden. Von nun an greift Ihr eigenes Theme auf diese Styling-Datei zu. Zusätzlich kann über “custom.js” eigene Skripte eingebunden werden, die ebenfalls im Verzeichnis “src” zu finden sind. Wir konzentrieren uns aber zunächst auf die Stylesheet-Datei mycss, welche nun im Verzeichnis “Custom_Responsive/frontend/_public/src/css” liegen sollte.

3.2 Style Klassen und IDs ausfindig machen

Aktuelle Browser wie Chrome oder Firefox bieten die Möglichkeit Webseiten zu untersuchen. In Chrome bspw. Klicken so mit der rechten Maustaste auf ein Element Ihres Shops und wählen dann “Untersuchen”. So sehen Sie die Container, welche im ausgewählten Bereich vorhanden sind. Wenn Sie nun den Namen nutzen und in Ihre eigene mycss einfügen, können Sie diesen beliebig um Ihre eigenen CSS-Befehle anpassen.

Manchmal ist es notwendig der CSS Anweisung ein !important hinzuzufügen, falls die gewünschte Änderung nicht dargestellt wird.

Nun können Sie sämtliche CSS-Anpassungen am Shopware-Theme vornehmen und z.B. Farben, Hintergründe, Schriften, Schriftgrößen, Positionen und weitere Änderungen vornehmen. Natürlich können Sie auch eigene Klassen oder Container definieren, die Sie dann in einer eigenen, abgeleiteten .tpl-Datei (siehe nächster Abschnitt) nutzen können.

shopware-cache-kompilieren
Shopware Cache leeren/kompilieren / Eigener Screenshot

Beachten Sie, dass Sie den Shopcache leeren und das Theme neu kompilieren müssen (siehe oberer Screenshot), damit Änderungen sichtbar werden. Dazu navigieren Sie im Backend auf

Einstellungen - Caches/Performance - Caches/Performance

und markieren im Anschluss sämtliche Checkboxen und klicken den Button Leeren. Nun wird Ihr Shop die Änderungen im Custom_Responsive Theme übernehmen und im Frontend ausgeben. Testen Sie dies, indem Sie Ihren Shop aufrufen und ob die Änderungen sichtbar sind. Sollten dennoch keine Änderungen sichtbar sein, können Sie noch folgendes probieren:

  • Der Browser-Cache: Drücken Sie ein paar mal STRG + F5
  • Oder: Browser-Cache über die Datenschutzeinstellungen leeren
  • Anderen Browser testen
  • Falls immer noch keine Änderungen sichtbar ist, haben Sie einen der obigen Schritte nicht korrekt befolgt.

Info: Nach nahezu sämtlichen Änderungen oder Anpassungen in Shopware ist es ratsam den Shopware-Cache zu leeren, damit Änderungen sichtbar werden.

4. Beispiele: Shopware Theme Anpassungen

Nahezu alle Webseiten, die Sie im Internet finden können, sind dynamisch aufgebaut und mit einem Header (Oben), Content (Mitte/Inhalt) und Footer (Unten) Container ausgestattet – so auch Shopware. Um nun die gewünschten Anpassungen vorzunehmen, müssen Sie auf genau diese .tpl-Dateien zugreifen und diese überschreiben oder idealerweise erweitern, damit die Updatefähigkeit erhalten bleibt. Wie das geht, erklären wir Ihnen anhand von einigen Beispielen.

4.1 Allgemeine Vorgehensweise

Damit das Shopware Responsive Theme weiterhin genutzt und auf Ihre gewünschten Anpassungen eingestellt werden kann, müssen Sie zunächst immer die Originaldatei am Anfang Ihrer erweiteren Datei aufrufen. Es ist ratsam sich das Bare-Theme ebenfalls komplett runter zu laden und darin nach den richtigen.tpl-Dateien zu suchen, in denen man Anpassungen über das eigene Theme vornehmen möchte. Im Anschluss können Sie dann die gewünschten Blöcke aufrufen und mittels smarty parent erweitern.

Im folgenden Codeschnipsel wird z. B. die Datei “sidebar.tpl” um eine Box erweitert. Der Aufbau einer abgeleiteten Datei ist denkbar einfach. Zunächst wird die Originaldatei via “extends” mit dessen Inhalte aufgerufen und dann mit dort vorhandenen Blöcken beliebig erweitert.

{extends file='parent:frontend/index/sidebar.tpl'}
    {block name='frontend_index_left_categories'}
        <div class="lb-element-mitte"><div class="shop-sites--container is--rounded">
             <div class="navigation--headline">IHRE ÜBERSCHRIFT</div>
                 IHR INHALT
             </div>
        </div>
{$smarty.block.parent}
{/block}

So würden Sie z. B. die Sidebar um eine weitere Box unterhalb mit einer eigenen Box anfügen. Die Positionierung des {$smarty.block.parent} bestimmt hierbei auch die Positionierung Ihrer Shopware-Anpassung. Steht diese vor dem erwähnten Block, wird dieser Block auf davor abgebildet. Steht dieser, wie in diesem Beispiel vor dem schließenden /block, wird Ihr neu erstellter Block dem bisherigen Block angehängt.

4.1.1 Shopware Sidebar bzw. seitliche Boxen anpassen

Die Shopware Sidebar eignet sich ideal, um neben den in der Kategorie gezeigten Artikel weitere, nützliche Informationen dem Besucher darzustellen. Z. B. können Sie dort weiterführende Infos wie Versand- und Zahlungsarten hinterlegen. Der folgende Quelltext zeigt die sidebar.tpl-Datei, welche Sie im Verzeichnis /Custom_Responsive/Frontend/index” einfügen können. Das Verzeichnis index ist hierbei für die allgemeine Shopdarstellung zuständig.

4.2 Weitere Beispiele folgen in Kürze

Weitere Beispiele für Shopware Theme Anpassungen folgen in Kürze. Danke für Ihr Verständnis.

5. Fazit

Sie sehen, dass die Anpassung von Shopware gar nicht so schwer ist, wenn man sich ein wenig damit befasst und die Grundlagen von HTML und CSS beherrscht. Wir hoffen, dass Sie durch diesen Ratgeber einen Einblick in die Thematik erhalten konnten und nun selbst Ihr Theme allgemein anpassen können.

Bei Problemen zögern Sie bitte nicht uns zu kontaktieren. Falls Sie an weiteren Ratgebern für Shopware interessiert sind lesen Sie doch mal den Facebook Pixel in Shopware einbinden oder Amazon Pay mit Shopware nutzen Beitrag von uns.