Der ultimative Shopware Guide

Ich beschäftige mich nun auch schon länger mit dem Shopsystem Shopware. Auch habe ich schon einige Shopware Templates erstellt bzw. angepasst. Da die Informationen zu diesem Thema eher dürftig sind, möchte ich nun meinen kleinen Shopware Guide mit Euch teilen, damit Ihr ebenso Eueren Webshop mit Shopware Template anpassen könnt. Im folgende ein paar Shopware Anleitungen bzw. Tutorials, die ich nach und nach zusammengetragen habe.w

Menüübersicht mit Ankern zu Überschriften bauen.

Shopware Guide: Grundlagen

Zunächst einmal zu den Shopware Grundlagen. Shopware 5 ist das aktuelle und komplett überarbeitet Shopsystem von Shopware und liefert regelmäßig Updates, welche man auch unbedingt ausführen sollte – nicht nur um Sicherheitslücken zu beheben. Hat man nun jedoch sein “Responsive” Theme angepasst, dies aber direkt in diesem vorgenommen, verschwinden Deine Änderungen wieder, weil diese durch das Update überschrieben werden.

Um dieser Problemmatik zu entgehen nutzt man ein abgeleitetes Theme bzw. eigenes Theme. Dupliziere das Responsive Theme und lade es dir von deinem FTP Server herunter. Lösche alle Dateien aus den Ordnern und lade diese wieder in das Theme-Verzeichnis hoch. Nun wählst Du in den Theme-Einstellungen Dein neues Theme. Jetzt kannst Du Schritt für Schritt Anpassungen vornehmen. Diese werden dann nur für das jeweilige Element überschrieben. Doch dazu später mehr.

Shopware Grundlagen: Neue Seite erstellen

Neben den Shopware Kategorien, die sich insbesondere für die Darstellung von den Artikeln eignet, solltest Du auch Shopseiten anlegen. Diese sind für Seiten ohne viele Artikel gedacht. Zum Beispiel für die AGB, Impressum, Widerrufrecht und weitere Informationen. Auch Landingpages für Shopware SEO Optimierungen lassen sich damit gut realisieren. Ebenso Shopware Einkaufswelten lassen sich darüber ideal als Landingpage zusammen stellen.

Shopware Seite erstellen

Neue Shopware Seite anlegen ist wirklich einfach. Navigiere mit der Maus einfach auf:

Inhalte – Shopseite – Neue Seite

Befülle die Shopware Seite mit Inhalten und speichere diese ab. Das war es aber noch nicht. Damit Shopware die Seite korrekt anzeigen kann, musst du zunächst den Cache leeren und den sogenannten SEO Index neu aufbauen, damit die URL deines Shops korrekt dargestellt wird. Hast Du zum Beispiel eine Shopseite names “Impressum” angelegt, so generiert Shopware aus diesem Titel auch die URL.

Es kann vorkommen, dass dir im Shopseiten-Editor lediglich die Standard-Werkzeuge, wie dick, kursiv und Überschriften angezeigt werden. Damit du Zugriff auf alle Werkzeuge bekommst, musst du den erweiterten Editor aktivieren. Und zwar so:

Benutzerverwaltung – Nutzer editieren – Erweiterer Editor Häkchen setzen – Speichern – neu einloggen

Shopware Cache leeren

Um den SEO Index neu aufzubauen navigierst du auf:

Cache – Einstellung – SEO Index neu anlegen

Nun leerst du am besten den kompletten Cache und lässt das Theme neu aufbauen. Dazu navigierst du zu den Cache Einstellungen und markierst alle Häkchen. Dann “Cache leeren”. Weitere Grundlagen zur Nutzung von Shopware und ebenso wichtige Einstellungen für SEO werde ich Euch zeigen.

Shopware Artikelübersicht anpassen

Shopware bietet die Möglichkeit die Anzahl der Artikel pro Seiten zu definieren. Die angezeigten Artikel pro Seiten definierst du wie folgt:

Einstellungen – Grundeinstellungen – Kategorie/Listing – Artikel pro Seite X

Außerdem kann Shopware beim Scrollen weitere Artikel automatisch nachladen – Infinite Scrolling. Um diese Funktion zu aktivieren navigierst du auf:

Template – Einstellungen – Konfiguration – Infinite Scrolling aktivieren/deaktivieren

Eigenes Shopware Theme anlegen

Wie bereits anfangs erwähnt ist es immens wichtig ein eigenes Theme anzulegen, um die Updatesicherheit zu bewahren. Dazu empfiehlt sich das Duplizieren des Standard Responsive Themes. Du leerst nun jeden Ordner. Dazu ein kleiner Tipp:

