Migration eines Shopfiy Shops auf Magento

Über Type Hype

Type Hype ist ein Label für Design-Kollektionen von in Deutschland und Österreich gestalteten und gefertigten Premiumprodukten rund um das Thema Typografie. Neben dem Onlineshop betreibt Type Hype einen Concept-Store in Berlin-Mitte.

Mothership sorgte für die Migration von Type Hypes ursprünglichem Shopify-Onlineshop auf Magento.

https://typehype.com

Aufgabenstellung

Der bisherige Online-Store wurde vom Kunden mit dem System von "Shopify" betrieben. Da damit aber viele Einschränkungen verbunden sind und die Anforderungen den Möglichkeiten nicht mehr gerecht wurden, entschied man sich, einen kompletten Neuaufbau mit Magento durchzuführen.

User und Kunden greifen heutzutage vermehrt, teilweise sogar überwiegend, mit mobilen Endgeräten auf E-Commerce-Shops zu. Deshalb bestand eine starke Fokussierung auf die volle "Responsiveness" des Magento Shops. Dazu wurden für die unterschiedlichen Auflösungen der Devices und deren speziellen Use-Cases, optimierte Front-End Oberflächen entwickelt.

Dem Kunden soll ein Einkaufserlebnis geboten werden, das sich durch innovative Features von Standardshops abhebt. Spielerisch wird der User auf den Seiten der verschiedenen Design-Linien von TYPE HYPE zu den Produkten geführt, informiert sich über die Hersteller der Artikel und kann sich über einen Konfigurator individuelle Produkt-Sets in Echtzeit generieren lassen. Des Weiteren wurde besonderer Wert auf eine benutzerfreundliche Navigation gelegt. Dem Kunden wird eine klare Menüführung vorgegeben, die es ihm leicht macht, sich innerhalb der verschiedenen Bereiche des Magento Shops (Produktbereich, Design-Linien, Support- und Kundenbereich, Warenkorb, Checkout etc.) zurechtzufinden.

Realisierung

Produkt-Konfigurator

Für den Produkt-Konfigurator wurde mit AngularJS eine Applikation entwickelt, die im gesamten Shop integriert werden kann. Die Produktdaten für den Konfigurator werden über JSON zur Verfügung gestellt. Die Produktsets, welche durch Eingabe von beliebigen Zeichenketten in ein Input-Feld durch den User generiert werden, können über Filter angepasst werden. Eingaben des Users im Hauptmenübereich „Wohnen & Küche“ liefern im Ergebnis nur Produkte aus der entsprechenden Produktgruppe.

Point of Sale

In Berlin-Mitte betreibt TYPE HYPE ein Ladengeschäft, in welchem sowohl Produkte aus dem Online-Store als auch Gastronomie angeboten wird. Um dieser Konstellation gerecht zu werden, wurde eine Kassen-Lösung für den Point of Sale realisiert, welche verbunden mit einer einfachen Usability den Ladengeschäftsmitarbeitern die Möglichkeit bietet, alle Verkäufe über den Magentostore abzuwickeln.

Design-Linien

Um die verschiedenen Design-Linien von TYPE HYPE vorzustellen und die Produktlinien in ihrer Vielfalt darzustellen, wurden hochwertige Fotografien in passenden Locations erstellt. Um diese Darstellung nach Art eines Lookbooks im Shop direkt mit Produkten für den E-Commerce zu verbinden, können die Artikel auf den Fotos mit Punkten getaggt werden, die durch Anklicken eine Mini-Produktinformation erscheinen lassen. Hier kann der Artikel auch direkt in den Warenkorb gelegt werde, oder man kann von dort direkt auf die Produktdetailseite navigieren. Die Produkt-Tags können vom Kunden im Backend einfach administriert werden und ihre Positionen bleiben, unabhängig von Auflösung und Endgerät, immer korrekt auf den Fotos platziert, so dass eine volle Responsiveness garantiert ist. Die Artikeldaten, die in den Pop-Ups erscheinen werden über einen JSON-Feed zur Verfügung gestellt und aktualisieren sich automatisch. Dadurch kann der Kunde Fotos austauschen oder neue hinzufügen und hat immer die Möglichkeit, neue Produkte zu integrieren.

Responsiveness

Für die optimale Darstellung des Magento Shops auf verschiedenen Endgeräten und Displays wurden Designanpassungen über vier Breakpoints angelegt. Die Bildschirmbreiten der Stufen sind >1600px für große Desktop-Displays, >1024px für Laptop-Displays, >768px für Tablets und

Attribute-Filterung

Die Produktwelt von TYPE HYPE zeichnet sich durch mehrere Design-Linien aus. Der User hat auf der Produktübersichtseite die Möglichkeit über eine Kombination aus verschiedenen Filtern das gewünschte Item zu finden. Außerdem ist es möglich, die Reihenfolge der angezeigten Produkte durch weitere Filter zu ändern.

Weitere Features…

Das Design, das deutlich vom Standard abweicht, überzeugt auf allen Ebenen des Shops durch weitere funktionale und optische Features. So gibt es ein Off-Canvas-Menü, über das ein Sprachwechsel möglich ist und worüber navigiert werden kann. Das Hauptmenü wird beim Herunterscrollen automatisch verborgen und kommt beim Hochscrollen wieder zum Vorschein. Dadurch werden die Produkte und Inhalte des Shops stärker in den Fokus gerückt. Da es viele Produkte in verschiedenen Ausführungen gibt, existieren auch für jede der Varianten vollflächige Bilder in einer eigenen Produktgalerie. Wichtige Bereiche des Shops, wie die Produktdetailseiten, bieten die Möglichkeit, die jeweiligen Inhalte direkt in sozialen Netzwerken zu teilen. Die Administration des Shops durch die Mitarbeiter von TYPE HYPE wurde durch die Möglichkeit erleichtert, Produktreihenfolgen per Drag-&-Drop im Backend des Shops zu verändern. Auch sind nun Änderungen der Produktstammdaten direkt auf der Übersicht der Produktadministrationsseite möglich.