biersafe-hover.mp4

Viele E-Commerce-Websites verwenden das gleiche generische Website-Format mit einer Landing Page, Produktseiten, Katalog, Kategorieseiten und einigen anderen Zusatzseiten, wie einer About Page, einer FAQ-Seite, Blog-Posts und einer Kontaktseite. Im Großen und Ganzen funktioniert diese Formel gut, um die Besucher mit allen notwendigen Informationen zu versorgen, aber sie kann repetitiv und eintönig sein. Eine Möglichkeit, einen E-Commerce-Shop interessanter zu gestalten, sind strategisch platzierte Animationen. Eine Vielzahl von Animationen kann in eine Website integriert werden, um Besucher zu fesseln und zu unterhalten und gleichzeitig die wichtigsten Bereiche der Website hervorzuheben.

E-Commerce-Websites, die Animationen effektiv einbinden, halten die Besucher länger auf ihrer Website und verwandeln mehr Besucher in zahlende Kunden. Nachfolgend erfährst du mehr über die fünf häufigsten Arten von Animationen und wie Animationen mit Hilfe von Webtechnologien und Frameworks eingebaut werden können.

In der Welt der Webentwicklung sind Animationen Seitenelemente, die sich verändern oder bewegen. Animationen können durch eine Vielzahl von Technologien hinzugefügt werden, darunter CSS, JavaScript, Lottie, SVG, Canvas und WebGL/WebGPU. Webseitenanimationen hauchen einer ansonsten statischen Website Leben ein und helfen dabei, eine langweilige 2D-Erfahrung in eine aufregende Erlebniswelt voller Bewegung und Dimension zu verwandeln. Heutzutage sind Animationen überall auf Webseiten im Internet zu finden, obwohl viele Animationen unbemerkt bleiben, weil sie subtil und unauffällig sind. Aber selbst die subtilsten Animationen können das Nutzererlebnis verbessern.

Es gibt fünf primäre Animationstypen, die dazu beitragen, das Engagement und das Interesse zu steigern. In diesem Leitfaden werden die fünf Animationstypen in der Reihenfolge ihres erhöhten Effekts und Schwierigkeitsgrads vorgestellt:

Hover- oder Mouseover-Animationen sind eine wunderbare Möglichkeit, eine Webseite aufzupeppen und gleichzeitig die Aufmerksamkeit auf ein bestimmtes Seitenelement zu lenken. Mit der zunehmenden Komplexität von E-Commerce-Shops steigt auch die Anzahl der Elemente auf einer Seite. Manchmal kann es für Besucher schwierig sein, zu erkennen, wo sich ihr Cursor innerhalb eines Menüs oder einer Reihe von Elementen befindet. Mit Hover-Animationen können Websites dem Benutzer bei Bedarf mehr Informationen zur Verfügung stellen, ohne wertvollen Platz auf der Seite zu verschwenden. Die meisten ausgefeilten und professionellen E-Commerce-Websites nutzen Mouseover-/Hover-Übergänge in großem Umfang, da sie die Benutzerfreundlichkeit erheblich verbessern.


Im folgenden Beispiel ist eine deutliche Verbesserung der Präsentation und Hervorhebung zwischen der normalen Produktkarte und der Produktkarte beim hovern mit der Maus zu sehen.

biersafe-cart-animation.mp4

leetdesk-intro-animation.mp4

Hover-Animationen sind mit CSS (Cascading Style Sheets) sehr einfach zu implementieren. Es gibt Dutzende von verschiedenen Hover-Effekten, die einer E-Commerce-Website hinzugefügt werden können, um sie visuell interessanter zu machen, einschließlich Änderungen von Schatten, Radius, Farbe, Transparenz, Skalierung und vielem mehr. Leider funktionieren Hover-Effekte auf Touch-Geräten, die oft einen großen Teil des Internetverkehrs ausmachen, nicht wie vorgesehen.

Bewegte Elemente haben eine starke Anziehungskraft auf das Auge und eignen sich daher hervorragend, um wichtige Elemente hervorzuheben. Die Nutzer werden durch bewegliche Elemente stärker angesprochen als durch statische, aber es ist wichtig, ein Gleichgewicht zwischen statischen und beweglichen Seitenelementen zu finden. Zu viele bewegliche Elemente können ablenkend oder überwältigend sein, aber einige wenige, strategisch platzierte bewegliche Elemente können die Art und Weise, wie eine Seite aufgenommen und betrachtet wird, verändern. Diese Art von Animationen kann ein positives Gesamterlebnis beim Besuch einer E-Commerce-Website schaffen, so dass die Wahrscheinlichkeit eines erneuten Besuchs größer ist, selbst wenn beim ersten Mal kein Kauf getätigt wird.

