Blog für Webdesign und Webentwicklung

Ein Blick hinter die Kulissen: So funktioniert die Technik von Shopify (mit Video)

Ein Vorhang im Theater

Über eine Million Händler weltweit setzen inzwischen auf Onlineshops von Shopify. Darunter finden sich so illustre Namen wie der Technologiekonzern Tesla, der Lebensmittelriese Unilever oder die Beauty-Marke Kylie Cosmetics mit ihrer Armee von 82 Millionen Instagram-Followern.

Ob es sich nun um Weltmarktführer handelt oder um den kleinen, regional operierenden Webshop, jeder dieser Stores fußt auf der gleichen Technologie – und wird häufig vertrauensvoll von einem Shopify-Partner betreut.

Dass der Onlinehandel gleichzeitig einen gewaltigen Wachstumsmarkt darstellt und jeden Tag dutzende neuer Webstores ihre Türen über unsere Plattform öffnen, bedarf wohl keiner weiteren Erwähnung. Allerdings liefert dieser Umstand einen hervorragenden Anlass, den Vorhang zu lüften und dir einen Einblick hinter das glänzende Frontend zu gestatten.

In diesem Beitrag erfährst du, auf welche Technologien wir bei Shopify setzen. Wir verraten, wie unser System tickt, bringen dir seine einzelnen Komponenten näher und zeigen, wie alles ineinandergreift. Deine eigenen ersten Schritte mit unserer Software werden so zum Kinderspiel.

Die Basis ist eine Wolke – Shopify in der Cloud

Zuallererst eine grundlegende Information: Shopify Shops sind vollständig als Software as a Service (SaaS) konzipiert – funktionieren also cloudbasiert. Mehr als einen Browser brauchst du nicht, um mit deiner Arbeit anzufangen.

Um Betrieb, Wartung und Update des Backends kümmern wir uns und halten unsere Hardware für dich und deine Kund*innen immer betriebsbereit und auf dem neuesten Stand. Um Latenz und Datenschutz brauchst du dir ebenfalls keine Sorgen zu machen: Unsere Serverfarmen finden sich in zahlreichen Ballungsräumen auf sämtlichen Kontinenten und unterliegen stets den dortigen gesetzlichen Bestimmungen.

Als SaaS-System ist Shopify dabei vor externen Manipulationen abgesichert und gleichzeitig maximal individualisierbar. Wenn du einen tiefen Blick unter die Haube werfen und wissen möchtest, auf welche Software wir in Sachen Datenhaltung, Framework und Toolkits setzen, empfehlen wir dir einen kurzen Besuch bei Stackshare.

Drei Säulen für deine Arbeit: Themes, APIs und Apps

Als Shopify-Partner brauchst du dich also nicht um lästige Aufgaben rund ums Backend kümmern, sondern kannst dich voll und ganz auf das konzentrieren, worauf es wirklich ankommt: Für deine Kund*innen den perfekten Shop zu gestalten – ganz nach ihren Vorstellungen in allen Fragen von Design, User Experience und Funktionalität.

Dazu stehen dir zahlreiche Werkzeuge zur Verfügung, die sich in drei Kategorien einteilen lassen.

Das Auge shoppt mit: Themes

Themes, also Zusammenstellungen grafischer Elemente, die das Aussehen der Shop-Oberfläche bestimmen, sind die schnellste und einfachste Möglichkeit, einen Store individuell an die Wünsche und Bedürfnisse deiner Kunden anzupassen.

Deine erste Anlaufstelle für die Implementation von Themes in einen Shop ist unser Theme-Store. Hier findest du eine große Auswahl an Design-Templates für deine Arbeit; teils kostenpflichtig, teils gratis. Ein Mausklick genügt und du findest alle Gestaltungselemente in deinem Admin-Bereich.

