Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

News

Mobile Commerce: So machen Händler ihren Shop noch rechtzeitig fit fürs Weihnachtsgeschäft

(Foto: Shutterstock)

Noch keinen mobil optimierten Onlineshop? Dann gehen dir Umsatz und Traffic in enormen Ausmaßen verloren. Gerade vor Weihnachten heißt es deshalb: schnell umstellen. Unsere ausführliche Mobile-Commerce-Anleitung für die gängigsten Shopsysteme hilft dir dabei.

Ohne einen mobil optimierten Onlineshop ins Weihnachtsgeschäft zu starten, ist zwar kein geschäftlicher Selbstmord, aber nicht mehr weit davon entfernt: Google straft Suchergebnisse ab, die immer größer werdende Schar der mobil einkaufenden Kunden springt ab – Umsatz und Traffic gehen verloren.

Der Marketing-Spezialist Twenga hat in seiner diesjährigen Untersuchung festgestellt, dass wir europaweit hinter England auf Platz 2 der mobilen Umsätze rangieren: 29,7 Prozent der Ausgaben resultiert aus mobilem Traffic. Mit 56 Prozent im Vergleich zum Tablet dominiert auch noch das Smartphone die Nutzungsgewohnheiten – das Gerät, das unbedingt eine eigene, mobile Ansicht braucht.

Deshalb: Ja, auch in der Weihnachtszeit darf noch am Onlineshop „geschraubt“ und ein mobiles Template für Smartphones und Tablets integriert werden. Wir haben eine schnelle Anleitung für die gängigsten Open-Source-Shopsysteme zusammengestellt.

(Screenshot: Teemondo.ch)
Neuere Shopware-Versionen sind bereits gerüstet für den Mobile-Commerce. Hier die Lösung im Einsatz beim schweizer Teehändler Teemondo. (Screenshot: Teemondo.ch)

Basics: Das sollten Shopbetreiber bei der Auswahl einer Mobile-Commerce-Lösung beachten

Eigentlich erfordert die Umstellung des Onlineshops auf ein mobil optimiertes Design viele Vorüberlegungen. Soll es ein responsives Design oder ein adaptives werden, wird nur ein einzelnes Template genutzt oder ein Template für die Desktop-Ansicht und eins für die mobile Ansicht? Oder vielleicht soll gar ein externes System für die mobile Lösung eingesetzt werden?

Eine Lösung von der Stange mit einem fertigen Template ist auch nicht unbedingt die erste Wahl – eigentlich sollten die Marke, die Geschichte und die Einzigartigkeit des Onlinehändlers mobil genauso unterstrichen und transportiert werden können wie in der Desktop-Ansicht. Doch das erfordert Zeit, Entwickler und Geld – zumindest ersteres hat kein Händler mehr, der jetzt mitten im Weihnachtsgeschäft noch ohne mobilen Fahrschein ist. Deshalb heißt es jetzt – zumindest vorübergehend – das Template von der Stange zu nehmen, geringfügig anzupassen, zu testen und zu aktivieren.

Mobile Commerce: In 5 Schritten zum mobilen Template

  1. Ein mobiles Template wählen, das parallel zum bestehenden Template installiert werden kann.
  2. Prüfen, ob eine Browserweiche integriert ist, die eine exakte Geräte-Erkennung ermöglicht. Falls nicht, nach einem Plugin für das Shopsystem suchen, das diesen Job übernimmt. Meist zu finden unter der Bezeichnung „Template Switcher“.
  3. Das mobile Template sollte, falls es nicht eine eigene Ansicht für Tablets bietet, nur auf Smartphones ausgespielt werden. Die klassische mobile Ansicht in Smartphone-Größe hat auf einem Tablet nichts verloren – dann lieber die Desktop-Version ausspielen.
  4. Einen Link zum Umschalten zwischen Desktop- und Mobile-Theme für Kunden anbieten
  5. Prüfen, ob die Payment-Module eine mobile Ansicht unterstützen. Falls das unklar ist, den Anbieter kontaktieren. Wenn ein Payment-Service-Provider eingesetzt wird, sollte abgeklärt werden, ob das Modul, die Hosted-Payment-Page oder die Integration für mobile Nutzung vorbereitet sind.