Öffne den Ordner in deinem Explorer und gebe in dir Suche einen Stern ein ” * “. Nun werden dir alle Dateien angezeigt. Diese kannst du nun ganz einfach selektieren und löschen. Lade nun den unter einem neuen Namen (My-Responsive) auf deinen FTP-Server in das Themes-Verzeichnis. Zunächst könntst du anfangen, das Theme an dein CI anzupassen. Dies geschieht i.d.R über die Stylesheet (css) Datei.

Eigene Shopware CSS und Javascript anlegen

Zunächst benötigst Du einen HTML-Editor. Ich nutze gerne Notepad++. Du erstellt nun eine neue Datei namen mycss.css und speicherst diese auch als css-Datei ab. Diese CSS-Datei lädst Du dann in dein abgeleitetes Theme in folgendes Verzeichnis:

frontend/_public/src/css

Damit Dein Theme auf diese Datei zugreifen kann, musst Du noch zusätzlich eine Theme.php anlegen und folgende Codezeilen hinzufügen:

protected $css = array(
 'src/css/mycss.css'
 );
 public function createConfig(Form\Container\TabContainer $container)
 {
 }
 }

Natürlich kann diese Vorgehensweise auch auch Javascript-Dateien abgeleitet werden. Erstelle dir eine Javascript-Datei (custom.js) und lade diese in folgendes Verzeichnis

frontend/_public/src/js

In deine Theme.php schreibst du nun noch folgende Codezeilen, damit dein eigenes Theme darauf ebenfalls zugreifen kann:

protected $javascript = array(
 'src/js/custom.js'
 );

Jetzt kannst du loslegen dein eigenes Shopware Theme anzupassen. Dazu nutze ich gerne das “Untersuchen” Werkzeug von Google Chrome oder Firebug in Mozilla Firefox. Fahre mit der Maus über das Element, welches du bearbeiten möchtest und probiere ein paar CSS-Befehle aus. Gefällt dir was du siehst, schreibe die Befehle in deine mycss.css und lade diese wieder auf deinen FTP-Server. Nun solltest du wieder deinen kompletten Cache leeren und das Theme neu aufbauen. Die Shopware Änderungen sollten nun sichtbar sein.

Eigene Shopware Textbausteine

Shopware hat viele Textbausteine, die Du individuell anpassen kannst. Dazu navigierst du zunächst auf “Textbausteine” und gibst den zu bearbeitenden Textausschnit in der Suche ein. Nun kannst du diesen direkt über das Shopware Backend anpassen. Ein Eingriff über den FTP-Server ist somit nicht erforderlich. Natürlich kannst du auch in deinem eigene Shopware Theme eigene Textbausteine anpassen. Zum Beispiel für Zahlungsarten im Footer, da sich die möglichen Zahlarten desöfteren ändern können und man somit nicht ständig am FTP-Server arbeiten muss.

Shopware SEO Tipps und Grundlagen

Shopware SSL mit HTTPS Weiterleitung

Bist du Shopbetreiber solltest du unbedingt ein SSL-Zertifikat haben, damit sensible Daten verschlüsselt übertragen werden. Um dies zu verwirklichen muss jede Seite und jedes Bild via HTTPS geladen werden. Erst dann erscheint in der Browserleiste der grüne Schlüssel, welcher eine 100%-ige SSL-Verschlüsselung kennzeichnet. Damit auch wirklich jeder Besucher direkt auf der HTTPS-URL landet, solltest Du diverese Weiterleitungen (Redirects) einrichten. Diese schreibst du in die .htacces Datei in dem Stammverzeichnis des angepassten Themes:

# HTTPS für Front End
RewriteEngine On
 RewriteCond %{HTTPS} !on
 RewriteRule ^(.*)$ https://%{SERVER_NAME}%{REQUEST_URI} [R,L]

# Https config for the backend
 #RewriteCond %{HTTPS} !=on
 #RewriteRule backend/(.*) https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]

SEO-freundliche URLs generieren

Shopware kann anhand einiger Attribute automatisch SEO-freundliche URLs genieren. Ich nutze immer folgende Varianten:

• Kategorie-URL:

{sCategoryPath categoryID=$sCategory.id}/

Somit generiert Shopware aus dem Namen der Kateogrie die URL. Als Beispiel käme bei einer Kategorie namens “Klamotten” folgendes heraus:

www.deineurl.de/klamotten/

