Jetzt loslegen
KI-Website-Builder

Der KI-Website-Builder,
mit dem du einfach redest.

Sag Buddy, der KI in deinem Shop, was du willst. Buddy schreibt die Seite live im Canvas, passend zu deiner Marke, während du zusiehst. Danach übernimmst du bei Bedarf selbst jedes Element, bis zur CSS-Regel, ohne den Editor zu verlassen.

Jetzt loslegenPreise ansehen

Buddy baut einen Shop live im Canvas, vom ersten Prompt bis zum Klick auf Publish.

Erste Schritte

Zwei Wege zum Start.
Beide ganz ohne Entwickler.

Mit KI geht es schneller: Beschreib den Shop, den du dir vorstellst, und Buddy baut den ganzen Shop, samt Branding, Seiten und Produkten. Ein Theme bringt dir denselben Editor und denselben Buddy, nur mit bereits festgelegtem Layout.

Build with AI Empfohlen

Sag uns, was du verkaufst, und Orderain baut den ganzen Shop für dich: Branding, Seiten und Produkte.

Start with a theme 51+ Themes

Such dir ein Design aus, das dir gefällt, und mach es im selben Builder zu deinem.

Der Bildschirm zum Anlegen eines neuen Shops: Build with AI mit dem Button „Create shop“, daneben Start with a theme mit einer Wand aus 51 Theme-Vorschauen
Die erste Entscheidung, wenn du einen Shop anlegst.
Der Arbeitsbereich

Deine Storefront, live
mitten im Editor.

Das Canvas zeigt deinen echten Shop. Sieben Bereiche auf der linken Seite erledigen alles andere, und Buddy ist einer davon, geöffnet direkt neben dem Shop, den er gerade bearbeitet.

Der Orderain Builder: die Werkzeugleiste mit Geräteumschalter, Zoom und Publish, die Bereichsleiste links, eine Vinyl-Storefront live im Canvas und darüber schwebend Buddys Dock
  1. PagesAlle Seiten des Shops. Seite hinzufügen, generieren lassen oder suchen.
  2. LayersDie Seite als Baum aus Elementen. Auswählen, neu anordnen, duplizieren, löschen.
  3. LayoutsFertige Navbars und Footer, oder du lässt dir einen eigenen generieren.
  4. BlocksDynamische, statische und Element-Bausteine zum Ablegen auf der Seite.
  5. SettingsThemes, Shop-Infos, SEO, Cache, eigenes CSS und KI-Optionen.
  6. Version historyJedes Speichern als Version, mit Angabe, wer gespeichert hat, und einem Weg zurück.
  7. AI BuddyBeschreib eine Änderung und Buddy setzt sie im ganzen Shop um.
Mit Buddy reden

Ein Satz rein.
Eine fertige Seite raus.

Kein Formular zum Ausfüllen, kein Editor, auf den du umsteigen musst. Du bleibst in einem Chat, und Buddy, der KI-Assistent in deinem Shop, übernimmt das Bauen.

Buddys Dock über dem Shop: der Prompt „create a contact page“, Buddy beschreibt Hero, Formular und Öffnungszeiten, die er gleich baut, dazu der Status „Generating page“
Schritt 1Frag einfach im ChatSchreib, was du willst, etwa „create a contact page“, und Buddy sagt dir, was er bauen wird, bevor er loslegt.
Das abgedunkelte Canvas hinter dem Dialog „Generating your style“, in dem die CSS-Variablen der Marke geschrieben werden
Schritt 2Sieh zu, wie die Seite entstehtLayout, Texte und Styling werden passend zu deiner Marke generiert, bis hin zum CSS, das Buddy schreibt, während du zusiehst.
Buddy bestätigt, dass die Seite generiert und das Bild im Formular aktualisiert ist, daneben Keep it und Undo
Schritt 3Behalten oder weiterredenSeite generiert. Verfeinere sie im selben Chat, etwa mit „use the ember jar photo in the form section“, und jede Änderung bietet dir Keep it oder Undo an.

Zwei Prompts. Mehr brauchte es nicht. Das Dock behält den Gesprächsverlauf, deshalb baut die zweite Anweisung auf der Seite auf, die die erste erstellt hat, statt von vorn anzufangen. Und nichts wird hinter deinem Rücken übernommen: Neben jeder Änderung stehen Keep it und Undo zur Wahl.

