Abschnitte und Blöcke

Du kannst Abschnitte in deinem Theme verwenden, um das gewünschte Layout für deinen Onlineshop zu erstellen. Abschnitte bestehen aus verschiedenen Arten von Blöcken, von denen jeder eine bestimmte Funktion hat, z. B. Text, Schaltflächen, einzelne Bilder, eine Bildcollage oder Links.

Abschnitte und Blöcke bieten Flexibilität bei der Anordnung deiner Inhalte und ermöglichen es dir, den Stil und das Erscheinungsbild deines Onlineshops zu steuern, ohne Code bearbeiten zu müssen. Dazu gehören die folgenden Anpassungsoptionen:

• Du kannst Abschnitte in deinen Vorlagen und Blöcke innerhalb von Abschnitten neu anordnen.
• Abschnitte und Blöcke können bestimmte Anpassungseinstellungen haben.
• Du kannst kompatible Abschnitte und Blöcke verbinden, um dynamische Informationen aus benutzerdefinierten Daten in deinem Onlineshop anzuzeigen, wie z. B. das Hinzufügen von Pflegehinweisen für deine Produkte. Erfahre mehr über das Verbinden von dynamischen Quellen.

Die im Theme-Editor verfügbaren Abschnitte und Blöcke hängen von deinem Theme und deiner Theme-Version ab. Dein Theme könnte zum Beispiel einen Slide-Block haben, den du nur zu einem Slideshow-Abschnitt hinzufügen kannst, und einen Überschrift-Textblock, den du zu allen Abschnitten deines Themes hinzufügen kannst. Weitere Informationen zu den dir zur Verfügung stehenden Optionen findest du in der Dokumentation deines Themes.

Maximale Anzahl für Abschnitte und Blöcke

Für Abschnitte und Blöcke gelten die folgenden Beschränkungen:

• Jede Vorlage kann bis zu 25 Abschnitte haben.
• Jede Vorlage kann über alle Abschnitte verteilt bis zu 1.250 Blöcke enthalten. Die genaue Anzahl der Blöcke und die Anzahl der einzelnen Blocktypen, die du zu jedem Abschnitt hinzufügen kannst, hängen von den Abschnitts- und Blockquellen ab und werden von den Theme-Designer:innen für dein Theme festgelegt. Wenn dein Theme beispielsweise einen Abschnitt zur E-Mail-Anmeldung hat, kannst du möglicherweise nur einen E-Mail-Formular-Block hinzufügen.
• Blöcke, die eine Verschachtelung unterstützen, können bis zu acht Ebenen verschachtelter Blöcke haben.

Blockquellen

Je nach Struktur deines Themes und den von dir installierten Apps kann dein Theme eine Vielzahl von Abschnitten enthalten, die Blöcke aus verschiedenen Quellen akzeptieren. Wenn du einen Block zu einem Abschnitt hinzufügst, werden alle für diesen Abschnitt verfügbaren Blöcke in der Blockauswahl angezeigt. Je nach Theme und Theme-Version kannst du die folgenden Arten von Blöcken zu den Abschnitten in deinem Theme hinzufügen:

• App-Blöcke sind Blöcke, die deinem Theme Funktionalität hinzufügen. Du kannst einen App-Block verwenden, um Bereiche deines Themes, die von deinen installierten Apps hinzugefügt wurden, an einer bestimmten Stelle auf einer Seite deines Themes neu zu positionieren.
• Abschnittsblöcke sind Blöcke, die innerhalb eines bestimmten Abschnitts definiert sind.
• Theme-Blöcke sind Blöcke, die innerhalb deines Themes definiert sind und eine dynamische Funktionalität wie z. B. eine Verschachtelung aufweisen können.

Dein Theme kann einige Abschnitte enthalten, die Abschnittsblöcke verwenden, und andere Abschnitte, die Theme-Blöcke verwenden. Ein einzelner Abschnitt kann entweder Theme-Blöcke oder Abschnittsblöcke akzeptieren, aber keine Mischung aus beiden.