• Artikel-URL

{$sArticle.name}-{$sArticle.id}

Somit lautet bei einem Artikel namens “Blaues T-Shirt” die URL wie folgt:

www.deineurl.de/blaues-t-shirt-1234

Natürlich könntest du -{$sArticle.id} auch weg lassen. Allerdings empfehle ich bei großen Shops mit mehreren “blauen T-Shirts” die ID mit auszugeben, um doppelte URLs, Meta-Titles, sowie Meta-Descriptions zu vermeiden – SEO zu Liebe.

Shopware robots-Datei anpassen

Google indiziert in der Regel jede Seite, die nicht durch die robots.txt-Datei ausgeschlossen wurde. Die Crawling-Power kann jedoch besser genutzt, indem nicht relevante Seiten in der robots-Datei ausgeschlossen werden. Das empfiehlt sich vor Allem für Seiten, mit denen man sowieso nicht auf Google ranken möchte. I.d.R. füge ich dort immer die AGB, Kontaktformular, Seiten mit einem “?”, Adminseiten, usw… Das muss aber jeder für sich selbst entscheiden! Um eine eigene robots.txt in Shopware zu erzeugen, gehst du wie folgt vor:

Öffne über den FTP-Clienten das Verzeichnis “My-Responsive/frontend/robots_txt/” und erstelle über notepadd++ eine “index.tpl” Datei. In diese schreibst du nun folgendes:

{extends file='parent:frontend/robots_txt/index.tpl'}
  {block name="frontend_robots_txt_disallows" append}
  Disallow: /meine-seite
{/block}

Hierbei wird die robots.txt-Datei aus dem originalen Responsive-Theme um weitere Codezeilen erweitert und nicht überschrieben! Dafür sorgt der Ausdruck “append”. Das “Disallow” sagt dem Google-Crawler, dass die Seite nach dem Doppelpunkt nicht gecrawlt werden soll bzw. darf.

Weitere nützliche Shopware Tipps und Tricks

Es folgende weitere nützliche Shopware Tipps, welche mir aufgefallen sind und für die ich Lösungen gefunden habe. Fallen mir im Laufe der Zeit weitere Shopware Tipps auf, welche erwähnenswert sind, werde ich diese selbstverständlich hier mit in die Liste aufnehmen.

Shopware Einkaufswelten Bilder haben schlechte Qualität?

Du hast dir endlich Deine erste Einkaufswelt zusammengebastelt aber die Bilder sehen einfach nur schrecklich aus? Das liegt an der Shopware-seitigen Komprimierung. Diese ist generell nicht verkehrt, da somit Bilder auf ein erträgliches Maß komprimiert werden können, die die Ladezeit deiner Seite verkürzt. Aber bei einer Einkaufswelt – vor Allem auf der Startseite – möchten man dem potentiellen Käufer natürlich nicht so etwas zu muten. Daher bitte folgende Einstellungen vornehmen:

– Inhalte – Medienverwaltung – Album Zahnrad – Thumbnail genieren (100%) – Cache leeren

Durch den Eintrag der Zahl 100 wird die Komprimierung deaktiviert und Bilder mit deren Thumbnails neu generiert – in voller Auflösung. Einziger Wehrmutstropfen an dem Shopware-System ist allerdings die Bilder- bzw. Medienverwaltung. Doch das würde jetzt den Rahmen sprengen. Dazu mehr in einem anderen Artikel.

Shopware Anpassungen abgeschlossen

Nachdem du alle Anpassungen vorgenommen hast, solltest du überprüfen, ob dein Shop im “Produktivmodus” ist. Dazu navigierst du auf:

– Einstellungen – Perfomance – Produktivmodus aktivieren

Ein weiterer Blick sollte zusätzlich in den Perfomance-Einstellungen geworfen werden. Dort solltest im Idealfall alle Einstellungen mit einem grünen Haken versehen sein.

– Einstellungen – Caches – Allgemein – Performance Checks

Dein Hosting- bzw. Server-Anbieter kann dir dabei helfen folgende Einstellungen zu aktivieren, falls diese nicht aktiv sind: PHP 5.6 / Opcache und Zend Optimizier.

Wenn Euch mein “kleiner” Shopware-Guide geholfen hat, würde ich mich über eine Bewertung freuen. Ebenso eine Weiterempfehlung in Form einer Verlinkung – z. B. diesem Beitrag würde mich ebenso freuen. Danke und viel Erfolg beim Umsetzen.

(12 Stimmen, Durchschnitt: 5,00 von 5)

Loading...