Diese Elemente können sich als Reaktion auf eine Aktion oder einen Klick bewegen, sich kontinuierlich bewegen, während der Besucher auf der Seite ist, oder beim Laden der Seite auftreten. Hier sind zwei Beispiele für sich bewegende Elemente, das erste ist eine einfache Implementierung eines Einkaufswagen-Modals und das zweite ist eine komplexere Hero-Animation:

skeleton-animation.mp4

Skelette und Ladeindikatoren sind wesentliche Elemente jeder E-Commerce-Website, die ihre Nutzer halten will. Beim Surfen im Internet haben die Nutzer eine sehr geringe Toleranz für Wartezeiten. Viele Daten verlängern manchmal die Ladezeit, daher ist es wichtig, das Interesse des Besuchers so lange wie möglich aufrechtzuerhalten. Skelett-Bildschirme erwecken den Eindruck, dass die Ladezeit einer Seite viel kürzer ist als sie tatsächlich ist. Ein Skeleton-Bildschirm lenkt die Benutzer ab, während die Seite geladen wird, weil ihr Auge auf der Seite umherwandert und erwartet, dass sich der Webinhalt füllt, anstatt nur auf eine leere Seite zu starren. Skelettbildschirme mit Bewegung sind am effektivsten, weil sie die wahrgenommene Ladezeit weiter verringern.

loading-spinners.mp4

Ladeindikatoren sind eine weitere Methode zur Information über den Status der Website. Jede Website-Funktion, die länger zum Laden braucht als der Rest der Website, sollte Ladeanzeigen verwenden. Ladeindikatoren werden in der Regel in Form eines sich unendlich drehenden Kreises (Rotationsbewegung) oder eines Fortschrittsbalkens (lineare Bewegung) dargestellt. Kreative Ladeindikatoren, die einen neuen Ansatz verfolgen, können die Aufmerksamkeit des Kunden jedoch viel länger aufrechterhalten. Die Besucher werden sich von der Animation angezogen fühlen und etwas länger warten wollen, um die volle Auflösung zu sehen.

mac-studio-scroll-animation.mp4

Eine der coolsten Animationsarten, die man in einen E-Commerce-Shop einbauen kann, sind Bildsequenz-Animationen beim Scrollen. Wenn Nutzer auf einer Seite mit dieser Funktion landen, bewegen und verändern sich die Bilder beim Scrollen. Dies ist eine absolut fesselnde und visuell attraktive Art, Informationen zu präsentieren. Es macht den Nutzern Spaß, die Bilder durch Hoch- und Runterscrollen zu manipulieren. Die Einbindung von Bildsequenzen ist ein viel aufwändigerer Prozess als andere Animationsarten, aber die Ergebnisse sind fesselnd und ermöglichen es einem E-Commerce-Shop, die Merkmale eines Produkts auf spannende Weise zu erklären.

Bildsequenzen müssen im Voraus entworfen werden, aber wenn geeignete Bildgrößen verwendet und intelligent geladen werden, werden sie die Ladezeiten der Seite nicht zu sehr verlangsamen. Apple setzt Bildsequenzen auf brillante Weisen ein, um ihre Produktseiten spannend zu gestalten, wie z.B hier auf der Mac Studio Seite. Wenn der Benutzer scrollt, ändern sich die Bilder auf der Seite:

jmes-animation.mp4

Bist du es leid, dass sich die gleichen langweiligen Heldenabschnitte auf E-Commerce-Websites immer und immer wieder wiederholen? Bilder und Illustrationen sind nur begrenzt spannend. Aber neuere Optionen wie 3D-Szenen helfen dabei, einen Hero-Abschnitt im Handumdrehen aufzupeppen. 3D-Szenen werden verwendet, um eine interaktive und fesselnde Geschichte rund um ein Produkt zu erzählen. Diese Szenen können Schlüsselinformationen wie die Produktspezifikationen, das Problem, das ein Produkt löst, und die Gründe, warum ein Kunde dieses Produkt braucht, aufzeigen.

Der Haken an der Sache ist, dass 3D-Szenen eine Menge Arbeit bedeuten. Ein UX- und 3D-Designer wird höchstwahrscheinlich benötigt, um den Fluss der 3D-Welt zu entwerfen und die 3D-Objekte zu erstellen. Obwohl es sich hierbei um eine neue Animationstechnologie handelt, ist zu erwarten, dass sie in den nächsten Jahren massiv zunehmen wird, da immer mehr Geräte in der Lage sind, 3D-Szenen auszuführen. JMES zum Beispiel hat eine außergewöhnliche 3D-Story, die sich entfaltet, wenn der Benutzer durch die Szene blättert und mit ihr interagiert.

Unterschiedliche Animationen erfordern unterschiedliche Technologien zur Umsetzung. Einfache Animationen können CSS verwenden, während fortgeschrittene 3D-Animationen möglicherweise mit WebGL/WebGPU erstellt werden müssen. Dieser Leitfaden behandelt die 6 am häufigsten verwendeten Animationstechnologien in der Reihenfolge ihres Schwierigkeitsgrades:

