Das Wichtigste auf einen Blick
- Der Theme-Editor enthält einen Modus für die Mobile-Vorschau — klicke auf das Smartphone-Symbol oben, um dein Layout zu prüfen.
- Einige Themes erlauben es dir, Blöcke für mobil über die „Mobile layout“-Einstellungen innerhalb der Abschnitte anders anzuordnen.
- Für eine völlig unabhängige mobile Sortierung (anders als am Desktop) ist CSS Flexbox oder Fudge erforderlich.
- Teste Änderungen immer auf einem echten Gerät — die Vorschau ist nicht immer pixelgenau.
Die meisten Shopify-Themes sind so konzipiert, dass sie auf dem Smartphone vertikal gestapelt werden, was bei einfachen Layouts gut funktioniert. Wenn du jedoch einen Abschnitt mit mehreren Spalten oder Blöcken hast, entspricht die Stapelreihenfolge unter Umständen nicht dem, was für mobile Shopper sinnvoll ist.
Dieser Guide erklärt dir deine Optionen, von den Möglichkeiten im Theme-Editor bis hin zu dem Punkt, an dem du Code benötigst.
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
Dafür gibt es meist drei Gründe: (1) Der Parent-Container hat nicht display: flex (oder Grid), sodass order keinen Effekt hat, (2) die CSS-Spezifität (Specificity) ist zu niedrig und die Theme-Styles überschreiben deine Regel, oder (3) die Media Query zielt auf den falschen Breakpoint ab. Untersuche es mit den DevTools, um sicherzustellen, dass sowohl display: flex angewendet wird als auch deine order-Regel greift.
Flexbox order für einfaches, lineares Umsortieren von gestapelten Elementen. CSS Grid grid-template-areas für komplexe 2D-Layout-Änderungen (wenn du Zeilen und Spalten je nach Breakpoint anders anordnest). Flexbox ist simpler und gut unterstützt; Grid ist mächtiger für das Umsortieren auf mehreren Achsen.
CSS-basiertes Umsortieren (flex order, Grid-Platzierung) verursacht keinen CLS – die Reihenfolge wird beim initialen Rendern berechnet. CLS entsteht, wenn JavaScript DOM-Elemente nach dem Laden der Seite umsortiert oder wenn Content durch Lazy-Loading verschoben wird. Bleib bei CSS für das Layout-Reordering und nutze JS nur für wirklich dynamische Interaktionen.
Nicht nur mit Liquid – es läuft serverseitig und kennt den Viewport nicht. Der sauberste Ansatz: Beschreibe die Änderung in Fudge und es rendert sowohl Desktop- als auch Mobile-Varianten in der Section, während das CSS je nach Breakpoint die richtige anzeigt. Liquid request.user_agent ist ein instabiler Fallback, den du nur nutzen solltest, wenn du wirklich eine Device-Erkennung auf dem Server brauchst.
Bei kleineren Layout-Unterschieden (Spaltenanzahl, Padding) reicht eine responsive Section. Bei grundlegend anderen Content-Blöcken oder völlig unterschiedlicher Optik sind zwei Sections besser – eine für Mobile gestylt, eine für Desktop, wobei die andere per Media Query versteckt wird. Diese Aufteilung ist sauberer als eine komplexe Responsive-Logik innerhalb einer einzigen Section.