Allerdings wissen wir, dass ein echter Designer sich nicht mit ein paar vorgefertigten Bausteinen zufriedengibt. Alle Themes aus unserem Store lassen sich daher weiter anpassen und individualisieren. Dazu verwenden wir Liquid, eine Open Source Templating-Sprache, die dich nicht vor zu große Herausforderungen stellen dürfte, wenn du dich bereits mit CSS, HTML oder JavaScript auskennst.Ein Shopify-Theme im Admin-BereichJedes Shopify-Theme lässt sich mit Liquid editieren und erweitern

Liquid erweitert diese gängigen Struktursprachen dabei um Logikbefehle wie Switch-Cases, if-Statements oder Schleifen, die dir eine perfekte Anpassung eines Themes an deine Vorstellungen erlauben. Tutorials, Fallbeispiele und die vollständige Dokumentation findest du in unserem Entwicklerbereich.

Alles zusammenlaufen lassen: APIs

Klar, dass ein Store ohne flüssigen Informationsaustausch zwischen den einzelnen Softwarekomponenten nicht funktionieren kann – das Bezahlsystem möchte mit der Bank kommunizieren, die Versandabteilung mit der Lagerhaltung.

Application Programming Interfaces oder kurz APIs, stellen die nötigen Schnittstellen zur Verfügung, erlauben die zentrale Verwaltung aller Shop-Komponenten über eine zentrale Schaltstelle und garantieren einen reibungslosen Datenfluss. Bei Shopify unterscheiden wir zwischen zwei Arten von APIs:

Admin-API: Diese Schnittstelle kümmert sich um alle Prozesse, die im Hintergrund ablaufen und für Besucher*innen des Shops nicht unmittelbar sichtbar sind. Zum Beispiel das Bestellwesen oder die Anbindung der Kundendatenbank.

Storefront-API: Über diese API erhältst du Zugriff auf alle Aspekte des Stores, die quasi in der Auslage liegen und von jedermann direkt eingesehen werden können. Dazu gehört etwa alles, was mit Artikeln zu tun hat, beispielsweise Produktkategorien oder -varianten.

Zur Abbildung unserer APIs setzen wir dabei auf GraphQL. Zwar erlaubt die Admin-API derzeit noch alternativ die Arbeit mit REST, aber für alle zukünftigen Projekte empfehlen wir auch dort die Verwendung der aktuelleren Software.

Denn anders als REST erlaubt GraphQL sehr spezifische Anfragen im Rahmen der Objektübermittlung: Anstatt immer ein vollständiges Objekt mit allen in ihm enthaltenen Daten übergeben zu bekommen, kannst du exakt definieren, auf welche Informationen du zugreifen möchtest. Das verbessert nicht nur die Übertragungsgeschwindigkeit, sondern vermeidet auch überflüssigen Datenmüll.Eine GraphQL-Anfrage im integrierten EditorGraphQl liefert dir genau die Informationen zurück, die du brauchst

Jegliche Arbeit an den APIs erfolgt direkt über den Admin-Bereich des Shops; Zum Beispiel mithilfe von Editoren wie GraphiQL, die sich unmittelbar in deinen Workspace integrieren lassen. Die vollständige Dokumentation unserer APIs stellen wir dir gerne im Developer-Segment unserer Webseite zur Verfügung.

Die perfekte Individualisierung: Apps

Was macht ein Smartphone eigentlich so Smart? Na klar, all die kleinen Programme, welche den Funktionsumfang des Gerätes um eine Vielzahl an Möglichkeiten erweitern. Apps eben. Und genau wie Apple seinen App Store und Google seinen Play Store hat, bieten wir auf Shopify in unserem eigenen Shop bereits über 3.000 der kleinen Helferlein für unsere Kund*innen an.

Fantasie und Funktionalität sind dabei kaum Grenzen gesetzt. So findest du unter anderem Programme, die für Shopbetreiber*innen Sale- und Rabattaktionen automatisieren, ihren Social-Media-Auftritt direkt mit dem Store verknüpfen oder sie beim Verfassen von SEO-Texten unterstützen.Die Landingpage des Shopify App StoresÜber 3.000 Apps bieten wir in unserem Store bereits an