Cascading Style Sheets (CSS) ist das Rückgrat des Designs einer jeden Website. Während HTML die Struktur einer Webseite umreißt, diktiert CSS die visuellen Aspekte. Ohne CSS würde eine E-Commerce-Website aussehen, als käme sie direkt aus den frühen 2000er Jahren. CSS ist eine leistungsstarke Technologie, die auch von Anfängern leicht erlernt werden kann, für die es aber eine sehr hohe Kompetenzgrenze gibt. Talentierte Entwickler können schöne und komplexe Animationen nur mit CSS erstellen. Für die meisten E-Commerce-Websites können einfache Hover-Animationen ganz einfach mit CSS hinzugefügt werden.

SVGs sind skalierbare Vektorgrafikdateien, die Animationen und Interaktivität unterstützen. SVGs bestehen nicht aus Pixeln wie herkömmliche Bilddateien, d. h. sie können ohne Qualitätsverlust auf eine beliebige Auflösung skaliert werden. SVGs sind eine hervorragende Animationstechnologie, da sie mit CSS gestaltet und animiert werden können. Die gleichen Animationen, die für CSS verwendet werden, wie Keyframes, Dauer, Easing und Verzögerung, können auch auf SVGs angewendet werden.

Lottie ist eine JSON-basierte Animationsdatei, die erstmals 2015 entwickelt wurde und einer GIF-Datei ähnelt. Lottie-Dateien sind klein, können aber skaliert werden, ohne dass es zu Problemen mit Verpixelung kommt, und lassen sich daher leicht für verschiedene Bildschirmgrößen verwenden. Ein Designer kann eine Animation ganz einfach in einem Animationsprogramm wie After Effects erstellen und sie dann als Lottie-Datei für das Web exportieren. Lottie-Dateien sind weit verbreitet und haben die Verwendung von GIFs überholt.

JavaScript macht aus einer schönen Website, die mit HTML und CSS erstellt wurde, eine interaktive Website! Während HTML und CSS statische Seiten erzeugen, ermöglicht JavaScript die Implementierung komplexer Funktionen, einschließlich 2D/3D-Animationen und Scroll-Animationen. Es ist eine sehr mächtige Sprache, so mächtig, dass sie von 97,6 % aller Websites verwendet wird. Zum Glück sind die Grundlagen leicht zu erlernen, und es gibt Dutzende von Frameworks und Bibliotheken, die den Entwicklungsprozess beschleunigen.

Canvas ist eine großartige Technologie zur Erstellung von benutzerdefinierten Animationen, wie Bildlaufanimationen oder Bildsequenzen. Canvas ist ein HTML-Element, das einen leeren Bereich zum Zeichnen von Formen, Linien und anderen Grafiken mithilfe der Canvas-API erstellt. Es verwendet JavaScript für Animationen, so dass ein Entwickler, der JavaScript beherrscht, leicht mit der Erstellung von Animationen mit Canvas beginnen kann.

WebGPU ist der Nachfolger von WebGL, das wiederum der Nachfolger von OpenGL ist. Sie alle ermöglichen die Erstellung von komplexen 3D-Szenen. Mit der Entwicklung dieser Technologien wurden sie immer ausgefeilter und leistungsfähiger. WebGL-Animationen werden innerhalb eines Canvas-HTML-Elements erstellt. Für die Arbeit mit WebGL ist ein umfassendes Verständnis von JavaScript erforderlich. WebGPU ist noch leistungsfähiger und effizienter, befindet sich aber noch im Entwicklungsstadium.

Glücklicherweise haben talentierte Entwickler Frameworks und Bibliotheken entwickelt, die die Implementierung von Animationen in eine E-Commerce-Website wesentlich vereinfachen. Frameworks sind eine Unterstützungsstruktur mit vorgefertigten Komponenten, die den Bedarf an benutzerdefinierter Programmierung drastisch reduzieren. Frameworks tragen auch dazu bei, die Entwicklungszeiten zu verkürzen, indem sie Entwicklern eine schnelle Möglichkeit bieten, Funktionen wie Hover-Animationen, Ladeanzeigen, 3D-Szenen und andere wichtige Webseiten-Komponenten hinzuzufügen.

JavaScript ist die am häufigsten verwendete Programmiersprache für das Hinzufügen von Interaktivität zu HTML und CSS, um eine vollständig ausgearbeitete E-Commerce-Website zu erstellen, daher sind viele der unten aufgeführten Beispiele JavaScript-Frameworks/Bibliotheken:

