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 mobile Reihenfolge komplett anders als auf dem Desktop sein soll – zum Beispiel bei einem dreispaltigen Layout, bei dem der mittlere Block auf Mobilgeräten zuerst erscheinen soll – ist CSS das richtige Werkzeug.
Füge das zur Datei assets/base.css deines Themes hinzu (dupliziere dein Theme immer zuerst):
@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: Rechtsklick auf das Element im Browser → Untersuchen (Inspect) → kopiere die Klasse aus dem HTML. Suche eher nach spezifischen Klassen für die Section als nach allgemeinen.
Diese Methode gibt dir präzise Kontrolle, erfordert aber etwas Erfahrung mit den Browser-Dev-Tools und CSS.
Passend dazu: Benutzerdefiniertes 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
Drei häufige Ursachen: (1) Der übergeordnete Container ist nicht display: flex (oder grid), also hat order keine Auswirkung, (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 Ganze mit den DevTools, um sicherzustellen, dass sowohl display: flex angewendet wird als auch deine order-Regel greift.
Flexbox order für die einfache lineare Neuanordnung von gestapelten Elementen. CSS Grid grid-template-areas für komplexe 2D-Layout-Änderungen (bei denen du Zeilen und Spalten pro Breakpoint unterschiedlich anordnest). Flexbox ist einfacher und wird gut unterstützt; Grid ist mächtiger für Neuanordnungen auf mehreren Achsen.
CSS-basierte Neuanordnungen (flex order, Grid-Platzierung) verursachen keinen CLS – die Reihenfolge wird beim ersten Rendern berechnet. Ein CLS passiert, wenn JavaScript DOM-Elemente nach dem Laden der Seite neu anordnet, oder wenn sich Inhalte durch Lazy-Loading verschieben. Bleib bei CSS für Layout-Änderungen und nutze JS nur für wirklich dynamische Interaktionen.
Nicht mit Liquid allein – es läuft serverseitig und kennt den Viewport nicht. Der sauberste Ansatz: Beschreibe die Änderung in Fudge, und es rendert sowohl die Desktop- als auch die Mobile-Variante in der Section, wobei CSS je nach Breakpoint die richtige anzeigt. Liquid request.user_agent ist ein fragiler Fallback, den du nur nutzen solltest, wenn du wirklich eine serverseitige Geräteerkennung brauchst.
Für kleinere Layout-Unterschiede (Spaltenanzahl, Padding) reicht eine responsive Section. Bei grundlegend anderen Content-Blöcken oder völlig unterschiedlichen visuellen Darstellungen besser zwei Sections – eine für Mobile gestylt, eine für Desktop, wobei die jeweils andere per Media Query ausgeblendet wird. Diese Aufteilung ist sauberer als eine komplexe responsive Logik in einer einzigen Section.