Die Verfügbarkeit von App-Blöcken innerhalb von Abschnitten hängt von der Funktionalität der App ab und davon, ob der Abschnitt App-Blöcke akzeptieren kann.

Abschnittsblöcke

Abschnittsblöcke sind Blöcke, die für einen bestimmten Abschnitt konzipiert sind. Ein Abschnitt kann Beschränkungen für die Typen von Abschnittsblöcken haben und die Anzahl eines bestimmten Blocktyps, den du hinzufügen kannst, begrenzen.

Beispiel für einen Abschnitt mit Abschnittsblöcken

Dein Theme hat beispielsweise einen Abschnitt zur E-Mail-Anmeldung. Du kannst diesen Abschnitt verwenden, um ein Formular zur Newsletter-Anmeldung hinzuzufügen, damit Kund:innen deinen Newsletter abonnieren können. Nachdem du den Abschnitt zur E-Mail-Anmeldung hinzugefügt hast, kannst du jeweils einen der folgenden Blöcke hinzufügen:

• einen E-Mail-Formular-Block
• einen Überschrift-Block
• einen Unterüberschrift-Block

Wenn du den E-Mail-Formular-Block hinzufügst und auf Block hinzufügen klickst, um einen weiteren Block hinzuzufügen, wird der E-Mail-Formular-Block nicht mehr als Option in der Blockauswahl angezeigt. Diese Einschränkung hilft dabei, Probleme bei der Erfassung der E-Mail-Adresse der Kund:innen zu vermeiden und stellt sicher, dass die Kund:innen ihre E-Mail-Adresse einfach eingeben können.

Wenn du alle drei verfügbaren Blöcke für den Abschnitt zur E-Mail-Anmeldung hinzugefügt hast, wird in der Blockauswahl eine Meldung angezeigt, dass alle verfügbaren Blöcke verwendet wurden.

Theme-Blöcke

Theme-Blöcke sind Blöcke, die innerhalb deines Themes definiert sind und eine dynamische Funktionalität wie z. B. eine Verschachtelung aufweisen können. Abschnitte, die Theme-Blöcke akzeptieren, können je nach Struktur des Abschnitts eine Vielzahl unterschiedlicher Blöcke akzeptieren. Ein Abschnitt, der Theme-Blöcke akzeptiert, kann alle verfügbaren Theme-Blöcke, eine bestimmte Teilmenge von Blöcken oder für diesen Abschnitt einzigartige Blöcke akzeptieren. Theme-Blöcke können auch die folgenden Verhaltensweisen aufweisen:

• Einige Blöcke unterstützen die Verschachtelung, sodass du Blöcke bis zu acht Ebenen tief in andere Blöcke verschachteln kannst.
• Einige Abschnitte haben erforderliche Blöcke. Du kannst diese Blöcke anpassen oder ausblenden, aber du kannst sie nicht neu anordnen oder löschen.
• Einige Blöcke werden automatisch in einem Abschnitt angezeigt, wenn bestimmte Bedingungen erfüllt sind.

Beispiel für einen Abschnitt mit Theme-Blöcken

Dein Theme hat beispielsweise einen Slideshow-Abschnitt mit Theme-Blöcken.

Wenn du im Slideshow-Abschnitt deines Themes auf Block hinzufügen klickst, kannst du einen Slide-Block aus der Blockauswahl auswählen. Es sind keine anderen Blocktypen verfügbar. Wenn du versuchst, einen Slide-Block zu einem anderen Abschnitt in deinem Theme hinzuzufügen, z. B. zu einem Bildbanner-Abschnitt, ist Slide nicht verfügbar. Dies ist ein Beispiel für einen eingeschränkten Block.

Nachdem du einen Slide-Block zum Abschnitt Slideshow hinzugefügt hast, kannst du auf Block hinzufügen klicken, um allen Slide-Blöcken im Abschnitt Slideshow zusätzliche Blöcke hinzuzufügen, wie z. B. Heading, Image, Button. Diese Blöcke sind im Slide-Block verschachtelt. Dies ist ein Beispiel für einen verschachtelten Block.