Der E-Commerce ist eine wettbewerbsintensive Welt mit Tausenden, wenn nicht Hunderttausenden von Geschäften, die um das Geschäft konkurrieren. Eine E-Commerce-Website sollte immer das Erlebnis des Nutzers berücksichtigen, um sich von der Masse abzuheben. Besucher wollen nicht auf einer langweiligen Website ohne visuelles Interesse surfen. Deshalb ist das Hinzufügen von Animationen zu einer E-Commerce-Website von unschätzbarem Wert für die Steigerung der Conversionrate.

Durch die Einbindung verschiedener Animationstypen, wie z. B. Hover-Animationen, Ladeanimationen, Bildsequenzen und 3D-Szenen, wird eine interaktive und ansprechende Website für die Besucher geschaffen. Diese können mit verschiedenen Technologien erstellt werden, von CSS für einfache Animationen bis zu WebGPU für die fortschrittlichsten 3D-Animationen, die heute verfügbar sind. Aber Entwickler müssen nicht bei Null anfangen, denn es wurden zahlreiche Frameworks und Bibliotheken entwickelt, um die Zugänglichkeit dieser Technologien zu verbessern und die Entwicklungszeiten zu verkürzen.

Die Quintessenz? Animationen sind eine Voraussetzung, um in der Welt des E-Commerce im Jahr 2022 wettbewerbsfähig zu sein, müssen aber mit Bedacht eingesetzt werden, um langsame Ladezeiten und Probleme mit der Reaktionsfähigkeit zu vermeiden.

Animationen in E-Commerce Seiten

Im letzten Artikel haben wir die Vor- und Nachteile einer Headless E-Commerce-Website besprochen. Jetzt ist es an der Zeit, die beiden führenden Headless-Plattformen, Shopify und Swell, miteinander zu vergleichen. Jede dieser Plattformen hat Stärken und Schwächen, aber nur du kannst entscheiden, welche die beste Option für deine E-Commerce-Website ist.

Die E-Commerce-Plattform Shopify ist im Vergleich zu Swell der klare Marktführer. Shopify ist ein Synonym für E-Commerce und ist oft die erste Plattform, die die meisten Leute erwähnen, wenn sie über E-Commerce sprechen. Über 1 Million E-Commerce-Unternehmen nutzen Shopify in über 175 Ländern.

Shopify-Storefronts sind sehr beliebt und werden von Top-Marken wie Pepsi und Staples genutzt. Ein Viertel des Shopify-Umsatzes stammt von Großunternehmen wie Nestle und Unilever. Es liegt auf der Hand, dass Shopify eine großartige E-Commerce-Plattform bietet, die große Unternehmen anzieht.

2. Die Storefront-API bietet eine hervorragende Headless-Integration

Shopify erleichtert die Integration in eine Headless-Site mit seiner GraphQL Storefront API. Entwickler können mit den API-Bibliotheken von Shopify ganz einfach schnelle und einzigartige Kundenerlebnisse schaffen. Wähle aus einer langen Liste von beliebten Frameworks wie:

3. Integrationen und Apps von Drittanbietern

Shopify verfügt über Tausende von Integrationen und Apps von Drittanbietern, mit denen du deine E-Commerce-Website verbessern kannst. Die meisten etablierten Shopify-Besitzer haben eine handvoll Integrationen integriert, während 35 % bis zu 10 Integrationen nutzen.

Nutze Integrationen, um neue Kunden in dein Geschäft zu bringen und deinen Umsatz zu steigern. Verbinde deine Geschäftssysteme und baue das Kundenerlebnis von Anfang bis Ende aus. Mit Integrationen und Anwendungen von Drittanbietern kannst du auf neue digitale Veränderungen eingehen, die Ansprache deiner bestehenden Kunden personalisieren und gezielte Werbeaktionen basierend auf Kundenverhalten durchführen.

Shopify hat einen eigenen App-Store, in dem du nach Tausenden von nützlichen Integrationen suchen kannst. Du kannst für so ziemlich alles eine Integration oder eine Drittanbieter-App finden. Shopify bietet alle Favoriten wie  MailChimp, Printify, Google, und Instafeed, sowie kleinere Nischenintegrationen.

Mit einer Million Shops, die Shopify nutzen, gibt es eine große Community rund um die Plattform.

Die lebendige Community von Shopify macht deine Arbeit als Shopbesitzer viel einfacher. Finde und verbinde dich mit Entwicklern, Marken und Shopbesitzern aus der ganzen Welt. Profitiere vom ständigen Angebot an Shopify-Talenten und bleibe auf dem Laufenden über die neuesten E-Commerce-Trends.

1. Anfänglich fehlte die Unterstützung für Headless

Shopify wurde nicht mit dem Gedanken an einen Headless-Ansatz entwickelt, sondern nachträglich angepasst um die wachsende Nachfrage nach Headless-Optionen zu erfüllen. Das bedeutet, dass Shopify nicht so anpassbar oder flexibel ist wie eine E-Commerce-Plattform, die speziell für die Unterstützung einer Headless-Architektur entwickelt wurde.

