Werfen wir einen Blick aufs Thema "Headless CMS"

Erstens, was bedeutet „Headless“ eigentlich? Der Begriff beschreibt, sehr vereinfacht ausgedrückt, die Entkopplung Ihrer Kunden-Front-Ends (was zum Beispiel ein Shop sein könnte) von Ihrem Back-End-Server.

Zweitens, was ist ein CMS? Die Abkürzung steht für „Content Management System“. Es handelt sich dabei um eine Computersoftware oder -anwendung, die eine Datenbank verwendet, um Text- und Medien-Inhalte zu speichern und zu verwalten.

Und warum verknüpft man nun „Headless“ mit „CMS“? Nun, auf sprachlicher Ebene klingt es zum einen gut und bleibt im Kopf. Aber auch inhaltlich fasst es die Idee und Ihre Vorteile kurz und knapp zusammen:

Der „Headless CMS“ Ansatz bedeutet, dass Inhalte (wie z.B. Texte und Bilder) losgelöst vom Frontend gespeichert werden und es deshalb kein monolithisches Frontend-System gibt. Stattdessen werden kundenorientierte Inhalte flexibel gehalten und können daher in allen denkbaren Kanälen und über jedes Framework veröffentlicht werden. Dieses Vorgehen hat massive Vorteile. Welche das sind? Lassen Sie es uns erklären.

Heutzutage interagieren Ihre Kunden über viele verschiedene Kanäle und Geräte mit Ihrem Unternehmen. Mit einem Headless CMS speichern Sie Ihre Inhalte nicht im jeweiligen Kanal. Stattdessen können Sie in den unterschiedlichen Kanälen auf die zentral gespeicherten Inhalte zugreifen und diese dann maßgeschneidert für jeden Kanal und jede Kundengruppe ausspielen. Dadurch steht es Ihnen auch frei, so viele Kundenkanäle zu bespielen, wie Sie möchten oder eben so viele wie Ihr Unternehmen benötigt. So können Sie zum Beispiel auch auf mobilen Endgeräte passend auftreten, während die Kundenerfahrung in der Oberfläche für Smartwatches eine komplett andere ist.

Es ist wichtig zu beachten, dass Headless CMS auch hohe Anforderungen mit sich bringt. Wenn Sie sich für diesen Weg entscheiden, dann müssen viele Kanäle und Touchpoints angepasst oder von Grund auf neu entwickelt und gestaltet werden. Schließlich kommen die Inhalte für Ihre Website oder Ihren Shop mit Headless CMS über APIs an Ihre Kunden, statt wie vorher direkt aus dem jeweiligen System.

APIs? Was war das nochmal? Ein "Application Programming Interface" ist eine Schnittstelle zur Verbindung von Software Tools. Jedes Headless CMS stellt performante Schnittstellen zur Verfügung, damit die darin gespeicherten Inhalte auch jederzeit schnell und flexibel erreichbar sind.

Wir wissen jetzt was der Begriff Headless CMS bedeutet, wir verstehen, dass mit der Einführung technische Herausforderungen auf uns warten, und wir wissen, wie das gesamte System kommuniziert. Aber eine große (wenn nicht die größte) Frage stellt sich noch: Wozu das Ganze?

Die kurze Antwort lautet: Flexibilität! Guter Content ist heute sehr wichtig, um Kunden für Sie zu begeistern und zu binden. Darüber hinaus müssen Sie für Ihre Kunden in unterschiedlichen Kanälen erreichbar sein. Außerdem muss sich jeder Touchpoint einzigartig anfühlen und zu Ihrem Markenimage passen.

Mit einem Headless CMS hat Ihr Technik Team die Freiheit, eine flexible Systemarchitektur für jeden Ihrer Kanäle und Touchpoints zu implementieren, ohne dabei durch technische Limitierungen des CMS aufgehalten zu werden.

Ein weiterer wichtiger Grund ist die Skalierbarkeit! Mit einem Headless CMS können Sie wesentlich schneller neue Kanäle aufschalten und bestehende Kanäle austauschen und so nach Belieben wachsen. Zudem können Sie auch das Frontend bestehender Kanäle wie beispielsweise Ihrer Website mitnehmen und werden nicht von einer starren Benutzeroberfläche eingeschränkt.

Der nächste Schritt ist sich mit der Auswahl der richtigen CMS-Software zu beschäftigen. Mittlerweile gibt es hier unzählige Anbieter, die jeweils verschiedenen Features für unterschiedliche Anwendungsfälle bieten. An dieser Stelle wollen wir kurz Plattformen wie 

 (was übrigens hinter dieser Website steckt) erwähnen, aber die Liste geht natürlich noch lange weiter.

Die Auswahl fällt den Meisten schon aufgrund der Menge an Anbietern schwer. Sollten Sie also Hilfe oder Anleitung benötigen, welche Software speziell für Sie geeignet ist, dann kontaktieren Sie uns gerne! Unsere IT-Experten sind auf 

 spezialisiert und kennen die Vor- & Nachteile der großen CMS-Plattformen. 

Wir hoffen, dass wir Ihnen einen guten ersten Einblick ins Thema „Headless CMS“ geben konnten. In Zukunft werden wir in weiteren Beiträgen tiefer in die einzelnen Aspekte einsteigen, also bleiben Sie dabei!

Firstly, what is ‘Headless’? This term, put very simply, is the act of decoupling your front-end customer touchpoints with your back-end server. An expression that we stumbled upon that we thought accurately described this was “the divorce” of the front-end and back-end.