Wenn du einen zweiten Slide-Block zum Abschnitt Slideshow hinzufügst, fügt das Theme automatisch einen Slideshow controls-Block hinzu. Dieser Block zeigt Schaltflächen an, auf die Besucher:innen deiner Website klicken können, um von einer Folie zur nächsten zu navigieren. Du kannst den Stil der Schaltflächen anpassen oder die Steuerelemente ausblenden, aber du kannst den Block nicht entfernen oder löschen. Dies ist ein Beispiel für einen erforderlichen Block, der bedingt angezeigt wird.

Kompatibilität von Theme-Blöcken

Um auf Theme-Blöcke zuzugreifen, muss dein Theme Abschnitte enthalten, die Theme-Blöcke unterstützen. Du kannst im Code deines Themes überprüfen, ob dein Theme Theme-Blöcke unterstützt. Wenn sich in der Seitenleiste des Liquid-Editors ein Verzeichnis blocks befindet, verwendest du ein Theme, das Theme-Blöcke unterstützt. Du kannst auch die Dokumentation deines Themes zu Rate ziehen.

Schritte:

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

2. Klicke neben dem Theme, das du überprüfen möchtest, auf die Schaltfläche und dann auf Code bearbeiten.

3. Suche in der Seitenleiste nach dem Ordner „blocks“.

   

Theme-Vorlagen mit Abschnitten und Blöcken anpassen

Wenn du den Theme-Editor öffnest, wird standardmäßig die Startseite deines Shops geladen. Du kannst das Dropdown-Menü verwenden, um eine andere Vorlage auszuwählen, z. B. Produkte, Kollektionen, Seiten oder Blogs, oder die Suchleiste im Vorlagen-Dropdown verwenden, um nach einer bestimmten Vorlage zu suchen. Wenn du eine Vorlage auswählst, wird sie im Theme-Editor geladen und alle von dir vorgenommenen Änderungen werden in einer Vorschau im Editor angezeigt.

Einen Abschnitt hinzufügen

Füge einer beliebigen Seite in deinem Onlineshop einen neuen Abschnitt hinzu.

Schritte:

Einen Abschnitt bearbeiten

Einen Abschnitt oder Block neu anordnen

Du kannst die Reihenfolge der Abschnitte auf deinen Seitenvorlagen ändern und Blöcke innerhalb dieser Abschnitte neu anordnen. Zusätzlich kannst du kompatible Blöcke zwischen verschiedenen Abschnitten verschieben. Wenn deine Startseite beispielsweise zwei Slideshow-Abschnitte enthält, kannst du einen Slide-Block von einer Slideshow in die andere ziehen.

Du kannst einen Block nicht in einen anderen Abschnitt verschieben, wenn der Blocktyp inkompatibel ist oder der Abschnitt bereits die maximale Anzahl an Blöcken erreicht hat. Wenn du versuchst, einen Abschnitt oder Block an eine ungültige Position zu verschieben, kehrt er an seine ursprüngliche Position zurück.

Du kannst auch den Vorschau-Inspektor verwenden, um Abschnitte neu anzuordnen. Erfahre mehr über die Verwendung des Vorschau-Inspektors im Theme-Editor.

Schritte:

Abschnitt oder Block duplizieren

Du kannst einen Abschnitt oder Block duplizieren, um eine identische Kopie davon zu erstellen.

Nachdem du einen Block dupliziert hast, wird der neue Block demselben Abschnitt hinzugefügt. Wenn du den Block in einen neuen Abschnitt verschieben oder seine Reihenfolge ändern möchtest, kannst du den Block neu anordnen. Du kannst stattdessen auch einen Block kopieren und ihn dann direkt in einen anderen Abschnitt einfügen.

Blöcke kopieren und einfügen

Wenn du denselben Block in mehreren Abschnitten verwenden möchtest, kannst du ihn einfach kopieren und in einen anderen Abschnitt einfügen. Du kannst einen Block auch innerhalb desselben Abschnitts kopieren und einfügen oder stattdessen den Block duplizieren. Ein duplizierter Block behält alle Einstellungen und Inhalte des ursprünglichen Blocks bei.

