Website-Baukasten: Shopify goes Headless

Die E-Commerce-Plattform Shopify besteht bereits seit 2004 – laut Unternehmensbericht sind derzeit um die 3,8 Millionen Shops live – zu den populärsten Beispielen gehören die Beautymarken von Kim Kardashian (Agentur: Perron-Roettinger) und Kylie Jenner (Agentur: Ultrabrand) – aber auch das Sneakerbrand Flowers for Society und seine betreuende Agentur Astral aus München setzen auf das hochfunktionale Shopsys­tem. Shopify kommt als Baukastensystem inklusive Hostinglösung mit Produktverwaltung und Bezahl­schnittstellen sowie fertigen Themes in der Open-Source-Template-Sprache Liquid daher. Für die vol­le Kontrolle über das UX/UI-Design lassen sich die grundlegenden Funktionen von Shopify – allen voran die Produktdatenbank und die Bezahlmethoden – aber auch via API in kundenspezifische Headless-Designs integrieren.

Readymade: Schnellere Custom Storefronts

Die Gestalter von Astral haben in zehn Jahren sowohl zahlreiche Readymade-Lösungen mit fertigen Design-­Themes als auch maßgeschneiderte Lösungen mit Shopify umgesetzt. »Wir wie auch unsere Kunden lieben das Tool, da es in der Bedienung sehr ­intuitiv ist. Es gibt auch eine mobile App. Der ganze Part mit der Kreditkartenschnittstelle beziehungsweise der Check-out-Prozess ist supersicher umgesetzt. Preis­lich ist Shopify im Basic- und Shopify-Plan deutlich günstiger als die Konkurrenz«, sagt Astral-CEO Johannes Auffermann.

Lediglich das Thema Multilanguage sei wirklich »Pain«. Selbst im teuren Plus-Tarif (die Enterprise-Lösung startet bei 2000 US-Dollar im Monat) exis­tiere keine saubere Lösung für die Integration mehre­rer Sprachen. Die Agentur behilft sich dann mit Plug-ins wie dem KI-Übersetzungstool T-Lab – weil aber derartige Plug-ins oft auch nicht reibungslos laufen, setzt Astral in vielen Fällen von vornherein auf ei­genes Headless-Design sowie auf die valide Shopi­fy-Storefront- und auf die Admin-API. »Watch out!«, warnt Malte Bender, CEO und Creative Deve­lo­per bei Astral. »Oft entscheidet sich ein Kunde für ei­­ne Rea­dymade-Lösung und wünscht sich dann am Ende noch Anpassungen, die ein Verbiegen des Tem­plates zur Folge haben. Je mehr man aber verbiegt, des­to ›wackeliger‹ wird das Gesamtkonstrukt. Das führt zu Unzufriedenheit sowohl beim Kunden wie auch auf Agenturseite.«

Shopify blieben diese Unzulänglichkeiten nicht verborgen, und so stellte der Service jüngst ein eigenes Headless-E-Commerce-Framework namens Hy­drogen mit entsprechender Deployment- und Hos­tinglösung (Oxygen) basierend auf dem JavaScript-Framework React vor. Auch die Programmierung von Themes in Liquid soll dank neuer sogenannter Liquid-Referenzen leichter und schneller gelingen. Objekteigenschaften, Typinformationen, Syntax­her­vorhebung und interaktive Codeblöcke sollen Kre­a­tiven laut Shopify dabei helfen, ihren Anwendungsfall schnell und direkt zu prototypisieren. In Kombination mit dem Open-Source-CMS Sanity findet Astral-CEO Auffermann das eine vielversprechende Lö­sung: »Wir arbeiten aktuell an einer Testumgebung für ein neues Sneakerprojekt mit Global-Market-Launch und sind sehr zuversichtlich, dass dieses neue Shopify-Set-up die aktuell bestehenden Probleme der Internationa­lisierung behebt.«

Shop: Maßgeschneidert und von der Stange geht zusammen

»Ein maßgeschneiderter Shop bietet die volle Kontrolle im Design und im Frontend. Daher ist das für uns als Designagentur immer die Lösung, in der wir uns wohler fühlen«, sagt Johannes Auffermann, denn durch individuell zugeschnittene Back- und Front­ends ließen sich fehlende Funktionen – wie beispiels­weise kom­plexe Filtermechanismen oder die Anreicherung von Daten, etwa dynamisch pflegbare Gra­fi­ken für Produktfarben – realisieren. Wie bei der Kin­der­-On­lineboutique Lille Compagnie: Hier kommen Shopify und die Storefront-API gemeinsam mit WordPress, Nuxt.js und Node.js für einen maßgeschneiderten E-Commerce-Shop zum Einsatz.

Zu Readymade-Lösungen rät Astral insbesondere dann, wenn das Budget sehr klein ist und/oder es sehr schnell gehen muss. »Auch bei den schnelllebi­gen Minimum Viable Products ist eine Readymade-Lösung sicher der bessere Weg. Fertige Lösungen sind dann langfristig günstiger, denn bei neuen Anforderungen wie API-Änderungen oder neuen Brow­sereigenschaften erhalten sie automatisch Updates«, erklärt Auffermann.

Für den jüngst gelaunchten Shop des Münchner Start-ups für Darmgesundheit Stuul nutzte das Kreativ- und Entwicklerteam das Readymade-Theme Showcase und passte es nur minimal an. Daneben sorgt das Multilanguage-Plug-in T-Lab für zweisprachige Inhalte in DE/EN. »Das Plug-in ist nicht besonders komfortabel, aber ein gro­ßer Vorteil: Es ist für bis zu 2000 per KI übersetzte Wörter völlig umsonst. Alle Translation-Apps, die wir gescannt haben, sind teils mit sehr hohen monatlichen Kosten verbunden«, erklärt Auffermann.

Wer bei der Entwicklung darüber hinaus sparen will, sollte auf den Geheimtipp von Astral hören: »Für Kunden mit extrem begrenztem Budget gibt es einen sehr versteckten Lite-Plan. Damit lässt sich mit etwas Code-Know-how eine E-Commerce-Lösung für schlanke 9 Dollar im Monat realisieren.«

Watch out! Oft entscheidet sich ein Kunde für eine Readymade-Lösung und wünscht sich dann am Ende noch Anpassungen

Dieser Artikel ist Teil der Titelgeschichte “Website-Builder: aus ready-made wird customized” aus PAGE 10.2022. Die Ausgabe können Sie hier runterladen.

PDF-Download: PAGE 10.2022

Produkt-Details anzeigen

Website-Builder: Aus ready-made wird customized ++ Futures Design: Praxis & Cases ++ ENGLISH SPECIAL J.S. Weis ++ Boom: Design für Reinigungsmittel ++ Kartendesign: Dos and Don’ts ++ Plakate per Buchdruck: Dafi Kühne ++ Neue DIN mit Variable-First-Ansatz ++ Förderungen für Kreative ++ EXTRA: Top 20 CD/CI-Agenturen

9,90 €

AGB