Aktuell erstellen wir eine neu Shopware Seite für einen alten Arbeitskollegen meines Vaters – den guten Francesco Finnochiaro vom Stilo Atelier. Wer aus Köln kommt und öfter mal beim Karstadt am Neumarkt in der Nähe unterwegs gewesen ist kennt sich noch seinen alten Laden in dem Ansichtskarten, Bilder, Bilderrahmen und Einrahmungen verkauft hat.
Mittlerweile ist dem Künstler dort zu bunt geworden und er hat sich in ruhige Gefilde, um genau zu sein nach Niederkassel (zwischen Köln und Bonn) zurückgezogen und dort neben seinem Heim, auch sein neues Atelier eröffnet.
Natürlich kommt hier nicht so viel Laufkundschaft wie in der Kölner Innenstadt – also heißt es digitalisieren und den online Vertrieb verstärken aber auch die alte Stammkundschaft warm zu halten und beispielsweise mit einem Newsletter zu bedienen.
Phase 1: Re-Launch des Online Shops
1.1 Update auf Shopware 5
Der Shop sah optisch stark veraltet aus und war mit dem mittlerweile ebenfalls veralteten Shopware 4 umgesetzt worden. Wir starten jetzt mit der aktuell neuesten Version nämlich Shopware 5.3 durch.
Dies war im Hinblick auf 2 Punkte besonders wichtig:
A) Shopware 4 wird nicht mehr aktualisiert und wird somit nach der Zeit immer unsicherer, da gefundene Sicherheitslücken nicht behoben werden. Das heißt wenn ein Hacker eine Lücke gefunden hat kann er diese nutzen um sich Zugriff auf alle anderen Shopware 4 Shops zu verschaffen um dort beispielsweise Schadcode zu integrieren oder aber Ihren Server in ein Netzwerk für Cyberangriffe einzubinden. Dies führt (logischerweise) dazu dass Ihr Server von Google abgestraft wird oder dass ein Virus Ihre Seite lahm legt, und so weiter.
B) Ein weiterer sehr wichtiger Grund, warum es Sinn macht auf Shopware 5 zu aktualisieren ist die Tatsache, dass Shopware 5 nun von Haus aus im responsive Webdesign ausgeliefert wird. Darüber freuen sich Kunden mit mobilen Endgeräten (mittlerweile mehr als 50% der Internetuser) sowie Google, denn Webseiten mit responsive Webdesign werden von der Suchmaschine insbesondere auf mobilen Endgeräten grundsätzlich besser bewertet als solche Webseiten, deren Inhalte sich nicht an unterschiedliche Monitorgrößen anpassen.
Off-Topic: Da kam gerade eine E-Mail von der Erna (Name von der Redaktion geändert), als Betreiber von sky-mp3.com haben wir 2 Pressekarten für die Summer Jam in Köln zugesagt bekommen.
Zurück zum Thema… wo hatte ich mich nochmal verzettelt. Ach ja genau: Wir haben ein Update vorgenommen. Mit dem Update auf Shopware 5 brauchten wir dann aber auch gleich ein anspruchsvolleres Webspace Paket. Was liegt da näher als die Seite auf unserem eigenen Server zu hosten. Wink mit dem Zaunpfahl: Schreiben Sie uns eine Mail wenn Sie ebenfalls an professionellem Shopware 5 Hosting interessiert sind.
Als Basis Theme dient eine modifizierte Version des Responsive Themes, was wir von Seite zu Seite weiter optimieren.
1.2 Die Aufgabenstellung
Ileana, die Tochter von Francesco hatte uns folgende Vorgaben gegeben: „Die Seite sieht im Moment total Opa aus – das muss alles viel moderner sein. Außerdem brauchen wir noch eine Funktion wo uns die Besucher der Webseite einfacher anschreiben können.“
Recht hatte sie… die Seite sah tatsächlich aus, als wäre sie aus Opa`s Zeiten. 700 Jahre alte Banner die noch von der ersten Erstellung der Seite stammten, ein riesiges Facebook Logo das zur Fanseite verlinkte und ein Header den man seinem ärgsten Feind nicht wünschen würde mit dem dazugehörigen nichtssagenden Einleitungstext bestehend aus 3 Zeilen – treu nah dem Motto wer wenig schreibt kann auch nicht viel falsch machen. Es war also wirklich an der Zeit.
Aber: Eine richtig coole Funktion hatte die Seite schon, denn das Theme war damals schon responsive! Das hatte ich damals selbst erstellt und wollte es ursprünglich immer im Shopware Community Store anbieten… schlauer Weise habe ich es aber im Haufen der täglichen Aufgaben begraben und damit den Vortritt für jemand anderen gelassen, der sich mit seinem Plugin drei bis vier goldenen Nasen verdient hat. Ich weiß noch dass der erste Anbieter es für 600 € angeboten hatte. Aber was bringt der Ferrari wenn er von außen aussieht wie ein Kangoo? Richtig – nix. Er schreckt die Leute ab, bringt kein Vertrauen und wird als letztes irgendwen begeistern der nicht zufällig einen Fetisch für responsive Webdesign hat.
Vorgeschichte: Ich habe vorher lange gegrübelt, ob eine WordPress Seite vorgeschaltet werden sollte, von der aus man dann auf den Shop geleitet wird. Nach einer Umfrage in der tausendköpfigen Shopware Gruppe war dann aber klar, dass das nicht der Weg sein kann.
Es wäre natürlich einfacher und schneller mit WordPress eine schöne Startseite und einen echten Hingucker-Blog zu gestalten jedoch würde dies in vielerlei Hinsichten auch doppelte Arbeit bedeuten. 2 Systeme installieren, 2 Systeme regelmäßig mit Inhalten bestücken, 2 Systeme regelmäßig aktualisieren. Dann gab es noch weitere Argumente, wie z.B. dass, wenn man nur mit einem System arbeitet auch nur eine Sitemap hat. Ein letzen Grund den ich nennen möchte: Shopware ist einfach moderner und sicherer programmiert als es WordPress ist. Wer also mal einen sehr stark besuchten Shop aufbauen möchte, sollte diesen grundsätzlich auf einem sicheren Fundament bauen.
Soviel zu dem Thema. Shopware kommt also direkt zum Einstieg – WordPress lassen wir weg.
Ileanas Wunsch, dass Kunden eine einfache Möglichkeit kriegen einen Nachricht zu schreiben komme ich dann in der Form nach, dass wir ein Userlike Widget einbinden. Damit ist es möglich den Kunden gleich live per Chat zu beraten, und wenn man nicht online ist kann der User eine Nachricht über das Widget schreiben, die dann per E-Mail an das Stilo Atelier, bzw. Francesco & seine Tochter weitergeleitet werden.
1.3 Das Theme
1.3.1 Great2Gether Haus-Theme
Wir verwenden wieder einmal unser Haus-Theme das wir schon in mehreren Projekten verwendet haben und passen es sowie farblich als auch funktional den Ansprüchen von Francesco an. In der neuesten Version haben wir unser Theme um ansprechende Social Media Icons mit Font Awesome erweitert.
1.3.2 Theme Erweiterung – Social Icons
Damit können wir auf äußerst elegante Art Icons für folgende Social Media Webseiten in den Footer (in diesem Fall unter den Service Hotline Bereich) einbinden.
– Facebook
– Instagram
– Twitter
– Google+
– YouTube
– Vimeo
– Pinterest
– Xing
– Instagram
– WhatsApp
– Snapchat und
– Yelp
Bei stilo-atelier kommen hiervon zunächst einmal nur Facebook & Instagram zu Einsatz, später werden dann noch weitere Kanäle wie Pinterest, Twitter, YouTube und definitiv auch Google+ bedient, und dementsprechend die Icons im Shopware Footer ergänzt werden.
1.3.3 Theme Erweiterung – Chat Funktion mit Userlike
Unser Theme ist durch einige Anpassungen bereit um ein Userlike Chat-Widget ohne ein zusätzliches Plugin zu integrieren. Ohne das Plugin zu arbeiten hat 2 Vorteile: Erstens hält man das System schlank und zweitens ist man nicht an das Plugin Gebinden, wenn es zum Beispiel schon eine neuere Shopware Version aber noch kein aktualisiertes Plugin gibt, was einen dann daran hindert direkt auf die nächste Shopware Version umzusteigen.
Zusätzlich habe ich von der Registrierung des kostenlosen Userlike Account, über die Einbindung des Profil-Fotos im Chat bis zur Konfiguration der Texte und Grundfunktionen auch schon alles schlüsselfertig für Elena, die den Chat übernehmen wird, vorbereitet.
1.3.4 Theme Eye-Catcher – Der Bilderrahmen
Da die letzte Seite ein optisches Desaster war wollte ich dieses Mal etwas wirklich besonderes kreieren und kaum auf die Idee die ganze Seite einzurahmen und den semantischen Bezug zum Produkt und der Dienstleistung Francescos herzustellen. Zunächst hatte ich dafür das Bild eine Rahmens runtergeladen und die untere Kante als Hintergrundbild an der Unterkante des Footer eingebunden. Das sah schon halbwegs nett aus, aber ich war noch nicht zufrieden.
Bei einer kleinen Recherche bin ich dann auf diesen Link gestoßen und der Ansatz hatte mir schon eher zugesagt, da es professioneller Weise nur mit reinem CSS und ohne Bilddateien gelöst war: https://codepen.io/chris22smith/pen/PbBwjp
So und hier ist nun das Ergebnis – klickt aber auch auf jeden Fall auf das Bild, damit ihr auch wirklich die aktuelle Version mal gesehen habt. Außerdem hat der Francesco auch wirklich schöne Sachen im Shop hat.
Shopware Referenz – Stilo-Atelier