Schritte:

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

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

3. Um einen Block auf deiner Startseite zu kopieren und einzufügen, wähle ihn entweder direkt aus oder verwende das Dropdown-Menü Startseite, um die spezifische Vorlage auszuwählen, die den Abschnitt oder Block enthält, den du bearbeiten möchtest.

4. Klicke mit der rechten Maustaste auf den Block, den du duplizieren möchtest, und klicke dann auf Kopieren.

5. Klicke mit der rechten Maustaste in denselben oder einen anderen Abschnitt und klicke dann auf Einfügen.

6. Klicke auf Speichern.

Abschnitt oder Block ausblenden oder löschen

Abschnitt oder Block umbenennen

Standardmäßig ist der Titel eines Abschnitts oder Blocks im Seitenleistenmenü des Theme-Editors und in den Einstellungsdetails auf den Block- oder Abschnittstyp festgelegt, z. B. „Kollektion“ oder „Text“.

Bei Blöcken wird, wenn die Blockeinstellungen ein Textfeld (z. B. eine Überschrift oder Beschreibung) enthalten, dieser Text auch an den Titel im Seitenleistenmenü angehängt. Wenn mehr als ein Textfeld vorhanden ist, wird das erste Textfeld mit Inhalt angehängt. Wenn du den Text im Textfeld änderst, wird der Blocktitel aktualisiert und enthält den neuen Text. Der Name eines Abschnitts oder Blocks darf nicht leer sein.

Du fügst beispielsweise deiner Seitenvorlage einen Abschnitt vom Typ Mehrspaltig mit Spalten-Blöcken hinzu. Der Spalten-Block enthält sowohl eine Überschriften-Einstellung mit dem Standardtext Spalte als auch eine Beschreibungs-Einstellung mit dem Standardtext Kombiniere Text mit einem Bild, um dein ausgewähltes Produkt, deine Kollektion oder deinen Blogbeitrag hervorzuheben.. Der Standardtitel des Abschnitts ist Mehrspaltig. Der Standardtitel des Spalten-Blocks ist Spalte - Spalte. Wenn du den Text aus dem Feld Überschrift entfernst, wird der Blocktitel zu Spalte - Kombiniere Text mit einem... aktualisiert.

Du kannst jeden Abschnitt oder Block in dessen Einstellungen im Seitenleistenmenü des Theme-Editors umbenennen.

Schritte:

Arbeiten mit Blöcken

Blöcke sind anpassbare Module, mit denen du Inhalte zu den Abschnitten in deinen Vorlagen hinzufügst. Du kannst Blöcke verwenden, um Text, Bilder, Links, Schaltflächen und mehr hinzuzufügen.

Shopify-Themes haben Abschnitte und Blöcke, die du anpassen kannst. Einige Abschnitte haben feste Blocktypen. Das bedeutet, dass du nur aus den Blöcken auswählen kannst, die für diesen Abschnitt durch das Theme-Design vorgegeben sind.

In anderen Abschnitten kannst du einen beliebigen Block auswählen, aber es gibt eine Begrenzung für die Gesamtzahl der Blöcke, die du dem Abschnitt hinzufügen kannst. Wenn dein Abschnitt die maximale Anzahl verfügbarer Blöcke erreicht, ist die Option Block hinzufügen ausgegraut und du kannst sie nicht anklicken oder antippen.

Du kannst die Suche verwenden, um einen bestimmten Block anhand seines Namens zu finden, oder einen Block aus dem Dropdown-Menü der Blockauswahl auswählen. Die Blöcke deines Themes sind in der Blockauswahl möglicherweise in Kategorien sortiert, z. B. Kollektion für Blöcke mit einer Kollektionsauswahl oder Medien für Bild- und Videoblöcke.

In der Blockauswahl wird eine Vorschau des Blocks angezeigt, sodass du die Anzeige des Blocks überprüfen kannst, bevor du ihn hinzufügst.

Block hinzufügen

Metafelder und Metaobjekte mit dynamischen Quellen verwenden

