Theme-Blöcke im Theme-Editor automatisch generieren

Mithilfe von Shopify Magic kannst du künstliche Intelligenz (KI) verwenden, um in deinem Theme-Editor einen neuen Theme-Block basierend auf den von dir angegebenen Details zu generieren.

Wichtige Hinweise zum Generieren von Theme-Blöcken

Beachte die folgenden Überlegungen zum Erstellen von Theme-Blöcken:

  • KI-generierter Code ist möglicherweise nicht immer perfekt. Er kann manchmal Fehler, unerwartete Ergebnisse oder Code erzeugen, der nicht vollständig den Best Practices für Zugänglichkeit oder Leistung entspricht. Du bist für die Überprüfung, das Testen und die Sicherstellung verantwortlich, dass der generierte Block deinen Standards entspricht und korrekt funktioniert.
  • Sieh dir in der Vorschau des Theme-Editors an, wie der Block in der Desktop- und der mobilen Ansicht aussieht.
  • Wenn dein Block Anpassungseinstellungen enthält, teste sie nach dem Hinzufügen des Blocks, um sicherzustellen, dass sie wie erwartet funktionieren.
  • Nachdem du einen Theme-Block generiert hast, wird die neue Liquid-Datei für den Block dem Ordner blocks im Code deines Themes hinzugefügt.
    • Theme-Blöcke bestehen aus Liquid, der Vorlagensprache von Shopify. Theme-Block-Dateien enthalten auch HTML, CSS, JSON und JavaScript. Nachdem du einen Theme-Block generiert hast, wird die neue Liquid-Datei für den Block dem Ordner blocks im Code deines Themes hinzugefügt.
      Der Ordner „blocks“ im Theme-Code-Editor
    • Wenn du einen generierten Theme-Block durch Bearbeiten des Codes bearbeiten möchtest, kannst du deinen Theme-Code bearbeiten. Bearbeite deinen Theme-Code nur, wenn du dich mit HTML und CSS auskennst und über Grundkenntnisse in Liquid verfügst.
    • Die von Shopify Magic generierte Liquid-Datei ist eigenständig. Du kannst dein Theme weiterhin aktualisieren, wenn neue Versionen im Theme Store veröffentlicht werden.

Anspruchsvoraussetzungen für das Erstellen von Theme-Blöcken

Beachte die folgenden Voraussetzungen für das Erstellen von Theme-Blöcken.

Anforderungen an den Preisplan

Dein Shop muss einen der folgenden Preispläne haben:

  • Kostenloser Test
  • Basic
  • Growth
  • Advanced
  • Plus

Diese Funktion ist im Starter-Plan nicht verfügbar, da dieser das Spotlight-Theme verwendet und das Hinzufügen von benutzerdefinierten Theme-Abschnitten oder -Blöcken nicht unterstützt.

Theme-Kompatibilität

Die Funktion zur Generierung von Theme-Blöcken ist für alle Themes im Shopify Theme Store verfügbar. Wenn du ein kompatibles externes Theme verwendest, musst du das Theme kaufen, bevor du Theme-Blöcke generieren kannst, da die kostenlose Testversion diese Funktion nicht unterstützt.

Diese Funktion ist für Vintage-Themes nicht verfügbar. Mehr Informationen zu Funktionen für verschiedene Versionen der Theme-Architektur.

Anforderungen an Benutzerberechtigungen

Die folgenden Benutzer:innen können Blöcke in Themes erstellen:

Tipps zum Schreiben effektiver Prompts für Theme-Blöcke

Die Qualität des generierten Blocks hängt oft von der Qualität deines Prompts ab. Befolge diese Best Practices:

  • Sei präzise und aussagekräftig: Prompts sollten aus mindestens fünf Wörtern bestehen. Längere Prompts mit mehr Details liefern wahrscheinlich genauere Ergebnisse. Gib beispielsweise anstelle von Bilder und Text hinzufügen Folgendes ein: Erstelle einen Block mit einem Bild auf der linken Seite und einer Überschrift, einem Absatztext und einer Schaltfläche „Jetzt shoppen“ auf der rechten Seite. Auf Mobilgeräten stapeln.
  • Erwähne Inhaltselemente: Liste die für den Block benötigten Inhaltsarten auf, z. B. Überschriften, Absätze, Bilder, Schaltflächen, Formulare und Symbole.
  • Schlage ein Layout vor: Beschreibe die Anordnung der Elemente im Block, z. B. nebeneinander, als Raster, zentriert oder in abwechselnden Zeilen.
  • Füge Anpassungseinstellungen hinzu: Wenn der Block im Theme-Editor über bestimmte bearbeitbare Einstellungen verfügen soll, wie z. B. die Option zum Ändern von Bild, Text oder Schaltflächenlink, dann füge diese deinem Prompt hinzu. Um beispielsweise eine Einstellung zur Steuerung der Animationsgeschwindigkeit in einem Block mit einem Video aufzunehmen, gib Füge eine Einstellung zur Steuerung der Animationsgeschwindigkeit hinzu ein.
  • Iteriere mit Folgeanweisungen: Wenn das erste Ergebnis nicht ganz richtig ist, passe deinen Prompt mit mehr Details oder einer anderen Formulierung an und generiere dann erneut.