(Thank you, genius Elise Dopson, for your 

Secondly, what is a CMS? The acronym stands for ‘Content Management System’. It is a computer software or application that uses a database to manage all content.

Why are we linking ‘Headless’ with ‘CMS’? Well, because the tech field always has cool sounding terms like this, so it matches the modus operandi, and secondly, it helps you visualize how this works. We are a tech company, full of creative and software wizards, so having a mental picture for terms always helps us a lot.

A ‘Headless CMS’ means that there is no default front-end system. Instead, customer-facing content is kept raw and, therefore, can be published anywhere through any framework. This is massively beneficial. Why, you ask? Let us explain!

Nowadays, customers are accessing your online store through various channels and devices. Adopting a ‘Headless CMS’ stance will allow you to create content that is specifically suited and made bespoke for each of the sites you cater to. Any tech person working on your front-end is free to create as many ‘heads’ as they want/or as your business needs. If you need a certain format for mobile device web visits, they can design the interface differently and more suitably than if you needed an interface for smartwatches, for example.

Stay with us, things are about to get a bit more tricky.

It’s important to note that going this route means that you don’t have a template format of how your sites and channels are going to look – they need to be developed and designed from scratch. And the way that content is delivered to your customers for these sites is through API’s.

Okay, let’s take a second. What’s an API again? An Application Programming Interface is a connection between computers or computer programs.

We now understand the term, we understand that it needs to be built from scratch, and we know how the whole system ‘communicates’. But the big question is, why would you want to do this?

You want to be flexible! You have a site, or want to create a site that is uniquely yours. Likewise, you’d like for each of the channels that your services or products are displayed on, to be easy to use/change/tweak and also, match your brand image perfectly.

Creating all the tech language and coding will happen behind-the-scenes as per usual. Taking this route, though, will give your tech team the freedom of being able to implement a flexible system architecture for any delivery channel.

Another big reason is scalability! Obviously, having a site with multiple bespoke heads, that you can interchange as you please, will also allow you to grow as you please. You’ll be able to take all your front-heads with you as you continue to grow your site and won’t be buckled down by a rigid interface.

The next step would be choosing the correct CMS software for your needs. There are loads out there that have various features and functionalities such as 

 (which powers this website) and the list goes on. We know a lot about going ‘Headless’ and we also happen to conveniently know a lot about the various CMS software out there. Should you find yourself needing a hand or some guidance in which software to choose from, and how to turn your website into a headless dream, then get in touch with 

We hope that we’ve answered all your ‘Headless CMS’ questions, and if we haven’t, well, then we hope our next few blogs will help clear things up! Stay tuned!

P.S. when we said ‘’the divorce’’ of the front-end and back-end, we meant a happy divorce. One where ‘’each side comes out a winner since changes to one side can be made without disrupting the other.’’ — Thanks, Elise!

Astro ist ein relativ junges Web-Framework zur Erstellung von Websites und Web-Apps. Tatsächlich ist es im April 2022 erstmalig in einer Version 1.0 erschienen. Trotz seines jungen Alters setzen bereits über 100.000 Teams und Softwareentwickler das Framework ein. Unterstützer finden sich u.a. bei Google, Netlify, NordVPN, The Guardian oder Trivago.Astro verfügt über einige neue, einzigartige Ansätze die die Entwicklung von Webanwendungen und Websites stark verbessern kann. Auf ein paar der Vorteile des Einsatz von Astro wollen wir im Folgenden näher eingehen.


Die oberste Prämisse von Astro ist das Übermitteln von möglichst wenig Javascript an den Browser des Anwenders (Client). Das führt zu äußerst kurzen Ladezeiten der Applikation/Website. Jedoch ist JavaScript teilweise notwendig, um Interaktivität mit der Website zu erzeugen. Dazu hat Astro eine Lösung: Während der Entwicklung kann definiert werden welche Elemente JavaScript nutzen sollen und welche nicht, damit immer möglichst wenig JavaScript an den Nutzer ausgegeben wird.Dieses selektive Auswählen einzelner Komponenten nennt Astro “Astro Islands”, die wir im Folgenden näher beschreiben.


Astro Islands ermöglichen es eine Auswahl der beliebtesten Frontend-Frameworks in die Applikation zu integrieren (BYOF = Bring Your Own Framework), und zwar *gleichzeitig*. So kann beispielsweise auf einer einzigen Seite ein Header in React.js, die Side-Navigation in Vue.js, der Content in Markdown und der Footer in plain HTML geschrieben werden. Das ermöglicht eine gänzlich neue Herangehensweise an die traditionelle Webentwicklung. Teams können nun je nach Feature auf der Website das favorisierte Framework verwenden, anstatt sich auf eine einzige Technologie festlegen zu müssen.


Genauso wie beispielsweise Next.js bietet Astro auch die Möglichkeit Seiten nicht nur statisch zu genieren, sondern auch serverseitig zu rendern. Damit einher geht auch die Fähigkeit zu API Routes. Also serverseitigen Funktionen, die aufgerufen werden können. Damit ist Astro nicht nur ein Client-Javascript-Framework, sondern kann auch die meisten üblichen serverseitigen Aufgaben wie etwa eine Authentifizierung oder das Versenden von E-Mails übernehmen.


Einer der wichtigsten Vorteile von Astro wurde bereits genannt: Eine technologieagnostische Herangehensweise an die Webentwicklung. Nahezu jedes der namhaften Frameworks können in einer Astro-Applikation miteinander kombiniert werden. Außerdem führt der Einsatz von möglichst wenig JavaScript dazu, dass die Ladezeiten einer Website oder Webapplikation möglichst gering ausfallen, was sich merklich auf die UX und Conversion auswirkt.


Astro’s größter Nachteil ist sein junges Alter, durch welches nur wenig Third Party Packages zur Verfügung stehen und dadurch viele Features eine Individualentwicklung benötigen. Z.B. gibt es zum Zeitpunkt des Erscheinens dieses Blogposts keine native Astro Bibliothek für Auth0.Dieser Nachteil lässt sich aber dadurch abfangen, dass durch Astro Islands viele Technologien verwendet werden können, welche ein großes Ökosystem vorweisen können.## Für welche Projekte ist Astro geeignet?
Astro ist vor allem für neue Projekte geeignet, bei denen sich ein Team aus Entwicklern mit unterschiedlichen Frontend-Frameworks zusammentun. Durch die SSR/API-Route Features von Astro können gesamte Applikationen inklusive der meisten Anforderungen umgesetzt werden. Auch ein einfach umzusetzendes Hosting über die gängigen Hosting Anbieter wie Vercel ist möglich.Gegen Astro sprechen große Enterprise-Projekte, die auf eine möglichst erprobte Technologie mit einem möglichst großen Ökosystem zurückgreifen müssen. Auch wenn das Entwickler-Team sich auf eine bestimmte Technologie wie React.js oder Vue.js spezialisiert hat, macht die Anwendung von Astro nur begrenzt Sinn und muss abgewogen werden.


Astro ist zwar sehr jung, konnte sich aber durch seine sehr ansprechenden Features bereits einen Namen machen. Das geringe Alter kommt mit ein paar Nachteilen einher; wie etwa das relativ kleine Ökosystem und wenige Referenzanwendungen. Beide Probleme dürfte sich aber in naher Zukunft von selbst lösen


Wir haben uns bereits ausgiebig mit Astro beschäftigt. Wenn Sie Astro auch für Ihr Vorhaben evaluieren möchten sprechen Sie uns gerne an.

Astro is a relatively young web framework for creating websites and web apps. In fact, it was first released in version 1.0 in April 2022. Despite its young age, over 100,000 teams and software developers are already using the framework. Supporters include Google, Netlify, NordVPN, The Guardian, and Trivago. Astro offers some new and unique approaches that can greatly improve the development of web applications and websites. In the following, we will take a closer look at some of the advantages of using Astro.

The top priority of Astro is to send as little JavaScript as possible to the user's browser (client). This leads to extremely short loading times for the application/website. However, JavaScript is sometimes necessary to create interactivity on the website. Astro has a solution for this: during development, you can define which elements should use JavaScript and which should not, so that as little JavaScript as possible is output to the user. This selective selection of individual components is called "Astro Islands," which we will describe in more detail below.

Astro Islands allow you to integrate a selection of the most popular frontend frameworks into your application (BYOF = Bring Your Own Framework), all at the same time. For example, on a single page, you can write a header in React.js, a side navigation in Vue.js, the content in Markdown, and the footer in plain HTML. This enables a completely new approach to traditional web development. Teams can now use their preferred framework depending on the feature on the website, instead of being limited to a single technology.

Similar to Next.js, Astro also offers the ability to not only generate pages statically but also to render them server-side. This also comes with the ability to use API routes, which are server-side functions that can be called. This means that Astro is not just a client-side JavaScript framework but can also handle most common server-side tasks such as authentication or sending emails.

One of the most important advantages of Astro has already been mentioned: a technology-agnostic approach to web development. Nearly all well-known frameworks can be combined in an Astro application. Additionally, using as little JavaScript as possible leads to minimal loading times for a website or web application, which noticeably affects user experience and conversion.

Astro's biggest disadvantage is its young age, which means that there are few third-party packages available, and many features require custom development. For example, at the time of writing this blog post, there is no native Astro library for Auth0. However, this disadvantage can be mitigated by using Astro Islands, which allow for the use of many technologies with large ecosystems.

Astro is especially suitable for new projects where a team of developers with different frontend frameworks collaborate. Thanks to Astro's SSR/API route features, entire applications, including most requirements, can be implemented. It is also possible to easily host Astro projects with popular hosting providers like Vercel. Large enterprise projects that require a proven technology with a large ecosystem may not be the best fit for Astro. If the development team specializes in a specific technology like React.js or Vue.js, using Astro may only make limited sense and needs to be carefully considered.

Astro is still very young but has already made a name for itself with its appealing features. Its young age comes with a few drawbacks, such as a relatively small ecosystem and a lack of reference applications. However, both of these issues are likely to be resolved in the near future.

We have already extensively explored Astro. If you are also considering Astro for your project, feel free to contact us.

10 herausragende Headless Online-Shopping-Erlebnisse

Unabhängig davon, welche E-Commerce-Plattform diese Unternehmen nutzen, eines ist sicher: Sie haben sich wirklich Gedanken über ein fesselndes Online-Shopping-Erlebnis für ihre Besucher gemacht.

Jedes dieser Unternehmen wollte eindeutig seine Einzigartigkeit in den Vordergrund stellen und eine einmalige Erfahrung für seine Kunden schaffen. Um diese Ziele zu erreichen, haben sich für einen Headless Ansatz entschieden.

Headless bedeutet, dass Sie das Frontend ihrer Website von ihrem Backend entkoppelt haben. Auf diese Weise können sie ein komplett individuelles Kundenerlebnis im Shop erstellen, das nicht von irgendwelchen Themes oder Templates abhängig ist. Damit ist Headless ein großartiger Weg, wenn Sie eine maßgeschneiderte, hochgradig anpassungsfähige und skalierbare Website erstellen möchten. Das ist sehr hilfreich, insbesondere wenn Sie einen einzigartigen Auftritt hinlegen möchten! (Obwohl Themes eine großartige Möglichkeit sind, einen Online-Shop einzurichten, wird Ihr Shop leider immer auch mehr oder weniger austauschbar wirken.)

(Um mehr darüber zu erfahren, was ‘Headless’ bedeutet und wie es Ihrem Unternehmen helfen kann, abonnieren Sie unseren Newsletter und downloaden Sie unseren Guide über Headless mit Shopify ‚Unleashing Shopify‘ – oder lesen Sie unseren Blog-Artikel ‚Headless CMS – Was ist das? Eine Einführung‘

Wir werden an dieser Stelle nicht weiter ins Detail über ‘Headless’ gehen (dafür haben wir ja unter anderem den oben genannten Blogartikel), aber wir werden Folgendes sagen: WOW! Es hat sich für diese Unternehmen gelohnt, sich für ‘Headless’ zu entscheiden! Wir sind begeistert davon, wie interessant und kreativ diese Online-Shops sind. Es ist so offensichtlich, dass bei ihrer Gestaltung viele Gedanken, viel Zeit und kluge Strategien eingesetzt wurden.

Werfen wir also einen Blick auf 10 unserer Lieblings-Headless-Shops (, die unterschiedliche E-Commerce-Plattformen wie Shopify, BigCommerce oder Magento in Kombination mit dem Headless-Ansatz verwenden) und wir werden Ihnen erklären, wieso wir sie so großartig finden.

Ein Besuch bei Recess fühlt sich ein wenig nach Fliegen an – als hätte man Flügel wie ein Vogel und würde durch den Himmel schweben.

Während Sie scrollen, nimmt die Seite Sie mit auf eine spaßige und luftige Erfahrung. Wolken ziehen vorbei, während die Worte “calm“, “cool“ und “collected” sanft auf Ihrem Bildschirm vorbeiziehen, sodass Sie sich so gelassen wie eh und je fühlen.

Sechs Dosengetränke der Marke säumen den unteren Rand Ihres Bildschirms und während Sie mit der Maus über jede Geschmacksrichtung fahren – sei es „Black Cherry“ oder „Coconut Lime“ – ändert sich die Farbe auf dem Bildschirm entsprechend des betrachteten Produkts. Wenn Sie tatsächlich auf eine der Geschmacksrichtungen klicken, erwartet Sie eine neue kleine Welt. Jede Dose hat ihre ganz eigene Persönlichkeit, mit Vorlieben und Abneigungen obendrein – eine sehr clevere und raffinierte Idee der Texter von Recess und perfekt umgesetzt von ihrem Software-Entwickler-Team.

Das Gefühl, in die Wolken entführt zu werden, ist mit ihrer Website, die wunderbar zu ihrer Marke passt, sehr real. Die ganze Idee hinter der Marke ist es, Ruhe und Klarheit zu bringen. Diese beiden Emotionen sind beim Scrollen durch ihre Site zutiefst zu spüren. Plötzlich verschwinden alle Sorgen der Welt, und für diese 10 Minuten, in denen Sie entscheiden, ob der neue Partner Ihres besten Freundes „Pfirsich-Ingwer“ oder „Blutorange“ bevorzugen würde, eine Entscheidung, die Sie normalerweise gestresst zurücklassen würde, mit Recess's Website lässt Sie sich seltsam ruhig fühlen. Eine sehr einladende und neue Erfahrung. Wir lieben es.

Nichts für schwache Nerven. Wenn ich die Website von K2 Sports lade, dann spüre ich, wie sich die Härchen an meinem Arm aufrichten und fühle mich, als wäre ich mittendrin bei den Olympischen Winterspielen und alle starrten mich direkt an. Herzrasen und weit geöffnete Augen – das perfekte Gefühl, wenn man auf einer Ski- und Snowboard-Website ist, oder nicht?

Diese Seite hat mich direkt in die Berge transportiert. Ich spürte sofort die kalte und frische Luft auf meinem Gesicht, das Hochgefühl neuer Schuhe und Skier an meinen Füßen und die Aufregung des kommenden Tages.

Diese Website tut genau das, was sie soll: Sie lässt Sie den Anblick und das Gefühl der winterlichen Pisten vermissen und lässt Ihre Herzfrequenz mit ihren Einführungsvideos von erfahrenen Skifahrern in ihrem Element höher schlagen.

Diese Website ist so viel mehr als nur „Wir verkaufen Wintersportausrüstung“, diese Website verbindet gemeistertes Handwerk, Nostalgie und Innovation. K2 hebt die phänomenale Qualität ihrer Produkte hervor und präsentiert ihre Ausrüstung in ihren Videos auf „echte Weise“, damit Sie die Produkte in Aktion sehen können!

Ehrlich gesagt, werde ich die K2-Website jedes Mal besuchen, wenn ich mich etwas faul fühle, denn die Energie, die durch jede Pore dieser Website sickert, ist ansteckend.

Wassern filtern, während man Unterwegs ist? Mehr muss man wohl nicht sagen.

Um fair zu sein, war mir die Bedeutung von Wasserreinigung immer etwas unklar (entschuldigen Sie das Wortspiel, ha!).

Larq hätte es jedoch nicht klarer machen können, als sie es auf ihrer Website veranschaulichen. Ihr Wasserfiltersystem auf ihrem Larq Pitcher PureVis und das GIF-Bild, das sie von den im Filtersystem eingeschlossenen Schadstoffen und dem zu reinigenden Wasser haben, sind wirklich herausragend.

Wenn es um das technologisch fortschrittliche Larq Bottle Movement PureVis und sein UV-C-LED-Licht geht, mit dem Sie unterwegs gereinigtes Wasser trinken können, dann spürt man das Gefühl von Einfachheit und Gesundheit.

Ich kann es kaum erwarten, eine Flasche von Larq zu kaufen!

Hallo, an potenziell unnötige Ausgaben. Ciao, an jedes Schuldgefühl, wenn ich mich beim Onlineshopping etwas verwöhne.

Auf dieser Seite bekommen Sie das Gefühl, dass Sie bei jedem einzelnen Artikel nur auf „In den Warenkorb“ klicken wollen – sogar bei den Produkten, bei denen Sie sich nicht einmal sicher sind, wie Sie sie zu verwenden sind, oder vorher gar nicht wussten, dass diese überhaupt existierten! Aus irgendeinem Grund möchte ich sie alle in meinem Warenkorb haben, und zwar sofort!

Bei einer Seite mit so viel Abwechslung und so vielen Produkten hat Oliver Bonas es trotzdem geschafft, die Details nicht aus den Augen zu verlieren. Genau dafür steht das Online-Kaufhaus und die Marke: Auswahl, Flexibilität, Klasse und auch ein Auge für Design, Farbe und Detail.

Es ist schön, wenn Sie die Absicht einer Marke und das Image der Marke auf ihrer Website lesen können – wenn ihre ‘Tone of Voice’ über die Website selbst zu hören ist. Vergessen Sie nicht den schieren Umfang des Shops, die Benutzerfreundlichkeit, die Geschwindigkeit, mit der die Seiten geladen werden, und die Designfunktionen!

Cheers, Oliver Bonas, was für eine tolle Seite!

Schuh-Utopie! (sowie Kleidung und Socken Utopie)

Es dreht sich alles um die Geschichte, die Nachhaltigkeit und die Herkunft ihrer Produkte.

Sie sehen es im Video auf ihrer Landingpage klar und deutlich. Wie sie von Bambussprossen über Holzstücke bis hin zu Schafwolle gehen – alles ist eine Zeitreise.

Ihr Slogan lautet „Made from Nature, for Nature“ und dieses Gefühl zeigt sich in ihrem heimeligen und gleichzeitig nachhaltigen Design auf ihrer Website. Sobald Sie ein Gefühl für ihre Landingpage und ihre faszinierenden Produkte bekommen, wissen sie, dass Sie sich auf etwas Spannendes freuen können!

Jedes Produkt ist ehrlich. Das mag seltsam klingen, ist aber wahr und passt perfekt zur Marke Allbirds. Sie sind eine ehrliche Marke, die ehrliche Materialien verkauft und versucht, eine ehrliche Zukunft zu schaffen. Das liegt daran, dass Sie nicht nur jedes Produkt bis ins kleinste Detail sehen, sondern die Produkte auch in Bewegung sehen, erfahren können, wie es am Fuß sitzt, und wie Sie damit bei Regen und auch Sonnenschein durch die Straßen Ihrer Stadt laufen können.

Allbirds Ziel ist es natürlich, ihre Produkte zu verkaufen, aber auch eine wichtige Botschaft über die Auswirkungen der Modeindustrie auf die Welt zu vermitteln. Zwei nicht so einfach zu verbindende Dinge, was Allbirds trotzdem erfolgreich gelungen ist. Ihre Website geht nahtlos von der „perfekten Socke“ zum Thema Nachhaltigkeit über.

Ich weiß nicht, wie sie das gemacht haben, aber das ‘Lernen’ hat zum ersten Mal seit Langem für mich Spaß gemacht, ha!

Jede Menge Informationen und Style in einem!

Blättern Sie mit Leichtigkeit durch einen riesigen Katalog an Brillen! Die meisten Unternehmen, das so viel Inventar und so viele Optionen haben, kämpfen mit der Darstellung der Sortimentsbreite und Ihre Shops sind oft schwer zu bedienen.

Sie haben eine Website erstellt, die Ihnen einen Überblick über alle ihre Produkte gibt, perfekt aufgeteilt und in Kategorien unterteilt ist. Sie haben ein nützliches Video auf ihrer Landingpage, das den perfekten Stil/die perfekte Brillenform zu Ihrer spezifischen Gesichtsform empfiehlt und damit das Online-Shopping für Brillen tatsächlich möglich macht.

Damit positioniert sich Fielmann auch als Marke: Trendy, hilfsbereit und zukunftsorientiert.

Ich dachte immer, Brillenkauf sei etwas, das man im Geschäft machen muss, aber mit Fielmanns Videos und der detaillierten Beschreibung der Produkte bin ich jetzt ziemlich nah dran „Zur Kasse“ zu gehen.

Der Onlineshop von De Bijkenkorf ist wirklich einzigartig. Geduldig sitzt man da, wie ein Kind vor dem Kamin zu Weihnachten, mit leuchtenden Augen und ganz viel Aufregung. Während der die Prozente beim Laden hochticken, wird die Aufregung fast zu groß.

Es ist wie ein Zauberwald, der auf die Welt der Technologie des 21. Jahrhunderts trifft. Es ist so bizarr und clever, dass ich immer noch zutiefst beeindruckt bin.

Sie führen mit ihrer Maus eine Biene durch einen Wald, und entdecken dabei die Produkte des Anbieters. Es ist so zukunftsweisend und maßgeschneidert. Wenn Sie auf etwas klicken, hören Sie das Zwitschern von Vögeln und summenden Insekten, während Sie durch die Bäume gehen. Ich kam von lässig sitzenden „Valentino“-Sneakern zu schwebenden kniehohen Stiefeln, die von schwebenden Schmetterlingen umgeben sind. Ich glaube, ich habe noch nie in meinem Leben einen so bizarren Satz gesagt wie diesen.

Für einen Onlineshop ist diese Website wirklich erstaunlich. Tatsächlich ist dies sogar für die Zukunft von Websites wirklich erstaunlich. Einen großen Applaus für de Bijenkorf und ihren Mut etwas komplett Anderes zu machen!

Erinnern Sie sich noch an den Roboter Tanz?

Ich frage, weil mich das daran erinnert, dass wir auf eine sehr AI-Welt zusteuern. Die Welt der Roboter und cleverer Technik.

Ganz oben auf der Seite wissen Sie bereits genau, worum es bei diesem Unternehmen geht. Es ist brutal ehrlich, genau wie das Produkt, das sie verkaufen: Der weltweit erste Heim-Körperscanner.

Das erste Video oben auf der Seite, das eine Frau vor dem Spiegel zeigt, die sich dreht und sich in einen Avatar verwandelt, vermittelt sofort, worum es geht. Man erkennt, hier geht es um Hightech und Kreativität, was direkt mit dem Produkt übereinstimmt, das Naked verkauft, sowie mit ihrem Markenimage. Das ist immer ein toller Anfang!

Wenn Sie durch die Website scrollen, sehen Sie, wie viel Sorgfalt darauf verwendet wurde, sensible Informationen in Bezug auf Körperfett und Körperbild bereitzustellen.

Ich habe ein bisschen Respekt davor, selbst einen solchen Spiegel zu bekommen. Ich weiß nicht, wie ich mit dieser Ehrlichkeit umgehen werde, aber die Website und das Produkt von Naked sind zweifellos brillant.

Ich liebe es von Anfang an: Eine leere Leinwand mit schwarzen kleinen Flecken, die ringsum erscheinen.

Der perfekte Hintergrund für ein Hautpflege-Unternehmen.

Was sind wir, wenn nicht eine schöne leere Leinwand mit ein paar Unreinheiten hier und da?

Alles an ihrer Website schreit nach „Sauberkeit“ und „Simplizität“. Ich stelle mir ihre Produkte weich, leicht parfümiert und einfach in der Verpackung vor.

Ja, genau das habe ich erwartet. Hilfreich und funktional ist die Drag-Funktion, die Sie unten an ihrer Seite sehen werden. Mit dieser können Sie ihr gesamtes Sortiment durchsuchen. Klicken Sie einfach bei einem der Produkte auf „Entdecken“ und Sie werden zu allen Informationen weitergeleitet, die Sie möglicherweise in Bezug auf Hautpflegeprodukte benötigen. Sie sehen die Verpackung, Sie sehen die Creme, wie sie natürlich ist, Sie sehen die Haut eines atemberaubenden Models, die von dieser Creme strahlt, und führt Sie dann zu einer leicht verständlichen Liste mit Vorteilen und Düften.

Es ist genau, wie der Name auf Niederländisch sagt: wunderschön. Ich glaub, ich kann sogar so weit gehen, es als „atemberaubend“ zu bezeichnen.

Tauchen Sie mit dieser atemberaubenden Präsentation in die neuesten Produkte aus der Welt des Designs ein.

Das ist doch genau das, was Sie von einem innovativen Design Imperium erwarten: Optisch erstklassig und einladend.

Immer wenn ich mir die Website eines Designhauses ansehe, bin ich überrascht vom Mangel an Innovation. Dies ist bei „Moooi“ sicherlich nicht der Fall. Sie können sich genau vorstellen, wie einer ihrer Couchtische in Ihrem Wohnzimmer aussehen könnte oder wie eine helle Tapete Ihr leicht dunkles Badezimmer aufpeppen könnte.

Sie haben eine wunderbar integrierte Website geschaffen, die man hören, fast fühlen und berühren kann! Sie haben wirklich einen Raum geschaffen, in dem Sie den Wunsch haben, durch Ihren Bildschirm zu greifen und das zartrosa Fell einer Couch zu berühren.

10 Exemplary Headless Online Shopping Experiences

Regardless of which E-Commerce service platform these companies are using, one thing is for sure: they have truly upped the ante when it comes to their online shoppers having a captivating online shopping experience.

Each of these companies clearly wanted to create something unique for their visitors. They each decided for a headless approach when it came to creating their website.

That they decoupled the front-end of their website, from their back-end. This allows them to create a bespoke user interface that isn’t dependent on a template format. A great route to go if you’re keen on creating a website that is custom-made, highly adaptable and also scalable! Moreover, if you want to stand out from the rest! Whilst templates are a great way to set up an online store and have an impressive number of ways in which you can change things like the color of the buttons, fonts, layout and much more, at the end of the day, you’re still working on a template that other companies have as their website layout too.

(For more on what going headless means, subscribe to our newsletter and sign up for our highly anticipated headless white paper ‘Unleashing Shopify’ coming soon! Or read our blog on ‘Headless CMS — What is it? A short and sweet explanation’ 

We’re not going to go into the nitty-gritty of going headless here, as it’s explained in the blog link above, but we are going to say this: My goodness, going headless was worth it for these companies! Our minds are blown by how seamless and creative these websites are. It is so evident that thought, time and clever strategies were implemented when designing these sites.


We’ve recapped 10 of our favorite websites (that use either platforms such as Shopify, BigCommerce, Wordpress or Magento + the headless approach) and we’re about to tell you why we think they’re so great

It feels a bit like what floating through the sky might feel like, if we were birds and had wings.

As you scroll, the page takes you on a whirlwind of experiences. Clouds are drifting by as the words ‘cool’, ‘calm’, and ‘collected’ gently sweep by on your screen, making you feel as serene as ever.

Six of their canned drinks line the bottom of your screen and as you hover over each flavor, be it their divine ‘Black Cherry’ or their refreshing ‘Coconut Lime’ your entire screen changes in color. When you actually click into one of the flavors, an entire personality awaits you. Each can has its very own personality, with likes and dislikes to boot! Such a clever and nifty idea of their copywriter, and perfectly strung together by their software developer.

The feeling of being transported up into the clouds is very real with their website, which matches their brand beautifully. The whole idea behind the brand is to bring calm and clarity. Both these emotions are deeply felt when scrolling through their site. Suddenly all the worries of the world slip away, and for those 10 minutes while you’re deciding if your best friend's new partner would prefer ‘Peach Ginger’ or ‘Blood Orange’, a decision that would usually leave you feeling stressed out, Recess’s website has you feeling oddly calm. A very welcoming and new sensation, we love it.

Not for the faint-hearted, let’s just start there.

The moment K2 Sports’s website popped open, I felt the little hairs on my arm rise and felt like I was at the Winter Olympics and everyone was staring directly at me. Heart racing and eyes wide open, the perfect feeling to have when you’re on a skiing and snowboarding website, isn’t it?

This site transported my right back to the Alps in Winter time. I immediately felt the cold and fresh air on my face, the exhilaration of new boots and skis on my feet and the excitement of the day to come.

Their website does exactly what it’s meant to, it has you missing the sight and feel of the wintry slopes, and gets your heart rate pumping with their introductory videos of skilled skiers in their element.

It’s so much more than just ‘selling winter sport equipment’, this website skillfully ties together craftsmanship, nostalgia, and ingenuity. They highlight the phenomenal quality of their products, whilst showcasing their equipment in a ‘real way’ through their videos, so that you can see the products in action!

Honestly, I’m going to visit the K2 website every time I feel a bit lazy because the energy that seeps through every pore of this website is infectious.

On the move water purification? Already sold.

To be fair, the meaning behind what water purification means has always been a bit murky to me (excuse the pun, ha!).

Larq couldn’t have made it any more clear than how they’ve visually explained it on their website, though. Their water filtration system on their Larq Pitcher PureVis and the GIF image they have of the pollutants being trapped in the filtering system and the water being purified is truly stellar.

When it comes to the technologically advanced Larq Bottle Movement PureVis and its UV-C LED light that allows you to drink purified water on the move, the feeling of simplicity and health are evident in the colors and the design they have decided to use on their site.

I can’t wait to get my hands on one of these!


Hello, potential unnecessary spending. Good-bye, any guilt toward spoiling myself.

This site makes you feel like you just have to click ‘add to cart’ on every single item. Even the random bits that you’re not even sure how to use, or that they existed in the first place! For some odd reason, I want them in my cart too!

For a site with so much variety and so many products, Oliver Bonas has somehow still managed not to lose sight of the details. Which is precisely what this online department store  and brand stands for: choice, flexibility, class and also an eye for design, color, and detail.

It’s lovely when you can read the intention of a brand and the brand’s image, through their website. When their tone of voice can be heard through the website itself, which is exactly what theirs does. And don’t forget the sheer volume of their site, the ease of use, the speed in which it takes the pages to load and the design features!


Shoe Utopia! (as well as apparel and sock utopia, actually)

It’s all about the story, the sustainability, and the origin of their products.

You see it clear as day on the video on their landing page. How they go from bamboo shoots, to carved wood, to sheep’s wool – it’s all a journey in time.

Their slogan is ‘Made from Nature, for Nature’ and that feel is clear in their homey yet also sustainable design on their site. Once you’ve gotten a feel for their landing page and start being intrigued by their individual products, you are in for a treat!

Each product is honest. That may sound weird, but it’s true and perfectly in line with the Allbirds brand. They’re an honest brand, selling honest materials and trying to create an honest future. The reason I say this is because not only do you see each product in minute detail/zoom function, but you also see the product in motion, how it sits on the foot, how you can run with it through the streets of your city come rain or shine.

Allbirds aim is, of course, to sell their products. But also to convey important messaging around the impact the fashion industry is having on the world. Two things that are difficult to tie together, which Allbirds has successfully managed to do. Their website seamlessly goes from ‘the perfect sock’ to a sustainability report.

I don’t know how they did it, but they’ve made learning fun!

Loads of information and style all in one.

Browse through a massive catalog of eyewear with ease! Any company that has THIS much inventory and this many options would usually look outdated and be hard to use.

They’ve created a website that gives you an overview of all their products, perfectly divided and subdivided into categories. They have a useful video on their landing page that suits the perfect style/shape of eyewear to your specific facial bone structure, making shopping online for eyewear actually possible.

This depicts the type of company Fielmann is. Trendy, helpful and forward-thinking.

I always thought shopping for eyewear was something you had to do in-store, but with Fielmann’s videos and detailed description of their products, I am very close to hitting that ‘Go to Checkout’ right about now.

You sit waiting patiently, like a child in front of the chimney at Christmas, eyes gleaming, excitement bubbling up, but pretending to play it cool.

As the % continue to grow on our home screen, the excitement is almost too much to bear.

It’s like an enchanted forest, meets the world of 21st century tech. It is so bizarre and clever, that I’m still in awe.

You use your mouse to guide a bee through the forest, who then helps you discover all of their products. It is so forward-thinking and bespokely made. When you click on something, the sound of chirping birds and buzzing insects fills your ears as you make your way through the trees. I went from casually sat ‘Valentino’ sneakers, to floating ‘Toral’ knee-high boots surrounded by floating butterflies. I don’t think I’ve ever said a sentence as bizarre as that one in my life.

For a department store, this is truly remarkable. Actually, even for the future of websites, this is truly amazing. Standing ovation for de Bijenkorf!

I ask because this reminds me of the fact that we are steering toward a very AI world. The world of robots and clever technology.

At the very top of the site, you already know exactly what this company is about. It’s brutally honest, just like the product they sell. The world’s first home body scanner.

The top video of the woman who stands before the mirror and then spins and turns into an avatar is very high tech and creative, which is directly in line with the product that Naked sells, so their brand image and the messaging one receives as an online visitor is exactly what the company sells. That’s always a great start!

As you scroll through the website, you see just how much care and thought was taken into delivering sensitive information when it comes to body fat and body image.

I’m a bit scared to get one of these myself, I don’t think I could handle that level of honesty, but their website is absolutely brilliant.

Love it from the get go. A blank canvas with black little spots appearing all around.

The perfect background for a skincare company.

What are we if not a beautiful blank canvas with a few impurities here and there?

Everything about their website screams ‘cleanliness’ and ‘streamline’. I imagine their products are soft, lightly scented and simple in terms of packaging.

Yes, that’s exactly what I was expecting. The drag function that they have at the bottom of their page so that you can look through their entire range is helpful and functional. Simply click on ‘Discover’ on any of the products, and you will be transported to all the information you could possibly need when it comes to skincare products. You see the packaging, you see the cream as it naturally is, you see a stunning model’s skin glowing from said cream, and then it leads you to an easy-to-read list of benefits and fragrances.

It’s exactly as the name says in Dutch – beautiful. I may even go so far as to call it ‘breathtaking’.

Über die Vorteile von Headless in Kombination mit Shopify (Plus) haben wir bereits an vielen Stellen gesprochen und geschrieben (z. B. auch in unserem 

). Natürlich stellt sich im Anschluss schnell die Frage: „Aber was kostet das eigentlich?“

Leider ist es nicht so einfach diese Frage pauschal zu beantworten. Für eine konkrete Einschätzung benötigen wir tiefe Einsicht in die Anforderungen, Wünsche und Ziele, die mit einem Headless Projekt verbunden sind.

Aber wir können natürlich darauf eingehen, welche Faktoren inwiefern Einfluss auf die Kosten nehmen. Dabei betrachten wir im Folgenden nicht nur die initialen Kosten, sondern auch die laufenden Kosten eines Headless Shopify Set-ups.

Es gibt unterschiedliche Wege ein Headless Storefront mit Shopify umzusetzen. Wir klammern die unterschiedlichen Lösungen mit Drittanbieter-Software fürs Frontend (wie z. B. 

) an dieser Stelle aus und betrachten ausschließlich die Entwicklung einer komplett individuellen Frontend-App auf Jamstack Basis.

Obwohl ich eingangs erwähnte, dass es schwierig ist konkrete Zahlen zu nennen, lehne ich mich ein wenig aus dem Fenster und nenne grobe Zahlen: Die meisten unserer Headless Frontend Projekte für Shopify bewegen sich im Aufwand zwischen 30.000 € - 350.000 € (brutto).

Natürlich sind diese Zahlen mit einigen Hinweisen zu versehen: Die untere Grenze betrifft hauptsächlich kleine Shops mit wenigen Produkten und Seiten, die daher fast eher als Landingpages zu sehen sind. Und im oberen Bereich können die Aufwände auch über den genannten Wert hinausgehen, wenn es darum geht besonders komplexe Designs oder Feature Wünsche umzusetzen.

Die folgenden Aspekte sind in der Regel die wichtigsten Kostenfaktoren bei einem Headless Shopify Projekt:

Die Menge der für den Shop umzusetzenden Design-Komponenten (Seiten, wiederverwendbare Sektionen etc.)

Die Komplexität des Designs (Wie stark variieren die Designelemente? Wie kompliziert sind die Elemente in Code umzusetzen? - Wir empfehlen übrigens allgemein die Verwendung eines Design Systems.)

Die Anzahl und Komplexität der Integrationen zu anderen Systemen (z. B. CMS, PIM, ERP etc.)

Der gewünschte Grad der technischen Optimierung (Ladezeiten, Google Web Vitals etc.) zum Launch

Headless Frontend vs. Custom Shopify Theme

Eine sehr interessante Bezugsgröße für die Kostenschätzung ist übrigens der Aufwand für die Umsetzung des gleichen Designs als individuelles Shopify Theme. Hier zeigt unsere Erfahrung, dass die Kosten im Vergleich häufig nur 10 - 20 % höher ausfallen – und das bei wesentlich besseren Performance-Daten und mehr Freiheiten mit dem Headless Frontends.

Wenn neben einem CMS noch weitere Software oder komplexe Lösungen wie ein Konfigurator im Frontend verbaut werden sollen, dann kann es übrigens vorkommen, dass die Umsetzung eines Headless Frontends sogar weniger kostet, als ein individuelles Shopify Theme. Das liegt daran, dass es teilweise aufwändiger ist, bestehende Lösungen für die Verwendung in Shopify anzupassen, als sie einfach in ein flexibles Headless Frontend einzubinden.

Neben den initialen Projektkosten für das Headless Frontend kommen natürlich auch andere laufende Kosten auf Sie zu. Deshalb werfen wir auch einen Blick auf einige der Tool und Hosting Kosten, damit Sie einen Eindruck über die Gesamtkosten des Betriebs (Total Costs of Ownership – TCO) erhalten.

Um die rasanten Ladezeiten zu erreichen, für die Headless bekannt ist, werden in der Regel sogenannte Static Page Generators eingesetzt. Ein weiterer Vorteil dieser Vorgehensweise ist, dass die Hostingkosten überschaubar sind. Bei einem Hosting über 

 kommen für die meisten Szenarien etwa monatliche Kosten von gerade einmal 20 $.

Wie bereits angeschnitten werden Sie für die Steuerung der Inhalte in Ihrem Headless Frontend vermutlich ein CMS wie 

 einbinden. Hier hängt der Kostenpunkt von der Wahl des Anbieters, der Komplexität und Menge der Inhalte, sowie der Anzahl der Zugriffe auf Ihren Shop ab. Viele der CMS-Anbieter haben kostenlose Pläne, die erstaunlich häufig ausreichend Features für den Einstieg bieten. Sollte man doch bezahlte Features benötigen, dann belaufen die monatlichen Kosten hier meistens auf einen zwei- bis dreistelligen Betrag.

Mit dem Schritt zum Headless Frontend bei Shopify übernimmt man natürlich auch die Verantwortung für die laufende Weiterentwicklung – genau, wie es bei einem individuellen Theme innerhalb von Shopify der Fall wäre. Während das initiale Aufsetzen (s. o.) noch teurer sein kann, ist es bei der laufenden Entwicklung meistens andersherum.

Es ist mit einem Headless Frontend schlichtweg einfacher neue Komponenten und Features zu ergänzen – gerade wenn es sich dabei um etwas komplexere Funktionalitäten handelt. Dazu zählen etwa besondere Produkt Konfiguratoren oder ein individuelles Quiz, sofern diese nicht von einer Shopify App im gewünschten Funktionsumfang abgebildet werden können.

Deshalb lohnt sich eine Headless Lösung auch besonders für Unternehmen, die Ihren Onlineshop sehr aktiv gestalten und weiterentwickeln.

Neben den bereits genannten Komponenten kommt bei Headless Stores in der Regel noch weitere Drittanbieter Software zum Einsatz. Das können z. B. ein Cookie Consent Tool, erweitertes Tracking, CRM Systeme und viele andere Werkzeuge sein.

Ich hoffe, Sie haben jetzt eine grobe Vorstellung davon, was es Sie kosten kann, wenn Sie entscheiden, mit Shopify ein Headless Commerce Frontend zu nutzen. Zum Abschluss möchte ich mich nun noch mit dem Thema Kosteneffizienz befassen. Schließlich kann man immer viel über Kosten sprechen, aber letztlich zählt für Ihr Unternehmen das Ergebnis einer Maßnahme – also ob sich die Investition in ein Headless Frontend in Form von mehr Umsatz, mehr Gewinn oder niedrigeren Kosten an anderer Stelle rentiert.

Unsere Erfahrung zeigt, dass der Wechsel zu einem Headless Frontend positive Einflüsse an vielen Stellen im Unternehmen hervorbringt:

Zunächst ist da natürlich die Leistungssteigerung in Sachen Ladezeiten (wenn man im Rahmen des Projektes entsprechend auf die Optimierung geachtet hat). Allein dieser Faktor hat viel Einfluss auf Ihren Shop:

Besucher bleiben länger im Shop (höhere Verweildauer, niedrigere Leave Rates)

Steigende Conversion Rates führen zu mehr Umsatz

Steigerung der Google Web Vitals sorgt für ein besseres Suchmaschinenranking und somit mehr Besucher in Ihrem Shop

Die verbesserte User Experience im Shop sorgt häufig für einen positiven Effekt auf die Markenwahrnehmung im Vergleich zu Ihrer Konkurrenz

Diese Verbesserungen wirken sich auch auf andere Abteilungen in Ihrer Firma aus. So ist z. B. eine höhere Conversion Rate direkt mit niedrigeren Customer Akquisition Costs (CAC) verbunden, was für viel Freude in Ihrem Marketing Team sorgen sollte.

Zudem profitieren Sie auch durch die Flexibilität des Headless Frontends. Wie bereits erwähnt ist die Wartung und Weiterentwicklung in der Regel weniger aufwändig und damit günstiger. Zudem bleibt so mehr Zeit und Budget für die Entwicklung neuer Features oder Optimierung der User Experience, die weitere Conversion Rate Steigerungen zur Folge haben können.

Aufgrund dieser Faktoren zahlt sich der Wechsel zu einem Headless Frontend mit Shopify für viele Unternehmen schon innerhalb der ersten 24 Monate wieder aus.

Natürlich gibt es aber auch Szenarien, in denen ein Headless Frontend sprichwörtlich „mit Kanonen auf Spatzen geschossen“ wäre. Zum Beispiel können einfache Shops, die erst am Anfang Ihres Erfolgs stehen, meist stärker durch andere Maßnahmen profitieren, als durch den Wechsel zu Headless. Zu den Szenarien in denen Headless mit Shopify sich lohnt oder sich auch nicht lohnen kann, haben wir bereits einen weiteren Blog Artikel geschrieben. Diesen finden Sie hier.

Haben Sie Interesse Ihren Shopify Shop mit einem Headless Frontend zu erweitern, oder einen Headless Shop mit Shopify aufzubauen? Als Shopify und Headless Commerce Experten unterstützten wir Sie gerne. Nutzen Sie einfach unser Kontaktformular für Ihr Anliegen.

We’ve often shouted from the rooftops about the many advantages there are when combining a headless tech stance, with an E-Commerce platform giant like Shopify Plus (e.g., in our 

). We take the time to expertly explain this dream pairing but of course, the following question quickly arises: “Yes, that sounds grand but what does it actually cost?”

Address

Socials

Contact Us

Tagged: Headless Commerce

Headless CMS – What is it? A short and sweet explanation

What is Astro?

10 Exemplary Headless Online Shopping Experiences

The cost of Headless Shopify

Headless Commerce – What is it?

Headless CMS: 5 Reasons Why

Is Headless Shopify the right choice for you?

Hello, Hygraph.