2. Extrem begrenzte Optionen und Varianten

Shopify ist nicht für die Aufnahme von vielen Optionen und Varianten für deine Produkte ausgelegt. Du bist auf 3 Optionen und 100 Varianten pro Produkt beschränkt. Das klingt erstmal ausreichend, oder? Ist es in vielen Fällen aber leider nicht. Wenn du anpassbare Produkte in deinem Shop verkaufst, wirst du diese Einschränkung schnell zu spüren bekommen. Schauen wir uns das mal genauer an, damit du besser verstehst, wie limitierend das ist:

Stell dir vor, du verkaufst ein T-Shirt mit drei Optionen:

Wenn du eine weitere Option hinzufügen möchtest, wie Länge, Breite, benutzerdefinierten Text oder was auch immer du dir vorstellen kannst, kommst du nicht weiter. Du musst zuerst eine Option entfernen. 

Stell dir nun die Werte für diese drei Optionen vor:

Farbe: Rot, Blau, Gelb, Grün, Orange, Schwarz, Grau

Stil: Rundhalsausschnitt, Scoop-Ausschnitt, V-Ausschnitt

Die Größe hat vier mögliche Werte, die Farbe sieben und der Stil drei. Multipliziere diese Werte miteinander (3 x 7 x 4), und du bist bereits bei 84 Varianten. Du kannst zu keiner deiner Optionen einen weiteren Wert hinzufügen, ohne die 100-Varianten-Regel zu überschreiten.

In einer E-Commerce-Landschaft, in der Optionen und Größenvielfalt im Vordergrund stehen, stellt dies ein großes Problem dar. Deine Kunden werden sich beschweren, dass du ihre Größe nicht führst oder das Produkt nicht in genügend Farben oder Varianten hast.

Wenn du dich zu einer internationalen Marke mit Kunden auf der ganzen Welt entwickeln willst, brauchst du die richtigen Lokalisierungsfunktionen. Bei Shopify musst du Hürden überwinden, um all deine Produktnamen, Optionsnamen und Variantennamen in die richtige Sprache zu übersetzen, damit sie für internationale Besucher geeignet sind. Du musst eine separate App aus dem Shopify App Store verwenden, da die Übersetzungsfunktionen nicht nativ unterstützt wird.

Das Ziel einer Headless-Plattform ist die Anpassung an die Erwartungen deiner Kunden. Was auch immer du dir ausdenken kannst, du solltest es auch umsetzen können. Shopify ist unzureichend, insbesondere bei der Anpassung des Checkouts.

Du bist auf eine bestimmte Anzahl von Styling-Optionen für deine Checkout-Seiten beschränkt. Wenn du Änderungen vornehmen möchtest, die über diese Optionen hinausgehen, bist du gezwungen, ein Upgrade auf Shopify Plus durchzuführen. Shopify Plus kostet dich zusätzliche $2000 (oder mehr) pro Monat, nur damit du benutzerdefinierte Checkout-Skripte hinzufügen kannst.

Sobald du auf Shopify Plus aufrüstest, kannst du die checkout.scss.liquid-Assets bearbeiten. Aber sollte diese Anpassung nicht einfach in der Standardversion von Shopify enthalten sein?

Die Kunden wollen sehen, was sie kaufen, bevor sie sich zu einem Kauf entschließen. Sie möchten die Produkte aus verschiedenen Blickwinkeln oder, im Falle von Kleidung, an verschiedenen Modellen betrachten. Shopify schränkt die Möglichkeit ein, diese Kundenerwartung zu erfüllen, indem es nur ein Bild pro Variante unterstützt. 

Verkaufst du ein Hemd mit Motiven auf der Vorder- und Rückseite? Dann musst du dich entscheiden, welche Seite des Hemdes du zeigen willst. Verkaufst du eine Uhr mit zahlreichen interessanten Designmerkmalen? Leider kannst du nicht jedes Merkmal zeigen, sondern musst ein einziges Foto auswählen, das diese Variante repräsentiert. 

Ein Bild pro Variante ist eine große Einschränkung für eine E-Commerce-Website, vor allem, wenn du mit Shops konkurrierst, die mehrere Produktbilder pro Variante zeigen.

5. Benutzerdefinierte Attribute sind nicht nativ unterstützt

Wenn du deine Produktbeschreibungen mit benutzerdefinierten Attributen erweitern möchtest, kannst du das bei Shopify nicht standardmäßig tun. Du hast ein Beschreibungsfeld für jedes Produkt, und das war's. Wenn du die Beschreibung an mehreren wichtigen Stellen auf der Produktseite erweitern und mit Bildern kombinieren möchtest, musst du einen Workaround nutzen. 

