{"id":17889,"date":"2026-08-07T10:33:34","date_gmt":"2026-08-07T04:48:34","guid":{"rendered":"https:\/\/www.bay20.com\/de\/?p=17889"},"modified":"2026-08-19T14:40:27","modified_gmt":"2026-08-19T08:55:27","slug":"umfassender-leitfaden-zum-bigcommerce-catalyst-tech-stack-und-seinen-funktionen","status":"publish","type":"post","link":"https:\/\/www.bay20.com\/de\/umfassender-leitfaden-zum-bigcommerce-catalyst-tech-stack-und-seinen-funktionen\/","title":{"rendered":"Umfassender Leitfaden zum BigCommerce Catalyst-Tech-Stack und seinen Funktionen"},"content":{"rendered":"\n<p><strong><a href=\"https:\/\/www.catalyst.dev\/\" target=\"_blank\" rel=\"noopener\" title=\"\">Catalyst<\/a><\/strong> ist die vollst\u00e4ndig anpassbare, modulare Shop-Oberfl\u00e4che und das Framework f\u00fcr BigCommerce. Als vollst\u00e4ndig entwickelte Shop-Oberfl\u00e4che und Toolkit, das offiziell von BigCommerce entwickelt und gepflegt wird, beschleunigt Catalyst Ihre modulare Entwicklung und erm\u00f6glicht es Ihnen, den Schritt der Erstellung einer Standard-E-Commerce-Oberfl\u00e4che zu \u00fcberspringen und direkt damit zu beginnen, diese mit individuellem Branding und eigenen Funktionen anzupassen.<\/p>\n\n\n\n<p>Catalyst ist ein praktischer Open-Source-Ausgangspunkt, der auf den besten modernen Tools basiert und darauf ausgerichtet ist, Ihnen die Flexibilit\u00e4t zu geben, ganz nach Ihren Vorstellungen zu entwickeln. Mit dem integrierten, leistungsstarken visuellen Editor \u201eMakeswift\u201c bietet Catalyst klare Arbeitsbereiche f\u00fcr Entwickler und Marketingfachleute. Sie k\u00f6nnen ohne Programmierkenntnisse reichhaltige und kreative Content-Designs erstellen, w\u00e4hrend Entwickler weiterhin die volle Anpassungsfreiheit haben, um neue Interaktivit\u00e4ten und Integrationen zu entwickeln.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Die wichtigsten Highlights von Catalyst<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Ein voll funktionsf\u00e4higer Online-Shop in Sekundenschnelle<\/li>\n\n\n\n<li>Optimiert f\u00fcr SEO und Barrierefreiheit<\/li>\n\n\n\n<li>Fein abgestimmte Leistung mit marktf\u00fchrenden Lighthouse-Werten<\/li>\n\n\n\n<li>Basierend auf beliebten, erstklassigen Tools, die Entwicklungsteams gerne nutzen<\/li>\n\n\n\n<li>Sofort anpassbar und bereit f\u00fcr nahtlose Integrationen f\u00fcr jeden gesch\u00e4ftlichen Bedarf<\/li>\n\n\n\n<li>Vorkonfigurierte Integrationen f\u00fcr f\u00fchrende Such- und CMS-Anbieter<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Der Bigcommerce Catalyst-Tech-Stack<\/h2>\n\n\n\n<p>Das R\u00fcckgrat von Catalyst bildet eine \u00fcberschaubare Auswahl an Tools, die in der Entwicklung von Webanwendungen f\u00fcr Unternehmen weit verbreitet und beliebt sind. Das bedeutet, dass Entwickler auf der Basis von Catalyst mit den Frameworks und Sprachen arbeiten k\u00f6nnen, die sie bereits gerne nutzen. Der Catalyst-Tech-Stack umfasst:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Next.js<\/h3>\n\n\n\n<p>Der Catalyst-Storefront ist, vereinfacht ausgedr\u00fcckt, eine auf Next.js basierende Anwendung, und Next.js ist ein auf React aufbauendes Full-Stack-Web-Framework. Beachten Sie, dass Catalyst die Next.js-<strong><a href=\"https:\/\/nextjs.org\/docs\/app\/getting-started\/layouts-and-pages\" target=\"_blank\" rel=\"noopener\" title=\"\">App-Router<\/a><\/strong>-Architektur verwendet, die sich in wesentlichen Punkten vom bisherigen <strong><a href=\"https:\/\/nextjs.org\/docs\/pages\/building-your-application\/routing\" target=\"_blank\" rel=\"noopener\" title=\"\">Pages-Router<\/a><\/strong> unterscheidet.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">React-Serverkomponenten<\/h3>\n\n\n\n<p>React ist eine klassische Frontend-Sprache, die f\u00fcr die Darstellung der Benutzeroberfl\u00e4che im Browser des Nutzers zust\u00e4ndig ist. Frameworks wie Next.js nutzen das serverseitige Rendering von React-Komponenten f\u00fcr das Laden ganzer Seiten. Dabei besteht in der traditionellen Architektur des Pages Routers nach wie vor eine starre Trennung zwischen \u201ereiner Serverlogik\u201c \u2013 wie dem serverseitigen Abrufen von Daten \u2013 und den f\u00fcr das Rendering zust\u00e4ndigen Komponenten. Diese strenge Trennung zwischen Backend-Logik und Rendering ist f\u00fcr traditionelle Web-Frameworks recht typisch.<\/p>\n\n\n\n<p>Der App-Router erm\u00f6glicht die Verwendung von <strong><a href=\"https:\/\/nextjs.org\/docs\/app\/getting-started\/server-and-client-components\" target=\"_blank\" rel=\"noopener\" title=\"\">React-Serverkomponenten<\/a><\/strong>. Die Logik innerhalb von Serverkomponenten wird immer serverseitig ausgef\u00fchrt. Eine Komponente rendert ihr JSX (den React-Pr\u00e4sentationscode) auf dem Server in HTML oder f\u00fchrt es auf der Clientseite zusammen mit einer Nutzlast vom Server aus, w\u00e4hrend der gesamte \u00fcbrige Komponentencode vor dem Browser verborgen bleibt.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Tailwind<\/h3>\n\n\n\n<p><strong><a href=\"https:\/\/tailwindcss.com\/\" target=\"_blank\" rel=\"noopener\" title=\"\">Tailwind CSS<\/a><\/strong> ist ein beliebtes CSS-Framework, das mithilfe eines Systems aus Utility-Klassen eine schnelle und zuverl\u00e4ssige Gestaltung von Stilen und visuellen Layouts erm\u00f6glicht. Mit Tailwind m\u00fcssen Sie kein reines CSS schreiben, sondern verkn\u00fcpfen Utility-Klassen miteinander, um das gew\u00fcnschte Styling zu erzielen. Next.js verwendet standardm\u00e4\u00dfig Tailwind, und Catalyst-Komponenten nutzen das Tailwind-Styling in vollem Umfang.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">GraphQL<\/h3>\n\n\n\n<p>GraphQL ist der Industriestandard f\u00fcr die effiziente Abfrage von Daten, da es mehrere Datenpunkte in einem einzigen API-Aufruf abrufen kann. Dies unterscheidet GraphQL von REST-APIs, bei denen mehrere API-Aufrufe Ihre Website verlangsamen k\u00f6nnen.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">BigCommerce GraphQL Storefront-API<\/h3>\n\n\n\n<p><strong><a href=\"https:\/\/developer.bigcommerce.com\/docs\/graphql-storefront\" target=\"_blank\" rel=\"noopener\" title=\"\">Die GraphQL Storefront-API von BigCommerce<\/a><\/strong> erm\u00f6glicht die effiziente Abfrage von Storefront-Daten zur Unterst\u00fctzung leistungsstarker Headless-Storefronts. Die GraphQL Storefront-API von BigCommerce wurde speziell f\u00fcr diesen Zweck entwickelt und erm\u00f6glicht einen schnelleren Datenabruf, wodurch Headless-Erlebnisse sowohl reaktionsschnell als auch skalierbar bleiben. Mit der GraphQL Storefront-API k\u00f6nnen Sie Kundendaten aus der Perspektive eines Kunden in einem Kanal abrufen \u2013 das umfasst beispielsweise Preise, Produktverf\u00fcgbarkeit usw. Wenn Sie ein Produkt je nach Kanal oder Kundengruppe ausblenden, spiegelt sich dies automatisch in der API wider, und Sie k\u00f6nnen alle diese Informationen mit einem einzigen API-Aufruf abrufen. Mit der GraphQL Storefront-API ist Folgendes m\u00f6glich:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Katalogdaten wie Produktoptionen, Varianten, benutzerdefinierte Felder, Kategorien, Marken, Metafelder und mehr abrufen<\/li>\n\n\n\n<li>Kundendaten wie Name, E-Mail-Adresse und Attribute (sofern angemeldet) abrufen<\/li>\n\n\n\n<li>Abfrage und Verwaltung des Warenkorbs und des Bestellvorgangs, einschlie\u00dflich der Angabe komplexer Produktoptionen f\u00fcr Artikel, die in den Warenkorb gelegt werden<\/li>\n\n\n\n<li>Abruf von Echtzeit-Shop-Daten aus der Perspektive eines Kunden und eines Kanals, wie z. B. kundenspezifische Preise in der W\u00e4hrung des K\u00e4ufers und Produktverf\u00fcgbarkeit.<\/li>\n\n\n\n<li>Authentifizierung von Kunden<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Standardfunktionen von Catalyst<\/h2>\n\n\n\n<p>Die aktuelle Version von Catalyst bietet eine voll funktionsf\u00e4hige Umsetzung der wichtigsten Arbeitsabl\u00e4ufe f\u00fcr einen E-Commerce-Shop. Zu den Funktionen von Catalyst geh\u00f6ren:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Vollst\u00e4ndige Integration mit dem visuellen Editor von Makeswift f\u00fcr dynamische und statische Seiten<\/li>\n\n\n\n<li>Verf\u00fcgbare Integrationen mit g\u00e4ngigen Such- und CMS-Anbietern<\/li>\n\n\n\n<li>Produktlistenseiten, basierend auf den Marken und Kategorien von BigCommerce, mit facettierter Filterung<\/li>\n\n\n\n<li>Textsuche<\/li>\n\n\n\n<li>Der BigCommerce-Katalog bildet die Grundlage f\u00fcr Ihre dynamischen Produktdetailseiten.<\/li>\n\n\n\n<li>Produktvergleich<\/li>\n\n\n\n<li>Kundenregistrierung und -anmeldung mit kundenabh\u00e4ngiger Kataloganzeige und Produktpreisangaben<\/li>\n\n\n\n<li>Kundenkonto-Funktionen, darunter Adressbuch, Passwort-Zur\u00fccksetzen, Wunschlisten und Bestellhistorie<\/li>\n\n\n\n<li>Umfassende Unterst\u00fctzung f\u00fcr Gutscheine und Werbeaktionen<\/li>\n\n\n\n<li>Persistenter Warenkorb, der den Warenkorb eines registrierten Kunden bei der Anmeldung auf anderen Ger\u00e4ten wiederherstellt<\/li>\n\n\n\n<li>Weiterleitung zum Bezahlvorgang in der von BigCommerce gehosteten SaaS-Umgebung, was die PCI-Konformit\u00e4t vereinfacht, indem sichergestellt wird, dass sensible Zahlungsdaten niemals \u00fcber Ihren Headless-Shop \u00fcbertragen werden<\/li>\n\n\n\n<li>Mehrere Shop-Frontends und mehrsprachige Inhalte<\/li>\n\n\n\n<li>Integrierte Unterst\u00fctzung f\u00fcr Google Analytics<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Catalyst und Makeswift<\/h2>\n\n\n\n<p>Catalyst bietet integrierte Unterst\u00fctzung f\u00fcr Makeswift, einen modularen visuellen Editor, der Marketingfachleuten die M\u00f6glichkeit gibt, reichhaltige, hochwertige Web-Erlebnisse zu erstellen \u2013 ohne steile Lernkurven oder endlose Entwicklungszyklen. Mit Catalyst als vollst\u00e4ndig implementiertem Headless-Storefront und Makeswift als erstklassiger L\u00f6sung zur Inhaltsbearbeitung verf\u00fcgen Sie \u00fcber ein wirklich leistungsstarkes, modulares Toolkit auf Enterprise-Niveau. Sie k\u00f6nnen die integrierte Makeswift-Integration bei der Installation Ihrer Catalyst-Codebasis einbinden.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"980\" height=\"368\" src=\"https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2026\/08\/edit-in-makeswift-980x368.jpg\" alt=\"\" class=\"wp-image-17894\" srcset=\"https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2026\/08\/edit-in-makeswift-980x368.jpg 980w, https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2026\/08\/edit-in-makeswift-300x113.jpg 300w, https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2026\/08\/edit-in-makeswift-768x288.jpg 768w, https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2026\/08\/edit-in-makeswift-1000x375.jpg 1000w, https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2026\/08\/edit-in-makeswift-800x300.jpg 800w, https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2026\/08\/edit-in-makeswift.jpg 1135w\" sizes=\"auto, (max-width: 980px) 100vw, 980px\" \/><\/figure>\n\n\n\n<p>Bitte kontaktieren Sie uns unter <strong>wargis@bay20.com \/ manish@bay20.com<\/strong> oder rufen Sie uns unter <strong>+91-8800519180 \/ +91-9582784309<\/strong> an, wenn Sie Unterst\u00fctzung im Zusammenhang mit Bigcommerce ben\u00f6tigen. Sie k\u00f6nnen auch die <strong><a href=\"https:\/\/www.bay20.com\/de\/bigcommerce-entwicklungsunternehmen\/\" target=\"_blank\" rel=\"noopener\" title=\"\">Bigcommerce-Entwicklungsseite<\/a><\/strong> besuchen, um sich \u00fcber unsere Dienstleistungen zu informieren.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Catalyst ist die vollst\u00e4ndig anpassbare, modulare Shop-Oberfl\u00e4che und das Framework f\u00fcr BigCommerce. Als vollst\u00e4ndig entwickelte Shop-Oberfl\u00e4che und Toolkit, das offiziell von BigCommerce entwickelt und gepflegt wird, beschleunigt Catalyst Ihre modulare Entwicklung und erm\u00f6glicht es Ihnen, den Schritt der Erstellung einer Standard-E-Commerce-Oberfl\u00e4che zu \u00fcberspringen und direkt damit zu beginnen, diese mit individuellem Branding und eigenen Funktionen [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":17890,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[13,170,31,86],"tags":[],"class_list":["post-17889","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-bigcommerce","category-catalyst","category-ecommerce","category-pwa"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/posts\/17889","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/comments?post=17889"}],"version-history":[{"count":7,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/posts\/17889\/revisions"}],"predecessor-version":[{"id":18026,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/posts\/17889\/revisions\/18026"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/media\/17890"}],"wp:attachment":[{"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/media?parent=17889"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/categories?post=17889"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/tags?post=17889"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}