Die Einbindung einer App in einen Shop stellt dabei keinen großen Aufwand dar: dank unserer Shopify App Bridge. Mithilfe dieser JavaScript Bibliothek ist das externe Programm bereits mit ein paar Codezeilen implementiert. Alles Wissenswerte zu unserer App-Brücke haben wir für dich online zusammengefasst.

Einen Shop mithilfe einer bereits fertigen App an die Bedürfnisse deiner Kunden anzupassen, ist allerdings nicht die einzige Option, die Apps für dich als Shopify-Partner interessant macht. Wenn du das nötige Know-how besitzt, kannst du die Tools auch selbst programmieren und über unsere Plattform anbieten:

Deine Apps auf Shopify

Ein Wort vorab: Vergiss nicht, dass Shopify vollständig in der Cloud läuft. Gleiches gilt damit für deine App. Auch sie muss cloudbasiert arbeiten als App as a Service. Für ihre Skalierung und einen reibungslosen Betrieb bist also du als Anbieter verantwortlich. Aber keine Bange, denn auf deinem Weg unterstützen wir dich nach Leibeskräften.

Schnell starten: das Shopify APP CLI

So bieten wir dir zuallererst unser Shopify App CLI an. Mit diesem Kommandozeilen-Tool erfolgt die Einbindung deiner App in unseren Store fast schon automatisch. Einmal installiert reichen ein paar Befehle, um dein Projekt zu erstellen, zu testen und schlussendlich zu veröffentlichen. Die wichtigsten Informationen dazu stehen online für dich bereit.

Die passende App bauen: Standalone oder Embedded

Als Nächstes haben wir unsere Apps in zwei Kategorien eingeteilt, die es dir erleichtern, die passende Zielgruppe anzusprechen:

Standalone Apps: Hierunter fallen alle Programme, die losgelöst von der eigentlichen Store-Umgebung arbeiten und dort maximal über die API integriert werden.

Embedded Apps: Diese Apps erweitern den Admin-Bereich um neue Funktionen. Damit Look & Feel dabei konsistent bleiben, bieten wir dir das Polaris-Framework als Style Guide an. So erhalten deine Eingabefelder und Buttons immer das richtige Design und du kannst das Wireframe leicht anpassen.

Das Finanzielle regeln wir: die Abrechnung

Den Preis für deine App bestimmst natürlich du selbst, aber um alles Weitere kümmern wir uns. Sämtliche Abrechnungen über verwendete Apps erhalten Kunden über ihre Shopify-Rechnung – egal ob Einmalzahlung oder Abo-Modell. Finanziell bist du also stets auf der sicheren Seite und um das lästige Schreiben von einzelnen Rechnungen brauchst du dich nicht zu kümmern.

Pioniergeist, Perfektionismus und Partnerschaft

Die eingangs erwähnten eine Million Webshops profitieren also von zweierlei: Zum einen davon, dass wir immer ganz vorne mit dabei sind, wenn es um moderne Technologien, clevere Ideen und intelligenten Service geht. Zum anderen von der vertrauensvollen Zusammenarbeit mit unseren Partnern auf der ganzen Welt.

Wenn du bereits dazu gehörst, konnten wir dir mit diesem Beitrag vielleicht den ein oder andere interessanten neuen Fakt näherbringen. Falls nicht, würden wir uns freuen, dich bald an Bord begrüßen zu dürfen, damit bald noch mehr Webshops aus noch mehr Branchen von deiner Expertise profitieren können.

Titelbild von Rob Laughter.



Which method is right for you?Über den Autor: Roman Zenner ist Technical Partner Manager bei Shopify. Er ist seit über zwanzig Jahren in den unterschiedlichsten Rollen im E-Commerce aktiv: Autor, Podcaster, Dozent und Projektleiter sind nur einige davon. Roman betreibt zudem den Shop Tech Blog.

Bring dein Geschäft mit dem Shopify-Partnerprogramm voran

Mehr Informationen