Du musst ein separates Headless CMS verwenden, wenn du zusätzlichen Text, Bilder oder andere Daten für ein Produkt hinzufügen möchtest. Natürlich kannst du Shopify-Metafelder verwenden, aber das ist eine umständliche Umgehung, die sich zudem nur auf Text beschränkt.

Swell wurde speziell für einen Headless- und API-first-Ansatz entwickelt. Das bedeutet, dass die Swell-Plattform um das Prinzip der Anpassbarkeit und Flexibilität herum aufgebaut wurde. Mit Swell kannst du jede Art von Storefront erstellen, die du dir vorstellen kannst. 

Swell verfolgt bei den Lokalisierungsfunktionen einen nativen Ansatz, der es dir ermöglicht, dein Geschäft problemlos auf alle Regionen der Welt auszuweiten. Alle Aspekte der Übersetzung sind nativ integriert, sodass Währungen, Preisanpassungen und einzelne Felder automatisch übersetzt werden. Außerdem hast du die Möglichkeit, Preisanpassungen für Produkte und Varianten sowie für einzelne Währungen individuell vorzunehmen. Passe die Preise für bestimmte Regionen je nach den aktuellen Markttrends nach oben oder unten an.

Du musst dir keine Sorgen machen, dass deine Produkte zu viele Variationen oder Optionen haben, um auf deiner Website angezeigt zu werden. Mit Swell bist du nicht auf eine bestimmte Anzahl von Varianten oder Optionen beschränkt. Du kannst deinen Kunden problemlos Produkte mit 10, 15 oder sogar 20 Optionen und Tausenden von Varianten anbieten.

Deine Kunden werden von der verbesserten Auswahl an Produkten begeistert sein. Sie können genau die Farbe oder Größe des Produkts auswählen, das sie suchen. Kunden kaufen oft für ein ganz bestimmtes Produkt ein, und wenn sie diese eine Farbe, Muster, Material oder Größe in deinem Geschäft nicht finden können, gehen sie woanders hin. Der Wettbewerbsvorteil von unbegrenzten Produktvariationen und -optionen kann nicht hoch genug eingeschätzt werden.

4. Grundlegende Checkout-Anpassungen + Skripte

Swell bietet alle beliebten grundlegenden Anpassungen für den Checkout, die Kunden erwarten. Passe die Checkout-Seite an das Branding deiner Website an. Füge Express-Checkout-Funktionen und Geschenkoptionen hinzu. Du kannst Skripte einfügen, etwas, das du nicht tun kannst, ohne Shopify Plus zu kaufen.  

Du kannst sogar einen komplett eigenen Checkout erstellen, obwohl dies ein großes Unterfangen ist und in den meisten Fällen nicht zu empfehlen ist.

Du kannst so viele Fotos für deine Produktvarianten einstellen, wie du willst. Mit Swell bist du nicht auf ein einziges Bild pro Variante beschränkt. Wenn du verschiedene Aspekte einer Variante zeigen möchtest, kannst du genau das tun. Deine Kunden werden die verbesserte Produktfotografie zu schätzen wissen.

6. Unbegrenzte benutzerdefinierte Attribute

Hebe deine E-Commerce-Website mit benutzerdefinierten Attributen hervor und verbessere deine typischen Produktbeschreibungen, indem du benutzerdefinierte Produktattribute in Form von Text, Bildern und anderen Medien hinzufügst. Wenn deine Produkte wichtige Verkaufsargumente haben, die du hervorheben möchtest, kannst du das mit den unbegrenzten benutzerdefinierten Attributen von Swell erreichen.

Shop-Besitzer, fühlen sich wahrscheinlich eher mit einer etablierten Marke im E-Commerce-Bereich wohl. Swell ist eine neue E-Commerce-Plattform, und obwohl sie überzeugende Funktionen und außergewöhnliche Anpassungsmöglichkeiten bietet, ist sie noch dabei, sich auf dem Markt zu etablieren. 

Wenn du dich für Swell entscheidest, gehörst du vielleicht zu den ersten Anbietern auf der Plattform. Es gibt viele aufregende Vorteile, aber aus geschäftlicher Sicht kann es auch beängstigend sein.

2. Begrenzte Integrationen und Apps von Drittanbietern

Swell ist noch neu auf dem Markt und die Entwicklung von Integrationen braucht Zeit. Derzeit fehlt es noch an einigen wichtigen Integrationen, die bei Shopify-Besitzern beliebt sind, wie PIM-Systeme und Lieferdienste. Wenn du auf diese Integrationen angewiesen bist und dir deine E-Commerce-Site ohne sie nicht vorstellen kannst, kann dies den Wechsel erschweren. 

Swell verfügt derzeit über 40 Integrationen auf der Plattform und es kommen ständig weitere hinzu. Es ist geplant, einen App-Store einzurichten, aber in der Zwischenzeit konzentriert sich Swell darauf, beliebte Integrationspartner zu gewinnen. Die meisten großen Namen sind bereits dabei, wie PayPal, Apple Pay, Klarna, MailChimp, Stripe und Slack.

