Die wichtigsten Punkte
- Der Theme Editor enthält einen mobilen Vorschaumodus — klicke oben auf das Smartphone-Symbol, um dein Layout zu überprüfen.
- Bei manchen Themes kannst du Blöcke für Mobilgeräte über die „Mobile Layout“-Einstellungen in den Abschnitten neu anordnen.
- Für eine völlig eigenständige mobile Reihenfolge (abweichend vom Desktop) ist die CSS-Eigenschaft Flexbox
orderoder Fudge erforderlich.- Teste nach dem Speichern immer auf einem echten Gerät — die Vorschau ist nicht immer pixelgenau.
Die meisten Shopify-Themes sind so aufgebaut, dass Elemente auf Mobilgeräten vertikal gestapelt werden, was bei einfachen Layouts sehr gut funktioniert. Wenn du jedoch einen Abschnitt mit mehreren Spalten oder Blöcken hast, ist diese Stapelreihenfolge vielleicht nicht optimal für mobile Shopper.
Dieser Guide zeigt dir deine Möglichkeiten – von den integrierten Funktionen im Theme Editor bis hin zu Anpassungen, für die eigener Code nötig ist.
Warum die mobile Reihenfolge wichtig ist
Am Desktop zeigt ein zweispaltiger Abschnitt vielleicht ein Bild links und Text rechts. Mobil wird beides untereinander gestapelt — aber was erscheint zuerst? Die Lesereihenfolge auf dem Smartphone beeinflusst direkt die Conversion. Wenn deine Headline unter dem Bild erscheint, müssen Besucher erst scrollen, um zu verstehen, was sie vor sich haben.
Die richtige Reihenfolge ist besonders wichtig für Produkt-Features, Hero-Content und Ankündigungsleisten.
Verwandt: Hide Content on Mobile in Shopify.
Methode 1 — Die Mobile-Vorschau im Theme-Editor nutzen
Schritt 1 — Theme-Editor öffnen. Gehe zu Onlineshop → Themes → Anpassen.
Schritt 2 — Zur mobilen Vorschau wechseln. Klicke oben in der Mitte des Editors auf das Smartphone-Symbol. So siehst du, wie die Abschnitte auf kleinen Bildschirmen dargestellt werden.
Schritt 3 — Reihenfolge der Abschnitte prüfen. Abschnitte werden standardmäßig in der gleichen Reihenfolge wie auf dem Desktop gestapelt. Ziehe die Abschnitte in der linken Seitenleiste, um sie neu anzuordnen – das wirkt sich sowohl auf Desktop als auch auf Mobilgeräte aus.
Schritt 4 — Reihenfolge der Blöcke innerhalb der Abschnitte prüfen. Einige Themes zeigen eine Option für das „Mobile Layout“ in den Abschnittseinstellungen an. Suche danach im rechten Panel, während ein Abschnitt ausgewählt ist.
Dieser integrierte Ansatz deckt die meisten grundlegenden Anforderungen an die Neuanordnung ab, ohne den Code anzufassen.
Mehr dazu: Inhalte in Shopify auf Mobilgeräten ausblenden.
Mehr dazu: Abstände in Shopify auf Mobilgeräten verbessern.
Mehr dazu: Abschnitte auf einer Shopify-Seite neu anordnen.
Methode 2 — „Mobile layout“-Einstellungen des Themes nutzen
Themes, die auf Shopifys Dawn-Framework basieren (und viele Premium-Themes), enthalten spezifische Layout-Steuerungen für Mobilgeräte pro Abschnitt. Diese erscheinen im Einstellungsmenü, wenn du einen Abschnitt im Theme-Editor auswählst.
Gängige Optionen sind:
- Stapelreihenfolge (Stack order) — Text über Bild vs. Bild über Text auf Mobilgeräten
- Spaltenanzahl auf Mobilgeräten — 1 Spalte vs. 2 Spalten
- Block-Sichtbarkeit — Bestimmte Blöcke mobil ein- oder ausblenden
Wenn dein Theme über diese Funktionen verfügt, nutze sie zuerst, bevor du zu CSS greifst. Sie sind die sicherste Option, da sie offiziell unterstützt werden.
Methode 3 — CSS Flexbox Order (Code erforderlich)
Wenn die Reihenfolge auf Mobilgeräten komplett anders sein soll als auf dem Desktop – zum Beispiel bei einem dreispaltigen Layout, bei dem der mittlere Block auf dem Handy zuerst erscheinen soll –, ist CSS das richtige Werkzeug.
Füge dies der Datei assets/base.css deines Themes hinzu (dupliziere vorher immer dein Theme):
@media (max-width: 767px) {
.your-section-class {
display: flex;
flex-direction: column;
}
.your-block-first-on-mobile {
order: 1;
}
.your-block-second-on-mobile {
order: 2;
}
}Die richtigen Klassennamen finden: Mache im Browser einen Rechtsklick auf das Element → Untersuchen → kopiere die Klasse aus dem HTML-Code. Suche nach abschnittsspezifischen Klassen und nicht nach allgemeinen.
Diese Methode gibt dir eine präzise Kontrolle, erfordert jedoch etwas Vertrautheit mit den Entwicklertools des Browsers und CSS.
Mehr dazu: Eigenes JavaScript in Shopify hinzufügen.
Methode 4 — Fudge für voll individualisierte mobile Sortierung nutzen
Wenn dein Layout auf dem Smartphone eine grundlegend andere Struktur erfordert — nicht nur eine Umsortierung, sondern andere Inhalte oder responsive Logik — wird der CSS-Ansatz schnell kompliziert.
Mit Fudge kannst du genau beschreiben, was du willst:
„Verschiebe auf Mobilgeräten die Produktbeschreibung über die Produktbilder. Behalte am Desktop das Standard-Layout mit zwei Spalten bei.“
Fudge generiert den Code, du prüfst den Entwurf und bestätigst ihn, wenn alles passt. Kein manuelles CSS-Schreiben, keine Suche nach Klassen.
Unterschied zwischen Abschnitts- und Blockreihenfolge
Das sind zwei verschiedene Dinge:
Abschnittsreihenfolge — die Abfolge der Hauptbereiche auf der Seite (Hero, Features, Testimonials usw.). Der Theme-Editor erledigt dies per Drag-and-Drop, und die Reihenfolge ist auf Desktop und Mobil identisch.
Blockreihenfolge — die Abfolge der Elemente innerhalb eines Abschnitts (Bild vs. Text oder die Reihenfolge von Testimonial-Karten). Hier kommen Theme-Einstellungen oder CSS ins Spiel.
Wenn du versuchst, auf dem Smartphone eine völlig andere Seitenstruktur anzuzeigen (ganz andere Abschnitte), musst du CSS display: none verwenden, um bestimmte Abschnitte am jeweiligen Breakpoint auszublenden, und separate Versionen für mobil und Desktop erstellen.
Häufige Fehler
Umsortieren in der Desktop-Ansicht, ohne die Mobile-Version zu checken. Wechsle nach Änderungen immer in die Mobile-Vorschau – was auf dem Desktop gut aussieht, kann auf dem Smartphone komplett kaputt wirken.
Das Live-Theme bearbeiten. Dupliziere dein Theme, bevor du den Code-Editor anfasst. Eine einzige schlechte CSS-Regel kann das Layout deines Shops komplett zerschießen.
JavaScript für die Layout-Reihenfolge nutzen. CSS übernimmt das Umsortieren auf Rendering-Ebene. JavaScript-basiertes Umsortieren verursacht Layout Shifts (CLS), was deinem Google PageSpeed-Score schadet.
FAQ
Es gibt drei häufige Ursachen: (1) Der übergeordnete Container nutzt nicht display: flex (oder Grid), weshalb order wirkungslos ist, (2) die CSS-Spezifität ist zu niedrig und Theme-Styles überschreiben deine Regel, oder (3) die Media Query zielt auf den falschen Breakpoint ab. Überprüfe das über die DevTools, um sicherzustellen, dass display: flex angewendet wird und deine order-Regel gewinnt.
Verwende Flexbox order für eine einfache, lineare Neuanordnung gestapelter Elemente. CSS Grid grid-template-areas eignet sich für komplexe 2D-Layout-Anpassungen (bei denen du Zeilen und Spalten je Breakpoint völlig unterschiedlich anordnest). Flexbox ist einfacher und wird gut unterstützt; Grid bietet mehr Möglichkeiten für Anpassungen auf mehreren Achsen.
Eine CSS-basierte Neuordnung (Flex order, Grid-Platzierung) verursacht keine CLS — die Reihenfolge wird bereits beim initialen Rendern berechnet. CLS entsteht nur, wenn JavaScript DOM-Elemente nach dem Laden der Seite neu anordnet oder wenn sich Inhalte durch Lazy-Loading verschieben. Beschränke dich für das Layout auf CSS und nutze JS nur für echte dynamische Interaktionen.
Nicht allein durch Liquid — es läuft serverseitig und kennt den Viewport nicht. Der sauberste Ansatz: Beschreibe die Änderung für Fudge und es rendert sowohl Desktop- als auch Mobile-Varianten im Abschnitt. Per CSS wird dann je Breakpoint automatisch die richtige Version angezeigt. Die Liquid-Eigenschaft request.user_agent ist ein fehleranfälliger Fallback, der nur genutzt werden sollte, wenn du zwingend eine serverseitige Geräteerkennung brauchst.
Bei kleineren Layout-Unterschieden (Spaltenanzahl, Padding) reicht ein einziger responsiver Abschnitt aus. Bei grundlegend verschiedenen Inhaltsblöcken oder völlig anderen Designs empfehlen sich zwei Abschnitte — einer für Mobile gestylt, einer für Desktop. Der jeweils andere wird über eine Media Query ausgeblendet. Diese Trennung ist viel sauberer, als komplexe responsive Logik in einen einzelnen Abschnitt zu packen.
