Das Wichtigste auf einen Blick
- Abschnitte werden durch Ziehen in der linken Seitenleiste des Theme-Editors neu angeordnet.
- Dies funktioniert auf jedem Seitentyp – Startseite, Produktseiten, Kategorieseiten und benutzerdefinierte Seiten.
- Header und Footer sind fixierte Abschnitte – sie können nicht verschoben werden.
- Änderungen werden erst nach dem Klicken auf Speichern live geschaltet.
- Fudge kann Seitenlayouts anhand einer einfachen englischen Beschreibung umstrukturieren, wenn Änderungen über Drag-and-Drop hinausgehen.
Das Neuanordnen von Abschnitten ist eine der dankbarsten Aufgaben im Shopify Theme-Editor. Es ist einfaches Drag-and-Drop – kein Code erforderlich. Hier erfährst du genau, wie es geht.
Warum du uns vertrauen kannst
Wir haben hunderte von Shopify-Storefronts erstellt und angepasst. Außerdem haben wir Fudge entwickelt – einen KI-Storefront-Editor mit einer 5,0-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, Kategorieseiten etc.).
Schritt 3. Schau in die linke Seitenleiste. Dort siehst du eine Liste aller Abschnitte auf der aktuellen Seite in ihrer jetzigen Reihenfolge.
Schritt 4. Bewege den Mauszeiger über den Abschnitt, den du verschieben möchtest. Ein Drag-Handle (sechs Punkte als Raster) erscheint links neben dem Namen des Abschnitts.
Schritt 5. Klicke auf den Drag-Handle, halte ihn gedrückt und ziehe den Abschnitt nach oben oder unten an die neue Position.
Schritt 6. Lass los, um ihn zu platzieren. Die Vorschau auf der rechten Seite aktualisiert sich sofort.
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 Prozess 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 für die Vorschau. Die von dir festgelegte Reihenfolge der Abschnitte gilt für alle Produktseiten (oder pro Produktseiten-Template, falls dein Theme mehrere Templates unterstützt).
Kategorieseiten – Gleicher Vorgang – nutze das Dropdown für den Seitentyp und wähle „Kategorien“.
Benutzerdefinierte Seiten – Wähle „Seiten“ aus dem Dropdown. Wenn du mehrere Seiten-Templates hast, wähle das richtige aus.
Was tun, wenn Drag-and-Drop nicht ausreicht
Manchmal ist die gewünschte Layoutänderung nicht nur eine Neuanordnung – du möchtest Inhalte aus einem Abschnitt in einen anderen verschieben oder einen Abschnittstyp erstellen, der in deinem Theme nicht existiert.
Das liegt außerhalb dessen, was die Drag-and-Drop-Griffe des Theme-Editors leisten können. Diese Änderungen erfordern Code.
Fudge ist hier hilfreich. Du kannst das gewünschte Layout in einfachem Englisch beschreiben, und Fudge generiert die Code-Änderungen als Entwurf:
„Verschiebe den Abschnitt mit den Produktmerkmalen über den Abschnitt mit der Produktbeschreibung.“
„Strukturiere die Startseite so um, dass der Abschnitt mit den Testimonials vor dem Abschnitt mit den hervorgehobenen Produkten kommt.“
Fudge kümmert sich um den Code – du prüfst alles, bevor es live geht.
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.
Quick Tips
- Vorschau vor dem Speichern – Die Live-Vorschau zeigt die neue Reihenfolge in Echtzeit an, bevor du sie final übernimmst.
- Mobile Vorschau – Klicke auf das Mobile-Icon unten im Editor, um zu prüfen, wie die neu angeordneten Abschnitte auf kleinen Bildschirmen aussehen.
- Rückgängig machen – Wenn du versehentlich einen Abschnitt an die falsche Stelle ziehst, drücke Strg+Z (Cmd+Z auf dem Mac). Oder speichere einfach nicht und lade die Seite neu.