Da Swell noch neu auf dem E-Commerce-Markt ist, ist die Community im Vergleich zu der von Shopify klein. Es ist definitiv schwieriger, Partner, Entwickler und Unternehmer zu finden, die derzeit mit Swell vertraut sind. Aber wenn die Plattform wächst, wird auch die Community wachsen. Wer weiß, vielleicht bist du Teil dieses Wachstums, wenn du dich entscheidest, auf die Plattform zu wechseln!

Swell oder Shopify: Auswahl einer Headless E-Commerce-Plattform

Was ist das Urteil? Wie entscheidet man sich für eine headless E-Commerce-Plattform, wenn sowohl Shopify als auch Swell ausgezeichnete Optionen sind? Es kommt darauf an, die Einschränkungen und Bedürfnisse des eigenen Shops zu berücksichtigen. Es gibt keine Einheitsgröße, wenn es um Headless-E-Commerce-Plattformen geht. Nur du weißt, welche Art von Kunden du ansprichst und welche Art von Produkten du verkaufen willst.

Wenn du eine E-Commerce-Website erstellen möchtest, die viele Produktvarianten anbietet und Produkte mit exzellenten Produktfotos, gezielten Produktbeschreibungen und innovativen Produktseiten präsentiert, ist Swell deine beste Wahl. Swell ist auch eine gute Wahl für Shops, die technische Produkte mit vielen Spezifikationen und anderen Informationen verkaufen, die Kunden beim Einkaufen wertvoll finden. Shopify kann nicht mit dem Grad der Anpassung konkurrieren, den Swell für Produktseiten bietet.

Wenn deine E-Commerce-Website jedoch stark von Anwendungen und Integrationen von Drittanbietern abhängt und weniger auf detailliertes Produktmarketing ausgerichtet ist, ist Shopify die beste Empfehlung. Shopify verfügt über Tausende von Integrationen, die einzigartige Möglichkeiten bieten, deinen Shop mit verschiedenen Diensten, sozialen Medien und Plattformen zu verbinden. Manche Produktlinien brauchen einfach nicht all die Optionen, die Swell bietet.

Swell vs Shopify - Die beste Headless E-Commerce-Plattform

Größte E-Commerce-Website für griechische Produkte, die mehr als 1000 griechische Produkte in 5 verschiedenen Sprachen weltweit verkauft.

Dieses Projekt wird aktiv in Zusammenarbeit mit With Love Internet unterhalten.

Beratung bei technischen Fragen zu integrierten E-Commerce-Diensten

Greek Flavours

Für Siemens ARTIFICIAL INTELLIGENCE @ CORPORATE TECHNOLOGY haben wir eine neue Intranetseite entwickelt. Sie dient der internen Kommunikation von Dienstleistungen und gibt den Bearbeitern der Website die Möglichkeit eigenständig und individuell Inhalte und Strukturen zu ändern.

Die alte Seite von Siemens AI@CT basiert auf einer überholten Web-Architektur, die verschiedene Probleme mit sich bringt:

Kein responsives Verhalten bei unterschiedlichen Screen-Größen

Umständliches Ändern von Website-Inhalten

Gestaltungseinschränkungen durch Technologielimitierungen

Um Trainings, Wissen und Prozesse von Siemens AI@CT intern darzustellen und zu verkaufen soll die aktuelle Seite neu entwickelt werden. Ein neues high-speed Web-Framework soll die Ladezeit der Seite perfektionieren und Editoren der Seite außerdem die Möglichkeit geben Inhalte einfach und schnell einzupflegen und anzupassen. Dafür soll ein indivduell angepasstes CMS in die Seite integriert werden.

Die neue Website haben wir mit dem komponenten-basierten Javascript Framework Gatsby gebaut. Dies ermöglichte uns die Erstellung von Seiten mit schnellstmöglicher Ladezeit. Lange unübersichtliche Seiten konnten dadurch auf mehrere kürzere Unterseiten gesplittet werden.

video-siemens-trimmed.mp4

Um die Corporate Identity von Siemens beizubehalten, haben wir das siemens-interne Design-Theme, in die neue Website integriert. Designelemente und Funktionen, welche mit der alten Technologie nicht umsetzbar waren, haben wir CI gerecht neu überdacht, designed und animiert.

Die neue Statusleiste führt Besucher nun übersichtlich durch die auf der Seite dargestellten Prozesse. Sie zeigt die aktuelle Scrollposition des Users und bietet jetzt, anders als vorher, auch auf mobilen Geräte eine nahtlose Experience.

Maßgeschneidertes Content Management System