Sieh dir die folgenden Beispiele für Prompts an, die den Best Practices entsprechen:

  • Ein Testimonial-Block mit einem Kundenfoto, Zitattext, Kundennamen und einer 5-Sterne-Bewertungsanzeige.
  • Nebeneinander angeordneter Feature-Block: linke Seite mit einem Symbol und einer Überschrift, rechte Seite mit beschreibendem Text.
  • Banner in voller Breite mit einem Hintergrundbild, zentriertem großem Überschriftentext, kleinerem Unterüberschriftentext darunter und einer Call-to-Action-Schaltfläche.

Einen Theme-Block generieren

Nachdem du einen Block generiert und dich entschieden hast, ihn zu behalten, wird der neue Block zur Blockauswahl hinzugefügt. Du kannst den Block zu kompatiblen Abschnitten hinzufügen, die Theme-Blöcke akzeptieren.

Schritte:

  1. Gehe in deinem Shopify-Adminbereich zu Onlineshop > Themes.

  2. Suche das Theme, das du bearbeiten möchtest, und klicke auf Theme bearbeiten.

  3. Passe deine Startseite an oder tippe auf das Dropdown-Menü Startseite und wähle dann die Vorlage aus, der du einen Abschnitt hinzufügen möchtest.

  4. Klicke auf den Abschnitt, für den du einen Block erstellen möchtest.

  5. Klicke auf Block hinzufügen.

  6. Klicke auf Erstellen.

  7. Gib eine Beschreibung des Blocks ein, den du erstellen möchtest.

  8. Klicke auf Erstellen. Shopify Magic verarbeitet deine Anfrage und erstellt den Code.

  9. Sieh dir den generierten Block direkt im Theme-Editor in der Vorschau an. Wenn Anpassungseinstellungen generiert wurden, kannst du deinen Block anpassen.

  10. Wenn du mit dem generierten Block zufrieden bist, klicke auf Beibehalten. Andernfalls kannst du den Block verwerfen oder Folgeanweisungen geben.

Einen generierten Theme-Block aus deinem Theme löschen

Nachdem du einen Theme-Block generiert hast, wird die neue Liquid-Datei für den Block zum Ordner blocks im Code deines Themes hinzugefügt. Wenn ein generierter Theme-Block in deinem Shop Probleme verursacht, kannst du ihn löschen, indem du die Liquid-Datei aus deinem Theme-Code löschst.

Schritte:

  1. Gehe in deinem Shopify-Adminbereich zu Onlineshop > Themes.

  2. Klicke neben dem Theme, das du bearbeiten möchtest, auf Theme bearbeiten.

  3. Passe deine Startseite an oder tippe auf das Dropdown-Menü Startseite und wähle dann die Vorlage aus, der du einen Abschnitt hinzufügen möchtest.

  4. Klicke auf einen Abschnitt, der den Block enthält, den du löschen möchtest. Wenn du zuvor alle Instanzen des Blocks entfernt hast, klicke auf Block hinzufügen, um den Block aus der Blockauswahl erneut hinzuzufügen.

  5. Klicke in den Einstellungen des Blocks auf Horizontales Menü > Code Code bearbeiten.

  6. Klicke im Seitenleistenmenü auf den Ordner blocks, um ihn zu erweitern, und suche dann nach der entsprechenden Blockdatei. Der Name der Datei stimmt mit dem des aktuell geöffneten Blocks überein und endet auf .liquid.

    Der Theme-Code-Editor, der den Ordner „blocks“ und eine geöffnete Theme-Block-Datei anzeigt, die gelöscht werden soll

  7. Klicke im Seitenleistenmenü neben der Blockdatei auf das Symbol Löschen.

  8. Klicke im Dialogfeld zur Bestätigung auf Datei löschen.