Mobile Commerce: Lokale Testumgebung für das neue Template einrichten

Die optimale Umsetzung erfolgt zuerst in einer Testumgebung, damit gesichert ist, dass in der Liveumgebung des Onlineshops nichts „zerschossen wird“. Dieser Schritt ist zwar optional, aber sehr empfehlenswert.

Dazu wird eine lokale Entwicklungsumgebung auf einem Rechner eingerichtet – keine Angst, das hört sich schlimmer an, als es ist. Eine Schritt-für-Schritt-Anleitung für die Einrichtung einer simplen Entwicklungsumgebung für Webanwendungen hat mein Kollege Florian Brinkman für euch verfasst – er erklärt das dort anhand des Blogsystems „Wordpress“, einfach in Gedanken durch euer Shopsystem ersetzen. Wichtig: Ihr müsst exakt die selbe Version eures Shopsystem installieren, die ihr auf eurem Server verwendet und euer Template vom selben Liveserver kopieren.

Euren lokalen Onlineshop könnt ihr mit Hilfe einer sogenannten Sandbox-Konfiguration euer Zahlungsanbieter komplett lauffähig machen – samt der Zahlungsabwicklung. Alle Zahlungen, die im Sandbox-Modus durchgeführt werden, sind fiktiv und dienen nur zur Überprüfung der Funktion. Die Sandbox-Daten bekommt ihr bei eurem Payment-Service-Provider oder beim Zahlungsdienst – wie beispielsweise bei der Paypal-Sandbox.

Die fertige Installation sollte dann einmal komplett durchgespielt werden, am besten von Freunden, Bekannten oder Verwandten – nicht nur von dir selbst. Kategorien durchklicken, Grafiken überprüfen und ganz besonders den Zahlungsvorgang durchspielen.

Abschließend ein Backup vom kompletten Onlineshop-System durchführen, dann das Test-System auf das Live-System übertragen. Alle aufgeführten Systemhersteller bieten für einen vergleichsweise geringen zwei- bis dreistelligen Betrag auch einen Installationsservice an.

Shopware

(Screenshot: Shopware)
Demo des mobilen Templates von Shopware. (Screenshot: Shopware)

Shopware bietet spezielle Templates, die schon vom Start weg responsive sind. Shopbetreiber, die bisher ein Template einsetzen, das nicht mobil optimiert ist, müssen aber nicht auf einen mobil optimierten Onlineshop verzichten. Solange das eigene Template auf dem Shopware-Emotion-Template basiert, kann für eine erste Lösung das Responsive-Kit für Shopware-Templates eingesetzt werden.

Das Responsive-Kit vom Hersteller Kipping Koncepts aus Hamburg kann als Plugin parallel installiert werden und soll das ursprünglich installierte Template unberührt lassen. Somit bleibt ein mühsam oder teuer personalisiertes Shopdesign erhalten und wird nur um ein mobiles Layout „ergänzt“, die Geräteerkennung des Plugins übernimmt die Auswahl des passenden Darstellungsmodus automatisch.

Magento

(Screenshots: Ghiradelli)
Mobile-Commerce bei Magento. (Screenshots: Ghiradelli)

Magento bietet sowohl für die Community-Edition, als auch für die Enterprise-Edition, ein kostenfreies HTML5-Theme von Magento an. Ein Nutzer berichtet von Einschränkungen bei Nutzung der Community-Edition – trotz vereinzelter Schwierigkeiten ist das Template die aktuelle kostenfreie Standard-Lösung. Das Template kann zusätzlich zum „normalen“ Standard-Template aktiviert werden, ohne das bestehende Template zu beeinträchtigen.