Manuelle Kontrolle

KI ist der schnelle Weg,
nicht der einzige.

Jede generierte Seite bleibt voll bearbeitbar. Nichts wird in ein Format exportiert, das du nicht öffnen kannst.

Der Bereich Layers zeigt eine Seite als durchsuchbaren Baum aus Elementen
Der Layer-BaumSeitenstruktur und Sichtbarkeit in einer Liste. Durchsuche sie, klapp den ganzen Baum auf oder zu und erreiche Elemente, die im Canvas schwer anzuklicken sind.
Das Eigenschaften-Panel eines Elements mit den Tabs Controls und Inspector, der Leiste Ask Buddy, Klassen-Pills und einer CSS-Regel
Element-EigenschaftenDie Tabs Controls und Inspector, die Leiste Ask Buddy und ein Editor für CSS-Regeln, der jedes Element mit derselben Klasse ändert.
Der Editor Edit Navbar Code mit HTML und CSS und dem Button Apply Changes
Der Code, von HandÖffne das HTML und CSS hinter einer generierten Navbar oder einem Footer, bearbeite es und übernimm die Änderungen.
Entwürfe und Verlauf

Nichts geht live,
bis du es sagst.

Die Publish-Steuerung: unveröffentlichte Änderungen mit der Uhrzeit der letzten Speicherung, die eigene Domain und die Subdomain auf orderain.com, beide als live markiert, und ein einziger Publish-Button
Preview
Sieh dir den Shop genau so an, wie Besucher ihn sehen, ohne etwas zu speichern oder zu veröffentlichen.
Save
Sichere deine Arbeit als Entwurf und mach später weiter. Jedes Speichern bleibt außerdem als Version erhalten, zu der du zurückkehren kannst, und Besucher sehen weiterhin die zuletzt veröffentlichte Version.
Publish
Damit landen deine Änderungen bei den Kunden. Bis du draufklickst, zeigt der Button einen Punkt für unveröffentlichte Änderungen und wann du zuletzt gespeichert hast.
Beide Adressen gleichzeitig
Beim Veröffentlichen gehen die Änderungen gleichzeitig auf deine eigene Domain und deine Subdomain auf orderain.com, beide im selben Bereich als live angezeigt.
Version history: jedes Speichern aufgelistet, mit Angabe, wer gespeichert hat und was sich geändert hat, die Version im Editor als Editing markiert, die veröffentlichte als Live und eine benannte Version mit Stern

Und falls du zurück willst

Jedes Speichern wird zu einer Version, jeweils mit dem Namen dessen, der gespeichert hat: du, dein Team oder Buddy. Öffne eine Version, um zu sehen, was die Wiederherstellung ändern würde, und kehr dann mit einem Klick zurück. Die Version im Editor ist als Editing markiert, die Version, die Kunden sehen, als Live, und mit einem Branch probierst du einen neuen Look aus, während der Shop bleibt, wie er ist. So funktioniert der Versionsverlauf.

Seiten und SEO

Jede Seite eingerichtet
und suchmaschinenfit, schon beim Bauen.

Die drei Bereiche, die du beim Anlegen einer Seite ausfüllst. Nichts davon ist spätere Aufräumarbeit, und die shopweiten Gegenstücke findest du in den Shop-Einstellungen.

Der Bereich General: Seitenname Home, Seiten-URL /home, Required auth aus und Make landing an
GeneralEin Seitenname, eine URL, die du selbst festlegst, statt sie hinzunehmen, und Schalter für Zugriff nur nach Anmeldung und dafür, welche Seite die Landingpage ist.
Der Bereich SEO mit Seitentitel, Beschreibung und Keywords, ausgefüllt für den Shop Ember
SEOTitel, Beschreibung und Keywords der Seite, direkt beim Anlegen geschrieben statt später mühsam nachgetragen.
Die Liste der Systemseiten: Home, Products, Product details und Collections, jeweils mit Route, von neun mitgelieferten Seiten
System pagesNeun Seiten sind von Anfang an fertig eingerichtet und verknüpft: Home, Products, Product Details, Collections und der Rest der Storefront.