Du kannst Metafelder und Metaobjekte verwenden, um dynamische Informationen in deinem Onlineshop anzuzeigen. Wenn du ein Theme hast, das Metafelder unterstützt, kannst du ein Metafeld im Theme-Editor mit kompatiblen Einstellungen für Abschnitte oder Blöcke verbinden.

Wenn du beispielsweise Kerzen verkaufst, möchtest du vielleicht die Brenndauer für jede in deinem Shop verfügbare Kerze anzeigen. Nachdem du im Abschnitt Benutzerdefinierte Daten in den Einstellungen deines Shopify-Adminbereichs ein Produkt-Metafeld für Brenndauer eingerichtet hast, kannst du dem Hauptabschnitt deiner Produktvorlage einen Textblock hinzufügen. Im Textblock kannst du auf die Schaltfläche in der Texteinstellung klicken und das Metafeld Brenndauer auswählen. Die Informationen zur Brenndauer werden nun bei deinen Produkten angezeigt.

Wenn du ein Shopify-Theme hast, kannst du die meisten Metafelder und Metaobjekte über den Theme-Editor mit deinem Theme verbinden. Wenn du andere Themes verwendest oder benutzerdefinierte Datentypen hinzufügen möchtest, die dein Theme nicht unterstützt, kannst du deinen Theme-Code bearbeiten oder einen Shopify-Partner engagieren, der dir hilft. Erfahre mehr über das Engagieren eines Shopify-Partners.

Nicht alle Abschnitte oder Blöcke unterstützen dynamische Quellen. Überprüfe die Architekturversion deines Themes und die verfügbaren Anpassungsoptionen im Theme-Editor, um festzustellen, ob dein Theme dynamische Quellen unterstützt.

Du kannst dynamische Informationen in deinem Onlineshop anzeigen, indem du Abschnitte oder Blöcke hinzufügst, die dynamische Quellen verwenden können. Dynamische Quellen können in jeder Vorlage, jedem Abschnitt oder jedem Block verwendet werden, der kompatible Ressourcen anzeigt (Produkt, Kollektion, Seite, Blog und Blog-Beitrag). Du musst dein Metafeld hinzufügen, bevor du es in deinen Vorlagen verbinden kannst. Weitere Informationen zur Verwendung von Metafeldern und Metaobjekten mit dynamischen Quellen in deinem Theme findest du unter Dynamische Quellen.

Nachdem du das Setup abgeschlossen hast, befolge die folgenden Schritte, um dynamische Quellen über die Schaltfläche mit Abschnitten oder Blöcken in deinem Theme zu verbinden.

Schritte:

Erfahre mehr über die Anzeige von Metafeldern in deinem Onlineshop und die Anzeige von Metaobjekten in deinem Onlineshop.

Auswahl für dynamische Quellen

Du kannst die Auswahl für dynamische Quellen verwenden, um die richtige dynamische Quelle direkt im Theme-Editor zu verbinden. Sieh dir die folgenden Hauptfunktionen der Auswahl für dynamische Quellen an:

• Du kannst gegebenenfalls auf dynamische Quellen aus verschiedenen Ressourcen verweisen. Wenn du beispielsweise eine Einstellung mit einem Block verbindest, der sowohl mit einer Produktressource als auch mit einer Seitenressource verbunden ist, kannst du das Dropdown-Menü in der Auswahl für dynamische Quellen verwenden, um anzugeben, ob du nach Metafeldern suchen möchtest, die entweder der Produkt- oder der Seitenressource zugeordnet sind.
• Die Auswahl für dynamische Quellen verfügt über eine Such- und Filterfunktion, die dir hilft, das benötigte Metafeld zu finden.
• Die Auswahl für dynamische Quellen ermöglicht dir die Auswahl von Kategorie-Metafeldern. Dies sind zusätzliche Produktattribute, die verfügbar werden, wenn du einem Produkt eine Produktkategorie zuweist. Der Zugriff auf diese Metafelder ermöglicht es dir, dynamische Quellen mit allen relevanten Feldern des zugrunde liegenden Attribut-Metaobjekts zu verbinden.