Die Aktivierung erfolgt nach der Installation im Magento-Backend System unter „Konfiguration – Design“. Im Blog der MageDeveloper ist eine detaillierte Anleitung zur Inbetriebnahme des Templates zu finden. Der wichtigste Punkt: Das Theme wird nicht als neues „Standard-Theme“ aktiviert, sondern nur als „Ausnahme“ – im Englischen als „Exception“ – hinzugefügt. Dazu wird als regulärer Ausdruck der sogenannte „User-Agent“ des Browsers als „Ausnahme“ hinzugefügt, bei dem das mobile Template aktiv werden soll. Beispiel für den notwendigen Eintrag: iPhone|iPod|BlackBerry|Palm|Googlebot-Mobile|Mobile|mobile|mobi|Windows Mobile|Safari Mobile|Android|Opera Mini.

Nachteil dieser Methode ist die Ungenauigkeit der Angaben, macht man die Auswahl des Templates nur vom User-Agent abhängig, sind Smartphone und Tablet manchmal gar nicht zu unterscheiden, da nicht jeder Browser eindeutig verrät, ob er auf einen Smartphone, einem Tablet oder einem Desktop-Rechner läuft. Deshalb empfiehlt es sich, das Template mit einem zusätzlichen Modul zu verbinden, dass die Geräteerkennung zuverlässiger übernimmt: dem kostenfreien Theme-Switcher von MageStore.

Ein praktisches Goodie ist das „WhatsApp-Plugin“, das es Kunden erlaubt, Produkte einfach mit ihren WhatsApp-Kontakten zu teilen.

Prestashop

(Screenshot: Prestashop)
(Screenshot: Prestashop)

Prestashop liefert ab Version 1.5 ein eigenes mobiles HTML5-Template mit aus, das über „Backoffice – Vorlagen“ aktiviert werden kann. Nutzer älterer Versionen können das betreffende Plugin auch nachträglich installieren, in diesem Fall sollte auch das PayPal-Modul aktualisiert werden. Das Modul ist für Deutschland angepasst und lokalisiert.

Bei Prestashop kann mit mehreren Templates gleichzeitig gearbeitet werden: Das mobile Template wird zusätzlich zum schon bestehenden Template aktiviert und verändert das vorhandene Template für die Desktop-Version nicht.

Falls das mobile Template direkt von Prestashop nicht gefällt und Shopbetreiber lieber eins der anderen erhältlichen responsiven Templates nutzen wollen, kann mit der Hilfe eines Zusatzmoduls auch ein Template verwendet werden, das eigentlich für die Nutzung in allen Anzeige-Modi vorgesehen ist. Ein Template-Switcher für 29,99 Euro hilft auch hier weiter: Das Modul aktiviert das neue Template nur bei mobilen Endgeräten.

Oxid

(Screenshots: Lodenfrey)
(Screenshots: Lodenfrey)

Oxid eShop liefert seit der Version 4.8 automatisch ein mobiles Theme mit. Nutzer der Version 4.7 können das Template im Marktplatz „Oxid eXchange“ runterladen. Das Theme bringt gleichzeitig das Modul „Theme Switcher“ mit, das für die Erkennung des genutzten Endgeräts zuständig ist und das Theme wechselt. Für PayPal wird das „Portlet Paypal Modul“ benötigt.

Das mobile Theme wird hier zusätzlich installiert, das ursprüngliche Theme bleibt unverändert erhalten.

Einen wertvollen Tipp für den Fall, dass Kunden manuell das Theme mit einem Klick auf den dafür vorgesehenen Link wechseln, liefert ecomstyle.de: Der Wechsel schickt den Kunden zurück zur Startseite und bleibt nicht auf der gerade besuchten Seite – damit das nicht passiert, ist eine kleine Anpassung nötig.

Wer zusätzlich zu den Produktkategorien mobil noch die Herstelleransichten aktivieren will, dem hilft das Modul „Wendnet-MobileManufacturers“.