Neben diesen Systemseiten bekommst du eigene Seiten, die du nach Belieben anlegst, umbenennst und löschst, und gehostete Seiten, die Orderain mit deinem Branding für dich ausliefert.

  • Sitemap und robots.txt für jeden Shop automatisch erstellt
  • Serverseitig gerendert, damit Crawler echtes HTML bekommen
  • Titel, Beschreibung und Keywords pro Seite
  • Bearbeitbarer URL-Slug auf jeder Seite
  • Schalter für Anmeldepflicht und Landingpage pro Seite

Lieber die ausführliche Version?
Spring zu einem Kapitel.

Fragen

Was viele fragen,
bevor sie loslegen.

Muss ich programmieren können, um die Website zu bauen?

Nein. Du beschreibst die Seite, die du willst, und sie wird live im Canvas generiert, passend zu deiner Marke, ohne Entwickler. Code gibt es, wenn du ihn willst: Du kannst das HTML und CSS hinter einer generierten Navbar oder einem Footer öffnen und direkt bearbeiten. Das ist eine Option, kein Schritt, durch den du durchmusst.

Kann ich bearbeiten, was die KI generiert, oder muss ich damit leben?

Jede generierte Seite bleibt voll bearbeitbar. Der Layer-Baum zeigt dir die Seite als Liste von Elementen, die du auswählen, neu anordnen, duplizieren und löschen kannst, das Eigenschaften-Panel bearbeitet jedes Element, und der Editor für CSS-Regeln ändert alle Elemente mit derselben Klasse auf einmal. Nichts wird in ein Format exportiert, das du nicht öffnen kannst.

Geht beim Bearbeiten irgendetwas automatisch live?

Nur zwei Dinge, beide mit Absicht: der Wechsel zu einem neuen Theme, den du mit Undo zurücknehmen kannst, und Änderungen an deinem Logo oder deinen Markenfarben. Alles andere wartet auf Publish. Preview zeigt den Shop so, wie Besucher ihn sehen, ohne zu speichern, und Save sichert deine Arbeit als Entwurf, während Besucher weiterhin die zuletzt veröffentlichte Version sehen. Bis du veröffentlichst, zeigt der Button einen Punkt für unveröffentlichte Änderungen und wann du zuletzt gespeichert hast.

Was passiert, wenn die KI eine Seite falsch baut?

Neben jeder Änderung von Buddy stehen Keep it und Undo, es wird also nichts hinter deinem Rücken übernommen. Außerdem bleibt jedes Speichern im Versionsverlauf erhalten, auch die von Buddy. So siehst du, was eine frühere Version ändern würde, und kehrst mit einem Klick zu ihr zurück.

Sind die gebauten Seiten gut für SEO?

Storefronts werden serverseitig gerendert, Crawler bekommen also echtes HTML statt einer leeren Hülle, die sie erst per JavaScript rendern müssen, um sie zu lesen. Jede Seite hat einen eigenen Titel, eigene Beschreibung, Keywords und einen bearbeitbaren URL-Slug, ausgefüllt beim Anlegen statt später nachgetragen, und für jeden Shop werden eine Sitemap und eine robots.txt erstellt.

Kann ich auf meiner eigenen Domain veröffentlichen?

Ja. Beim Veröffentlichen gehen die Änderungen gleichzeitig auf deine eigene Domain und deine Subdomain auf orderain.com, und beide werden im selben Bereich als live angezeigt, damit du siehst, was wo gelandet ist.

Soll ich mit KI oder mit einem Theme starten?

Beides geht, und beides führt dich in denselben Editor mit demselben Buddy. Mit KI geht es schneller: Beschreib den Shop, und Branding, Seiten und Produkte werden für dich gebaut. Mit einem Theme startest du mit einem von mindestens 51 Designs mit festgelegtem Layout und passt es dann genauso an.

Ist der Builder in jedem Tarif enthalten?

Ja. Der Builder, Buddy und alle Bausteine sind in jedem Tarif enthalten, ab 5 $ im Monat, und bei allen nimmt Orderain 0 % von deinen Umsätzen.

Beschreib den Shop, den du willst.
Und veröffentliche ihn noch heute.

Der Builder, Buddy und alle Bausteine sind in jedem Tarif enthalten, ab 5 $/Monat. Immer 0 % Plattformgebühren.

Jetzt loslegenPreise ansehen