Die wichtigsten Erkenntnisse
- Abschnitte (Sections) werden neu angeordnet, indem du sie in der linken Seitenleiste des Theme-Editors ziehst (Drag-and-drop).
- Das funktioniert auf jedem Seitentyp – Startseite, Produktseiten, Kategorie-Seiten und benutzerdefinierten Seiten.
- Der Header und der Footer sind feste Abschnitte – sie können nicht verschoben werden.
- Änderungen sind erst dann live, wenn du auf Speichern klickst.
- Fudge kann Seitenlayouts anhand einer einfachen Beschreibung in Klartext umstrukturieren, wenn Änderungen über Drag-and-drop hinausgehen.
Um Abschnitte auf einer Shopify-Seite neu anzuordnen, öffnest du Onlineshop > Themes > Anpassen, gehst zu der Seite, ziehst dann jeden Abschnitt an seinem Ziehpunkt in der linken Seitenleiste und klickst auf Speichern. Es ist kein Code erforderlich.
Warum du uns vertrauen kannst
Wir haben Hunderte von Shopify-Storefronts aufgebaut und angepasst. Wir entwickeln auch Fudge, den KI-Operator für Shopify-Stores, mit einer 4.9-Sterne-Bewertung im Shopify App Store.
So ordnest du Abschnitte im Theme-Editor neu an
Schritt 1. Gehe zu Onlineshop > Themes > Anpassen.
Schritt 2. Navigiere zu der Seite, die du bearbeiten möchtest. Nutze die Seitenauswahl oben im Editor, um zwischen den Seiten zu wechseln (Startseite, Produktseiten, Kategorie-Seiten usw.).
Schritt 3. Schau dir die linke Seitenleiste an. Du siehst dort eine Liste aller Abschnitte auf der aktuellen Seite in ihrer derzeitigen Reihenfolge.
Schritt 4. Fahre mit der Maus über den Abschnitt, den du verschieben möchtest. Auf der linken Seite des Abschnittsnamens erscheint ein Ziehpunkt (Drag-Handle, sechs in einem Raster angeordnete Punkte).
Schritt 5. Klicke auf den Ziehpunkt, halte ihn gedrückt und ziehe den Abschnitt dann nach oben oder unten an seine neue Position.
Schritt 6. Lass los, um ihn an der neuen Stelle abzulegen. Die Vorschau wird sofort aktualisiert.
Schritt 7. Klicke auf Speichern, um die neue Reihenfolge zu veröffentlichen.
Abschnitte, die du nicht verschieben kannst
Nicht jeder Abschnitt lässt sich ziehen. Zwei Abschnitte sind immer fixiert:
Header – Immer ganz oben. Es ist ein globaler Abschnitt – ihn zu verschieben ist weder möglich noch sinnvoll.
Footer – Immer ganz unten. Aus demselben Grund.
Einige Themes sperren auch spezifische Abschnitte (wie einen Cookie-Banner oder eine Ankündigungsleiste) an einer festen Position. Wenn du keinen Drag-Handle an einem Abschnitt siehst, ist er gesperrt.
Neuanordnen von Abschnitten auf verschiedenen Seitentypen
Der Vorgang ist für alle Seitentypen gleich, aber du musst zuerst zur richtigen Seite navigieren.
Startseite – Standardmäßig ausgewählt, wenn du den Theme-Editor öffnest.
Produktseiten – Klicke oben im Editor auf das Dropdown-Menü für den Seitentyp und wähle “Produkte”. Klicke dann auf ein beliebiges Produkt, um eine Vorschau anzuzeigen. Die von dir festgelegte Abschnittsreihenfolge gilt für alle Produktseiten (oder pro Produktseiten-Template, falls dein Theme mehrere Templates unterstützt).
Kategorie-Seiten (Collection Pages) – Gleicher Vorgang: Verwende das Dropdown-Menü für den Seitentyp und wähle “Kategorien”.
Benutzerdefinierte Seiten – Wähle im Dropdown-Menü “Seiten” aus. Wenn du mehrere Seitenvorlagen hast, wähle die richtige aus.
Um die Blöcke innerhalb eines Abschnitts neu anzuordnen, lies dir durch, wie man Blöcke innerhalb eines Shopify-Abschnitts verschiebt.
Was tun, wenn Drag-and-Drop nicht ausreicht
Manchmal ist die Layoutänderung, die du brauchst, nicht einfach nur eine Neuanordnung – du möchtest vielleicht Inhalte aus einem Abschnitt in einen anderen verschieben oder einen Abschnittstyp erstellen, den es in deinem Theme gar nicht gibt.
Das geht über das hinaus, was der Theme-Editor per Drag-and-drop erledigen kann. Solche Änderungen erfordern Code.
Fudge, der KI-Operator für Shopify-Stores, ist hierbei sehr nützlich. Du kannst das gewünschte Layout in einfachem Klartext beschreiben, und Fudge generiert die Code-Änderungen als Entwurf:
„Verschiebe den Größenberater aus dem Tabs-Abschnitt in die Buy Box.“
„Fasse die beiden Textabschnitte auf der Über-uns-Seite zu einem zweispaltigen Abschnitt zusammen.“
Fudge kümmert sich um den Code – du überprüfst ihn, bevor er live geht. Bei jeder veröffentlichten Änderung bleibt die ersetzte Version erhalten. Wenn die neue Reihenfolge also nicht gefällt, kannst du die alte mit einem Klick wiederherstellen.
Einen Abschnitt ausblenden statt löschen
Wenn du einen Abschnitt aus der Ansicht entfernen möchtest, ohne ihn dauerhaft zu löschen, kannst du ihn ausblenden, anstatt ihn neu anzuordnen oder zu löschen.
Klicke auf den Abschnitt in der Seitenleiste, um dessen Einstellungen zu öffnen. Suche nach einem Augen-Symbol oder einem Sichtbar/Verborgen-Schalter oben im Einstellungsbereich des Abschnitts. Schalte ihn aus, um den Abschnitt auszublenden.
Der Abschnitt bleibt in deiner Seitenleiste (ausgegraut) und kann jederzeit wieder aktiviert werden. Das ist sicherer als das Löschen für Abschnitte, die du vielleicht später wiederverwenden möchtest. Wenn du einen Abschnitt endgültig entfernen möchtest, lies unseren Guide: Abschnitt in Shopify löschen.
Quick Tips
- Vorschau vor dem Speichern – die Live-Vorschau zeigt die neue Reihenfolge in Echtzeit an, bevor du sie endgültig veröffentlichst.
- Mobile Vorschau – klicke auf das Handy-Symbol oben im Editor, um zu überprüfen, wie die neu angeordneten Abschnitte auf kleinen Bildschirmen aussehen.
- Rückgängig machen – wenn du einen Abschnitt versehentlich an die falsche Stelle ziehst, drücke Strg+Z (Cmd+Z auf dem Mac), um dies rückgängig zu machen. Oder speichere einfach nicht und lade die Seite neu.
Um für Smartphones eine andere Reihenfolge festzulegen, lies dir durch, wie du dein mobiles Layout in Shopify neu anordnest.
FAQ
Warum funktioniert Drag-and-drop in meinem Shopify Theme-Editor nicht?
Zwei häufige Ursachen: (1) der Abschnitt ist gesperrt (Header/Footer oder Themes, die bestimmte Abschnitte fixieren) oder (2) ein Browserproblem, versuche es also mit einem anderen Browser oder aktualisiere die Seite. Achte darauf, ob der Ziehpunkt (sechs Punkte) beim Darüberfahren mit der Maus (Hover) erscheint.
Kann ich Shopify-Abschnitte stattdessen auch über den Code-Editor neu anordnen?
Ja — öffne die entsprechende Template-JSON-Datei (z. B. templates/index.json für die Startseite) und ordne die Einträge im order-Array neu an. Das ist schneller für Massen-Neuanordnungen oder für Abschnitte ohne Ziehpunkt, aber auch riskanter — ein JSON-Syntaxfehler macht die Seite unbrauchbar. Dupliziere das Theme immer zuerst.
Wirkt sich das Neuordnen von Shopify-Abschnitten auf mein SEO aus?
Leicht. Die Reihenfolge der Abschnitte verändert die visuelle Abfolge, wodurch sich verschieben kann, welche Inhalte Above-the-Fold erscheinen und welche Keywords Google zuerst sieht. Bei den meisten Neuanordnungen ist die SEO-Auswirkung vernachlässigbar, aber das Verschieben eines langen Textblocks von einer prominenten an eine versteckte Position kann die Keyword-Relevanz der Seite verringern.
Kann ich Shopify-Abschnitte für jedes Template unterschiedlich anordnen?
Ja — jedes Template (Startseite, Produkt, Kategorie, benutzerdefinierte Seite) hat seine eigene Abschnittsreihenfolge. Das Neuordnen auf der Startseite wirkt sich nicht auf Produktseiten aus und umgekehrt. Benutzerdefinierte Templates (z. B. product.hero.json) haben unabhängige Abschnittsreihenfolgen vom Standard-Template.
Sollte ich mein Theme vor einer größeren Neuanordnung duplizieren?
Bei umfassenden Umstrukturierungen (Umbau der Startseite, Änderung der Reihenfolge der Produktseiten für alle Produkte) ja. Bei kleineren Neuanordnungen (Verschieben eines Abschnitts nach oben oder unten) nicht — die Änderung lässt sich durch Zurückziehen rückgängig machen. Eine Duplizierung ist dein Sicherheitsnetz für Änderungen, die sich irreversibel anfühlen. Für Umstrukturierungen, die über Drag-and-drop hinausgehen (Inhalte zwischen Abschnitten verschieben, zwei Abschnitte zusammenführen, einen in zwei teilen), beschreibe Fudge, was du möchtest, und das Seiten-Template wird umgeschrieben.
