Online-Shop mit Lovable & Shopify erstellen - ganz ohne Programmierkenntnisse

Hi und herzlich willkommen zu diesem Snip. Ja, heute geht es um ein spannendes Thema, das sicherlich für viele Jungunternehmer und Start-ups interessant sein dürfte: Es geht um Online-Shops, und zwar um einen Online-Shop aufbauen völlig ohne Programmierkenntnisse mit KI. Klingt verrückt, aber Lovable macht's möglich. Und jetzt wird's noch besser: Mit der neuen Shopify-Integration von Lovable baust du dir in Minuten deinen eigenen E-Commerce-Store. Was dich erwartet: Erstens, du beschreibst deinen Shop in natürlicher Sprache. Die KI übernimmt dann das Design, die Produktseiten und zum Beispiel auch den Checkout. Zweitens, du hast die volle Shopify-Power. Shopify ist für mich nach wie vor das beste Online-Shop-Tool auf dem Markt, vor allem auch mit dem bestgetesteten Checkout. Gibt's natürlich auch noch viele weitere Anbieter, aber Shopify hat sich auch für mich in der Praxis bewährt. Das heißt, du hast Zahlungsabwicklung, Versand, Produktverwaltung alles wie gehabt mit dabei. Drittens, du hast die Anpassungen in Echtzeit. Das heißt, du siehst sofort das Ergebnis und kannst jederzeit Änderungen vornehmen, ohne dass du jetzt dafür einen Programmierer benötigst. Und zum Schluss kannst du den fertigen Shop direkt in Lovable claimen. Das heißt, mit nur einem Klick übernimmst du ihn in deinen Shopify-Account hinein, verknüpfst noch deine Domain und kannst direkt live gehen. Keine Vorkenntnisse nötig. Ich zeige dir jetzt, wie es funktioniert. Viel Spaß beim Snip! Und dann starten wir auch schon direkt hinein. Um zu starten, gehen wir einfach mal auf die Website lovable.dev/shopify und kommen dann auf diesen Startbildschirm. Vorher könnt ihr euch natürlich mit eurem Google-Account beispielsweise einloggen. Ich würde, um diese Shopify-Integration entsprechend testen zu können, euch auf jeden Fall den Pro-Plan für zumindest einen Monat empfehlen. Der kostet 25 $. Ihr könnt es natürlich auch in der kostenfreien Variante ausprobieren. Das reicht mal aus, um ja, einen kleinen Store, ein Theme zu erstellen. Aber wenn ihr dann ein paar Änderungen vornehmen möchtet, dann reichen die Credits hier leider nicht aus. Deswegen schließt gerne den Plan für einen Monat mal ab und probiert für euch aus, wie es funktioniert. Ihr seht hier dann ein kleines Intro-Video, da gehen wir jetzt schnell drüber, und dann hier noch mal die Features der Integration. Also ihr bekommt, wie vorher schon gesagt, alle Shopify-Funktionen mitgeliefert und ihr könnt den Shop oder auch dann die Änderungen ganz einfach in natürlicher Sprache vornehmen. Und das Wichtigste: dass ihr eben direkt, wenn ihr damit, mit dem Design, mit den Produkten soweit happy seid, direkt den Shop in Shopify reinpushen und damit direkt starten könnt. Und damit starten wir auch schon mit unserem ersten Shop. Es ist wirklich so einfach wie vorhin beschrieben: Wir geben hier mit einem einfachen Prompt in unserer natürlichen Sprache das ein, was wir haben möchten. In diesem Beispiel: 'Ich benötige einen Online-Shop für Skateboards und Skatermode. Bitte ein modernes, cleanes, jedoch auch auffälliges Design verwenden, das zum Thema passt. Für die Hero-Section' – also das ist die Section zu Beginn des Shops, da mit dem emotionalen Bild oder sind auch oft solche Slider, die ihr dann kennt – 'für die Hero-Section bitte drei emotionale Bilder verwenden und diese direkt auch miterstellen. Auf der Startseite drei relevante Produktkategorien anzeigen und Produkte beziehungsweise Mock-ups als Platzhalter hinzufügen.' Also ich möchte dann auch gleich, dass mir Produkte angezeigt werden. 'Für diese Produktseite jeweils vier Produktbilder hinzufügen und diese beispielhaft erstellen sowie eine Auswahlmöglichkeit zur Farbe und Größe der Decks und Kleidung hinzufügen.' Und was wir jetzt machen: Wir klicken hier auf Start. Wir hätten hier jetzt aber auch zum Beispiel die Möglichkeit, direkt eigene Produktbilder hinzuzufügen. Das kann ich euch gleich auch noch mal zeigen, wie das dann funktioniert. So hättet ihr dann direkt eure Produkte im Shop. Aber wir starten jetzt einfach mal mit dem Grunddesign und klicken hier drauf. Dann legt Lovable los. Wir erhalten dann nach wenigen Momenten unsere erste Version hier rechts im Bildschirm angezeigt. Hier wichtig der Hinweis, dass ich dann direkt zu Beginn, wenn ich meinen ersten Prompt abschicke, hier die Möglichkeit habe, meinen Shopify-Account zu verbinden. Es besteht auch momentan die Aktion zwischen Lovable und Shopify, Shopify 30 Tage kostenlos zu testen. Bietet sich natürlich dann in diesem Zusammenhang an. Ich habe es jetzt hier in dem Fall abgelehnt, weil ich nicht wollte, dass mein Account hier direkt verwendet wird. Aber hier kann ich das dann ganz einfach aktivieren und habe dann auch immer die Möglichkeit, direkt mein erstelltes Design direkt in Shopify zu verwenden. Ich führe euch jetzt anhand des Beispiels des Skatershops einmal komplett hier durch. Wir haben jetzt hier unseren ersten Entwurf, der schon mal ganz okay aussieht. Wir haben hier beispielsweise noch einen kleinen, ja, ich nenne ihn mal Farbfehler. Hier sollte natürlich die Kollektion auch immer erkennbar sein. Aber hier wurden dann jetzt schon mal verschiedene Kategorien erstellt: hier komplette Skateboards, einmal die Decks, das heißt das Oberteil des Skateboards, einmal nur die Rollen und unten dann auch noch die Mode. Es wurden dann auch schon mal beispielhaft Bilder hinzugefügt. Es kommt hin und wieder vor, dass gewisse Sachen noch nicht perfekt sind, zum Beispiel hier würde mich jetzt stören: Die Beschriftung ist hier jetzt nicht einheitlich auf gleicher Höhe, auch hier die Abstände zwischen Preis und Warenkorb-Button. Das können wir aber gleich noch ändern. Ich gehe jetzt einfach mal hier dann beispielsweise weiter zur nächsten Version. Also wenn ihr hier nach unten scrollt, dann könnt ihr die einzelnen Versionen durchgehen. Hier in dieser Version wurde jetzt der Fehler mit der Farbe schon behoben. Ich kann dann auch direkt beispielsweise auf die Produktseite hier schon gehen. Was wir hier auch noch hinzugefügt haben, war dann ein Menü, wo ich direkt durchgehen kann. Das war in der ersten Version auch noch nicht vorhanden. Und so habe ich jetzt nach und nach den Shop optimiert. Also ich habe hier die Auswahlmöglichkeit, ich könnte jetzt hier auch noch zum Beispiel eine Farbwahl oder zum Beispiel dann auch eine Größenwahl hinzufügen. Ich kann das dann direkt, wenn ich jetzt hier noch welche hinzufüge, direkt in den Warenkorb packen. Der ist dann auch direkt funktional schon. Also ich kann dann hier draufgehen, ich könnte dann hier dann bis zur Kasse durchgehen. Natürlich die komplette Funktionalität erhalte ich dann erst, wenn ich ja, ich sag mal, den Shop in Shopify direkt ausführe, also gerade dann das Hinzufügen noch der Zahlungsanbieter etc. Und ja, das ist einfach mal jetzt hier ein kleines Beispiel. Wir haben jetzt hier zwar noch bei den Beispielbildern ein paar Fehler drin, aber dadurch, dass ich dann meine eigenen Produkte verwenden werde, ist es schon ein richtig guter Aufschlag. Und so kann ich nach und nach eben den kompletten Shop erstellen. Es ist ein bisschen Spielerei manchmal, bis es dann halt alles passt, wie man's haben möchte. Aber gerade auch für Laien, die sich jetzt nicht viel mit Programmierung auseinandersetzen möchten und trotzdem zu einem guten Ergebnis kommen möchten, eine super Möglichkeit aus meiner Sicht. Ja, als kleines Zwischenfazit lässt sich durchaus festhalten, dass mir die Shopify-Integration in Lovable die Arbeit abnimmt, was in der Vergangenheit am meisten Zeit gekostet hat: und das ist die Designfindung des Shops. Gerade zum Anfang, wenn man seinen ersten Shop erstellt, wechselt man ständig das Theme, das heißt das komplette Design, bis man dann soweit ist, dass man komplett happy ist. Dann denkt man wieder: 'Ah ja, die Produktbeschreibung sieht in dem Theme besser aus', dann wechselt man wieder komplett. Und das kostet tatsächlich und gerade am Anfang Stunden. Und das kann ich mir tatsächlich ersparen, indem ich hier sozusagen auf Knopfdruck Designs mit meinen Produkten integriert erhalte und so mir wirklich deutlich an Zeit sparen kann. Zur Wahrheit gehört aber eben auch, dass ich in Shopify dann noch einige manuelle Arbeiten vornehmen muss, und dafür habe ich hier eine kleine Checkliste erstellt. Das sieht jetzt nach verdammt viel aus, ist aber gar nicht so schlimm. Wir gehen's einfach mal ganz kurz durch: Wir müssen natürlich auch zunächst einen Shopify-Account erstellen und einen Plan auswählen. Nutzt gern die 30 Tage Testzeitraum, die ihr in Verbindung mit Lovable momentan bekommt. Dann als Erstes müsst ihr eine Zahlungsmethode hinterlegen, also zunächst mal, dass ihr euer Abo bezahlen könnt, dann natürlich die Zahlungen für eure Kunden einrichten. Hier bietet sich dann natürlich Shopify Payments oder dann einzelne Zahlungsanbieter wie Klarna, wie PayPal, wie Stripe zum Beispiel an. Natürlich müsst ihr dann die ganzen Zahlungsmethoden auch entsprechend konfigurieren und mit Leben füllen, dass sie nicht ins Leere laufen. Dann könnt ihr tatsächlich schon an das Store-Setup gehen. Das heißt, ihr könnt euren Store von Lovable claimen per Knopfdruck. Könnt dann noch mal – also was ihr auf jeden Fall machen solltet – noch mal über die Produkttexte drübergehen, vielleicht auch schon Richtung SEO-Optimierung hier. Dann natürlich im Hintergrund im Backend eure Produkte connecten. Wenn ihr zum Beispiel Dropshipping machen wollt, wovon ich euch abrate, dann müsst ihr die einzelnen Produkte vom Lieferanten connecten, ansonsten natürlich euer Inventar-Setup machen, das heißt Bestände pflegen etc., und dann noch mal die rechtlichen Seiten ergänzen. Wir haben vorher gesehen, unten das Impressum. Die rechtlichen Seiten muss ich in Shopify tatsächlich über die Funktion 'Seiten' dann mit Leben füllen. Und natürlich muss ich dann auch noch Optionen zum Versand festlegen und natürlich auch steuerliche Themen beachten, berücksichtigen, wie zum Beispiel: Ich kann dann Versandzonen und Versandpreise, -kosten dann natürlich festlegen und natürlich auch meine Finanzdienstleister bestimmen. Wenn ich das alles gemacht habe, kann ich meine Domain verknüpfen. Das heißt, ich muss mir eine Adresse zulegen, auswählen, das kann ich aber auch direkt in Shopify machen. Ihr testet das Ganze noch mal durch, am besten dann auch mit einer richtigen Testbestellung, und dann könnt ihr meines Erachtens auch live gehen. Das hier sind jetzt noch optionale Punkte, die ich euch empfehlen würde: Also gerade Review-Apps sind unverzichtbar, auch vielleicht eine Subscription-App, wenn ihr Abomodelle anbieten solltet, und natürlich auch entsprechende E-Mail-Workflows, auch zum Beispiel wenn ein Kunde Ware im Warenkorb hat, dass der dann nach einem Tag, nach zwei Tagen, nach drei Tagen noch mal daran erinnert wird und ihr so versucht, den Kunden wieder zurückzuholen und zum Kaufen zu bewegen. Was natürlich auch ganz wichtig ist, wenn ihr Performance-Marketing macht, das heißt Anzeigen auf eure Produkte in Social Media schaltet: Solltet ihr das Tracking noch integrieren, das heißt eure Pixel von Meta, von TikTok beispielsweise integrieren. Und ja, dann könnt ihr natürlich auch generell noch die Performance eures Shops verbessern: Bilder komprimieren ist sehr wichtig, die Geschwindigkeit eurer Seite ist entscheidend, ob ein Kunde kauft oder nicht, und das geht dann alles über ganz viel A/B-Testing. Also wie gesagt, die ersten fünf Steps hier sind aus meiner Sicht unverzichtbar. Realistische Sicht für die ganzen Schritte würde ich mal sagen: ein bis zwei Stunden, dann kann man sowas schon schaffen. Klar, man sucht am Anfang immer ein bisschen die Einstellungen, bis man sich zurechtfindet. Aber wie gesagt, die Lovable-Integration nimmt mir halt schon sehr viel Zeit bei der Designfindung ab und kann mir hier wirklich grundlegend Zeit einsparen und dabei helfen, schneller an den Markt zu kommen. Dann noch eine weitere Möglichkeit, wie ich die Shopify-Integration von Lovable verwenden kann, ist, dass ich auf bestehende Templates zurückgreifen kann, die ich in Lovable auswählen kann. Wenn ich jetzt sage, dieses Design gefällt mir besonders gut, was mache ich dann? Ich nehme einfach Bilder von meinem Produkt, lade die hier eher unten im Chatfenster hoch und habe dies dann hier integriert. Das wurde dann hier separat erstellt, dieses kleine Video. Ein bisschen Aufwand muss ich hier schon noch reinstecken, aber insgesamt habe ich dann in wenigen Momenten einen fertigen Shop in einem sehr attraktiven Design, wie ich finde. Wir haben hier noch mal ein weiteres Beispiel. Also wenn ich sag, dieses Shopdesign sagt mir sehr gut zu, dann kann ich natürlich auch direkt zugreifen. Ich kann dann auch hier in der Vorschau immer schon die Produktseiten noch mal ansehen, beispielsweise hier auch die Möglichkeit, verschiedenste Varianten zu listen. Auch insgesamt die Qualität der Produktseiten, also nicht nur der Startseite, sondern insgesamt auch das Footer-Menü sehr gut, sehr strukturiert aufgebaut, ohne große Fehler. Also wie gesagt, es sind dann oft Details, die dann noch nicht passen, aber die ich zu 99 % über Eingabe mit natürlicher Sprache im Chatfenster beheben kann. Aber es ist eben hier dann die Pro-Version vonnöten, damit ich eben die Anpassungen vornehmen kann. Ansonsten, mit dem kostenlosen Plan, werde ich das leider so nicht schaffen, deswegen hier gleich noch mal der Hinweis. Und dann zum Ende des Snips noch ein Shop im Vollbildmodus, damit ihr insgesamt noch mal einen Eindruck von der Qualität bekommt. Das ist jetzt hier noch mal ein Template aus Lovable, das ihr aber auch direkt so verwenden könnt, also hier dann einfach eure Produkte mit reinladen. Sehr minimalistisch, aber auch sehr clean, das gefällt mir sehr gut insgesamt. Wir haben hier einmal Kategorieauswahl Männer, Frau und dann die einzelnen Mode-Kategorien. Wenn ich hier dann draufgehe, komme ich zu den Übersichtsseiten noch mal, kann dann hier noch mal konkret auswählen, in welche Richtung, also Oberteile oder Hosen, es gehen soll. Dann drücken wir einmal hier drauf, und dann habe ich hier auch sehr schön und übersichtlich meine Größenauswahl. Ich habe mehrere Ansichtsbilder, die ich hier einstellen kann, und kann das dann entsprechend in den Einkaufskorb legen. Hier unten dann habe ich noch weitere Produktempfehlungen. Die passen jetzt hier natürlich nicht für Mann, aber die Logiken kann ich dann auch innerhalb Shopify festlegen. Ja, in diesem Snip hast du gelernt, wie du mit Text-Prompting einen eigenen Online-Shop an den Start bekommen kannst. Das heißt, die Shopify-Integration in Lovable ist für mich aus meiner Sicht sehr gelungen. Die ersten Versuche haben direkt geklappt. Ich habe hier die Möglichkeiten, auch individuelle Anpassungen vorzunehmen, ich kann meine eigenen Produkte direkt in den Store reinsetzen lassen mit meinen Produktbeschreibungen, mir werden die Kategorien nach Wunsch angepasst, wofür ich in der Vergangenheit dann eben Shopify-Kenntnisse gebraucht hätte oder, wenn ich dann noch weiter in die Individualisierung wollte, dann eben auch ein Entwicklungsteam, was dann auch entsprechend Kosten zur Folge gehabt hätte. Wir müssen davon ausgehen, dass die Qualität und die Bedienbarkeit noch besser, noch einfacher werden, und für mich war diese Integration auf jeden Fall ein großer Wurf, vielleicht sogar größer, wie man im ersten Moment denkt, und kann es euch durchaus ans Herz legen und empfehlen. Und ich wünsche euch viel Spaß beim Ausprobieren.