xt:Commerce

(Screenshot: xt:Commerce)
(Screenshot: xt:Commerce)

Die aktuellen Versionen von xt:Commerce sind mit einem mobilen Template versehen, auch die kostenfreie Version „Start!“ ab Version 4.1 bietet dieses Feature schon. Den Nutzern jüngerer Versionen empfiehlt xt.Commerce ein kostenloses Upgrade auf xt:Commerce Start! 4.1.

Nutzer, die verständlicherweise in der Weihnachtszeit keine Migration des Shopsystems vornehmen wollen, besonders, da die Version 3.0.4 SP2.1 noch einen völlig anderen Software-Kern besitzt, können auch die alte xt:Commerce-Version 3 mit einem mobile Theme ausstatten.

Beide mobilen Themes verfügen über eine jQuery-Mobile-basierte Browserweiche und bieten so eine Geräteerkennung, die automatisch von der Standard-Desktop-Version des Onlineshops auf die mobile Version umschaltet.

Das mobile Theme kann ohne Beeinträchtigung des bisherigen Desktop-Themes installiert werden.

Gambio

(Screenshot: Gambio)
(Screenshot: Gambio)

Gambio ist eine modifizierte und modernisierte Fassung der altbekannten xt:Commerce-Version 3. Auch für Gambio gibt es ein kostenfreies Mobile-Template. Das Template „MobileCandy“ ist im Gambio-Kundenportal für die Versionen ab GX 1.0.15e und ab GX2 2.0.6g kostenfrei verfügbar oder kann direkt runtergeladen werden.

Das mobile Template „MobileCandy“ wird zusätzlich zum bestehenden Template installiert und funktioniert parallel zum vorhandenen Template.

Auch das MobileCandy-Template verfügt über eine integrierte Browserweiche, ein zusätzliches Modul soll hier nicht nötig sein.

Eigenständiger, mobiler Shop: Shopgate, MoVendor, NewStore

(Screenshots: Shopgate)
(Screenshots: Shopgate)

Eine weitere, schnelle Lösung lässt sich für viele gängige Shopsysteme mit einem „zweiten Onlineshop“ erreichen. Anbieter wie die deutschen Hersteller Shopgate und MoVendor bieten Web-Apps an, die quasi einen eigenständigen, rein mobilen Onlineshop darstellen – Shopgate bietet zusätzlich noch native Apps an.

MoVendor bietet rein provisionsabhängige Tarife an, bei Shopgate kostet das kleinste Paket aktuell 59 Euro monatlich. Die Anbindung von MoVendor erfolgt per CSV-Datei oder XML-Produktdaten-Stream mit manueller oder automatischer Synchronisierung, Shopgate besitzt Schnittstellen zu vielen gängigen Shop- und Warenwirtschaftssystemen und kann per Plugin angebunden werden. NewStore ist ein noch recht neues US-Unternehmen mit deutschen Wurzeln und bietet eine komplexe Mobile-Commerce-Lösung für Omnichannel-Integrationen.

Mit diesen Lösungen sollte einer mobilen Optimierung eures Shops für die Vorweihnachtszeit eigentlich nichts mehr im Weg stehen.

Ebenfalls interessant:

Finde einen Job, den du liebst

Bitte beachte unsere Community-Richtlinien

4 Reaktionen
carsten

Ein weiterer Anbieter für wenige Produkte mit Zahlungsabwicklung ist HOLVI.com

Antworten
Nadine Brokmann

Schade, dass Du das beste Shop-System aus Deutschland in Deinem Artikel vergessen hast! Naja, vielleicht holst Du das ja irgendwann mal nach. Viele Grüße...

Antworten
carsten

Das beste Shop-System wäre dann?

Antworten
Nadine Brokmann

VersaCommerce.de natürlich ;-)

Melde dich mit deinem t3n-Account an oder fülle die unteren Felder aus.

Abbrechen