Eigenen Online-Shop komplett in deinem Design – live in weniger als 36 Stunden mit VersaCommerce

Ich will alles – und zwar so wie ich es will

Als Sideproject wollte ich einen eigenen Online-Shop realisieren – und auch wenn es „nur“ ein Nebeprojekt war, sollte es natürlich trotzdem professionell werden. Aufgrund meiner eigentlichen Tätigkeit im Bereich Konzeption/UX/UI kam für mich nur eine Lösung in Frage, bei

Foto: Thorsten Barré von Ventylator / Frytch)

der ich im Frontend alles – ich betone noch mal: alles – selbst beeinflussen kann. Ich wollte bei keinem Button, keiner Textgröße, keiner einzigen Farbe andere Tools verwenden außer meinen eigenen.

Nach kurzer Recherche fiel meine Wahl auf VersaCommerce – eine SaaS-Lösung geeignet für E-Commerce-Starter und -Profis. So gibt es auch einige fertige Design-Vorlagen, mit denen man direkt loslegen kann. Für mich war aber viel wichtiger: VersaCommerce verspricht, dass man das Design und den Workflow komplett selbst in der Hand hat.

Vom Layout zum Shop: So habe ich es gemacht

Layout der Frytch-Produktseite.

Das Design war schon unabhängig und vor der Entscheidung für VersaCommerce entstanden und lokal gespeichert. Statt konkreter Inhalte hatte ich zu der Zeit noch Platzhalter. Und trotzdem: Das war nicht weiter dramatisch und im Folgenden zeige ich euch warum.

Layout-Code vs. Code mit VersaCommerce-Variablen.

1. Dokumentation: Auch für Nicht-Entwickler geeignet

Ich gab mir zwei Stunden, um mich in die Entwickler-Dokumentation einzulesen und dann möglichst schnell mit der Umsetzung zu starten. Die Dokumentation hat sich dabei als extrem strukturiert herausgestellt – und deswegen leider auch an vielen Stellen etwas zu theoretisch für meinen Geschmack (ich bin aber auch kein Entwickler).

Nichtsdestotrotz war sie hilfreich, um zumindest einen ersten Überblick über die grundsätzliche Logik zu bekommen. Alles Wissenswerte zum Admin-Interface war zudem im sogenannten „Handbuch“ zu finden.

2. Vom Design zum Code

Mit der Anmeldung bei VersaCommerce ging es dann weiter. Zusammen mit dem Zugang zum Admin-Interface erhielt ich auch die Zugangsdaten für den FTP-Server. Hier lagen auch das vorinstallierte Default-Design und die Templates, die ich schon ansatzweise aus der Doku kannte. Ich habe mich dafür entschieden, das fertige Design-Template als Referenzbeispiel für Abfrage-Loops und Variablen zu verwenden. Schritt für Schritt habe ich meinen Dummy-Inhalt durch die entsprechenden Variablen ersetzt. Dank Doku und Default-Theme ging das unglaublich schnell.

Neben dem Live-Shopsystem steht bei VersaCommerce auch eine Sandbox zur Verfügung. Das bedeutet, ich konnte den (Zwischen-)Stand meines Layouts jederzeit mit den Live-Produktdaten und trotzdem hinter den Kulissen testen. Und nach ein paar Stunden war mein Shop – zumindest das Design – fertig. Um weiter am lebendigen Produkt entwickeln zu können, habe ich noch ein paar weitere Produkte über das Backend eingepflegt, wo es eine Vielzahl von Möglichkeiten gibt, sie zu spezifizieren, kategorisieren und anderweitig zu beschreiben – inklusive SEO-Optimierungen.

3. Produktbilder anlegen: Ein Traum

Als wirklich großartig haben sich die Möglichkeiten zum Umgang mit Produktbildern herausgestellt. Über die Template-/Script-Sprache können Produktbilder immer exakt so skaliert und beschnitten werden, wie es für die optimierte Darstellung in den verschiedenen Templates (zum Beispiel Productview und Listen) gerade benötigt wird. Bis hin zum Qualitätsniveau ist alles über Parameter direkt in der Bildreferenz konfigurierbar.

4. Grandioser Support

An ein paar Stellen in meinen Templates bin ich allerdings doch an meine Grenzen gestoßen. Und weder die Doku noch das Beispiel-Layout haben mir weitergeholfen – oder zumindest war ich zu ungeduldig für eine umfassende Recherche.

Egal, nachdem ich das Chat-Tool im Backend aktiviert hatte, bekam ich einen direkten Draht zum Support-Team – Hilfestellung on demand! Von hilfreichen Links bis hin zu Code-Beispielen habe ich am Ende die entscheidenden Hilfestellungen bekommen, um innerhalb von Minuten weiter machen zu können. Spitze.

5. Der Shop ist live – nach weniger als 36 Stunden

Zu guter Letzt folgte noch ein Schwung an administrativen Einstellungen im Backend wie die Definition von verschiedenen Versand- und Rechnungsoptionen. Insbesondere hinsichtlich des Versands ist eine Vielzahl von Einstellungen möglich, inklusive daraus abgeleiteter Intelligenz, die direkt am Produkt und im Warenkorb/Checkout ausgespielt werden kann. Auch die Einbindung der üblichen Payment-Dienstleister kann über individuelle Private-Keys nahtlos in das VersaCommerce-SSL-Checkout-System eingebunden werden. Für meine Version 0.9 waren PayPal, Zahlung via Vorkasse und auf Rechnung ausreichend.

Fertiger Shop: Frytch-Produktseite.

Fertiger Shop: Frytch-Warenkorb.

Letzter Schritt für diese Beta-Version: Ich habe mein Theme aktiviert, das bisher auf der Sandbox lief – und fertig! Version 0.9 ist live, nach nicht mal anderthalb Tagen läuft mein vollfunktionsfähiger Shop – komplett mit eigenem Design!

6. Content-Marketing und SEO mit VersaCommerce-SaaS

In den nächsten Tagen und Wochen werde ich mich jetzt den weiteren Schritten widmen: Derzeitig beschäftige ich mich mit der Collections-Funktion, um – unter anderem nach SEO-Gesichtspunkten – für bestimmte Produkt-Ausprägungen (nach Kategorien, Tags oder auch manuell selektiert) Listen zusammenstellen. Dazu beginne ich, die direkt integrierte Blog-Lösung zu nutzen, um die Produktinformationen mit weiteren relevanten Inhalten zu untermauern.

7. Warenwirtschaft und weitere Zahlungsmöglichkeiten

Letzter Schritt: Kreditkarten. Dafür stehen bei VersaCommerce schlüsselfertige Integrationen mit bekannten Zahlungsabwicklern (Paymill) zur Verfügung – eine nahtlose Integration in den Checkout-Prozess ist also gewährleistet. Und obwohl ein Großteil der Prozesse zur Bestellabwicklung schon direkt und automatisiert in VersaCommerce integriert ist, werde ich die Anbindung des Warenwirtschaft-Plugins testen, um in Zukunft insbesondere auch Rechnungen mit einer direkten Verknüpfung zu generieren.

Fazit: In 36 Stunden zum perfekten Online-Shop

• Shop mit komplett eigenen Design – Mission accomplished!
• SEO und Contentmarketing – läuft!
• ERP und Rechnungslegung – sieht bis jetzt ziemlich gut aus!