Die von uns eingebauten Markdown-Dateien bilden ein individualisiertes und funktionsspezifisches Content Management System. Texte, Bilder, Icons, Seiten und Verlinkungen können damit ganz einfach bearbeitet und hinzugefügt werden. Dazu braucht es keinen technischen Hintergrund und die Funktion der Seite kann nicht ungewollt beeinträchtigt werden.

Inhalte wie z.B diese Texte über ein angebotenes Training (rot markiert) können sehr intuitiv über Markdown-Dateien geändert werden. Textformatierungen, Metadaten und das Einfügen von Komponenten können über einfache Codierungen vorgenommen werden.

Über den „Use Case Explorer“ können Projekte nach mehreren Kriterien intelligent gefiltert und angezeigt werden. Mit einem Klick auf das jeweilige Projekt werden weitere Detailinformationen angezeigt. Die Seite greift dabei auf eine bereits bestehende interne API zurück, in der die Projekte hinterlegt sind.

Siemens AI@CT

Für Biersafe, einen Bierzubehörhersteller aus Deutschland, haben wir einen neuen E-Commerce-Shop konzipiert und entwickelt.

BIERSAFE

Unsere Mission war es, den bestehenden Wordpress-Onlineshop mit modernster Technologie neu zu gestalten und zu entwickeln. Die neue Seite sollte das Einkaufserlebnis verbessern und letztendlich die Conversion steigern.
Zusammen mit Biersafe haben wir uns auf einen lückenlosen Entwicklungsprozess geeinigt. Dieser umfasste mehrere Schritte, die im Folgenden aufgeführt sind

In einer Discovery-Session und einem anschließenden Branding-Workshop haben wir das Biersafe-Team mit seiner Marke konfrontiert. Wir definierten den Kunden, überarbeiteten das Wertversprechen von Biersafe und schufen eine überzeugende visuelle Sprache.
Wir stellten fest, dass die Kunden von Biersafe größtenteils Hausbesitzer mittleren Alters mit einem Garten und einem großen Freundeskreis sind, die sich gerne draußen treffen.
Das Ergebnis war eine Branding-Guideline und eine auf diese Kunden zugeschnittene Seitenstruktur in Form von Wireframes.

Während die Branding-Guidelines und Wireframes die Grundlage für die Customer Journey legten, übersetzten unsere Designer diese in ein High-Fidelity User Interface. Besonderen Wert legten wir dabei auf ein Design, das stark mit der Sprache der zuvor geschaffenen Marke verbunden ist. Mit einer neuen sonnengelben Farbe, die Bier und Sonnenschein repräsentiert, und einer lässigen 70er-Jahre-Schriftart haben wir die visuelle Sprache von Biersafe aufgefrischt.
Das finale Design umfasste eine emotionale User Journey auf der Landing Page, eine funktionale Shop-Seite und informative Team- und Info-Seiten.

Um einen perfekt angepassten und hochperformanten Onlineshop zu erstellen, nutzten wir das Frontend-Framework GatsbyJS und integrierten die E-Commerce-Plattform Shopify. Die im E-Commerce-Bereich noch nicht häufig benutzte statische Seitengenerierung durch Gatsby sorgt für nahezu unmerkbare Ladezeiten. Das verbesserte Nutzererlebnis führt zu niedrigeren Absprungraten und höheren Abschlussraten.
Wir fügten Contentful als Content Mangagement System hinzu, damit Biersafe die Informationsinhalte einfach bearbeiten und neue Versionen der Seite veröffentlichen kann.

Nachfolgend kümmerten wir uns um das Deployment der neuen Seite und sorgten für einen nahtlosen Übergang von der alten zur neuen Seite ohne Ausfallzeiten.
Abschließend veranstalteten wir gemeinsam mit Biersafe einen Übergabe-Workshop, in dem wir erklärten, wie man den Produktkatalog in Shopify verwaltet und Inhalte auf der Seite ändert.
Seit der Übergabe hosten, warten und gewährleisten wir kontinuierlich die Sicherheit der Seite.
Prost!

Wir bauen
deine App

Excyting Lösungen

Excyting Lösungen

E-Commerce Store

Native App

Web App

Custom Website

Neuste Projekte

Greek Flavours

Siemens AI@CT

BIERSAFE

Wir bauen
deine
Produkte

Neuste Blogartikel

Animationen in E-Commerce Seiten

Swell vs Shopify - Die beste Headless E-Commerce-Plattform

Kontakt

Wir bauen deine App

Excyting Lösungen

Excyting Lösungen

E-Commerce Store

Native App

Web App

Custom Website

Neuste Projekte

Greek Flavours

Siemens AI@CT

BIERSAFE

Wir bauen deine Produkte

Neuste Blogartikel

Animationen in E-Commerce Seiten

Swell vs Shopify - Die beste Headless E-Commerce-Plattform

Kontakt

Wir bauen
deine App

Wir bauen
deine
Produkte