Ordne dein mobiles Shopify-Layout neu an: Einstellungen & CSS (2026)

Die wichtigsten Erkenntnisse

Der Theme-Editor enthält einen mobilen Vorschaumodus — klicke auf das Handy-Symbol oben, um zu prüfen, wie dein Layout aussieht.

Einige Themes lassen dich Blöcke für die mobile Ansicht über die Einstellungen für das “Mobile Layout” innerhalb von Abschnitten anders anordnen.

Für eine völlig unabhängige mobile Reihenfolge (abweichend vom Desktop) ist CSS-Flexbox order oder Fudge erforderlich.

Teste nach Änderungen immer auf einem echten Gerät — die Vorschau ist nicht immer pixelgenau.

Um dein mobiles Layout in Shopify neu anzuordnen, prüfe zunächst die Abschnittseinstellungen auf mobile Layout-Optionen (Stapelreihenfolge, Spalten). Für eine Reihenfolge, die vom Desktop abweicht, füge CSS hinzu: Mache den Container innerhalb einer mobilen Media Query zu display: flex; flex-direction: column und setze order für jeden Block.

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.

Bevor du startest: Überprüfe die Reihenfolge in der mobilen Vorschau

Schritt 1 — Öffne den Theme-Editor. Gehe zu Onlineshop → Themes → Anpassen.

Schritt 2 — Wechsle zur mobilen Vorschau. Klicke auf das Handy-Symbol oben in der Mitte des Editors. Das zeigt dir, wie Abschnitte auf kleinen Bildschirmen gerendert werden.

Schritt 3 — Überprüfe die Reihenfolge der Abschnitte. Standardmäßig stapeln sich Abschnitte in derselben Reihenfolge wie auf dem Desktop. Ziehe Abschnitte in der linken Seitenleiste, um sie neu anzuordnen — dies betrifft sowohl den Desktop als auch mobile Geräte.

Schritt 4 — Überprüfe die Reihenfolge der Blöcke innerhalb der Abschnitte. Einige Themes zeigen eine “Mobile Layout”-Option innerhalb der Abschnittseinstellungen. Suche im rechten Panel danach, wenn ein Abschnitt ausgewählt ist.

Die Vorschau zeigt dir nur die Reihenfolge. Um die Reihenfolge der Blöcke nur auf mobilen Geräten zu ändern, nutze eine der drei unten stehenden Methoden.

Um ganze Abschnitte auf jedem Gerät zu verschieben, lies wie du Abschnitte auf einer Shopify-Seite neu anordnest.

Methode 1 - Nutze die “Mobile Layout”-Einstellungen des Themes

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 2 - CSS-Flexbox Order (Code erforderlich)

Wenn du möchtest, dass die mobile Reihenfolge komplett vom Desktop abweicht — zum Beispiel ein dreispaltiges Layout, bei dem der mittlere Block auf dem Handy zuerst erscheinen soll —, ist CSS das richtige Tool.

Füge das Folgende zur Datei assets/base.css deines Themes hinzu (dupliziere dein Theme immer zuerst):

@media (max-width: 749px) {
    .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 in deinem Browser → Untersuchen → kopiere die Klasse aus dem HTML. Suche eher nach abschnittsspezifischen Klassen als nach generischen.

Diese Methode gibt dir präzise Kontrolle, erfordert aber etwas Erfahrung mit Browser-DevTools und CSS.

Methode 3 - Nutze Fudge für eine komplett individuelle mobile Anordnung

Wenn dein Layout auf mobilen Geräten eine grundlegend andere Struktur erfordert — nicht nur eine Neuanordnung, sondern andere Inhalte, andere Abschnittstypen oder eine responsive Block-Logik —, wird der CSS-Ansatz schnell kompliziert.

Fudge, der KI-Operator für Shopify-Stores, lässt dich in seinem Store-Editor genau beschreiben, was du willst:

“Verschiebe auf dem Handy die Produktbeschreibung über die Produktbilder. Behalte auf dem Desktop das Standard-Zweispalten-Layout bei.”

Fudge generiert den Code, du überprüfst den Entwurf und gibst ihn frei, wenn er gut aussieht. Kein manuelles CSS-Schreiben, keine Klassen-Suche. Sobald die neue Reihenfolge live ist, zeigt Fudge dir die Conversion-Rate der Seite auf mobilen Geräten vor und nach der Änderung, und die alte Reihenfolge ist mit nur einem Klick wiederhergestellt, falls du sie zurückhaben möchtest.

Ordne dein mobiles Layout neu an, indem du es beschreibst.

Kostenlose Testversion starten

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

Warum entspricht meine mobile Reihenfolge dem Desktop, obwohl ich Flex `order` verwende?

Dafür gibt es drei häufige Ursachen: (1) der übergeordnete Container ist nicht display: flex (oder grid), sodass order keine Wirkung hat, (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. Untersuche es mit den DevTools, um sicherzustellen, dass sowohl display: flex angewendet wird als auch deine order-Regel gewinnt.

Sollte ich Flexbox `order` oder CSS Grid für die mobile Neuanordnung verwenden?

Flexbox order für einfache lineare Neuanordnungen von gestapelten Elementen. CSS Grid grid-template-areas für komplexe 2D-Layout-Änderungen (wenn du Zeilen und Spalten je nach Breakpoint unterschiedlich anordnest). Flexbox ist einfacher und wird gut unterstützt; Grid ist mächtiger für Neuanordnungen auf mehreren Achsen.

Verursacht die mobile Neuanordnung einen Cumulative Layout Shift (CLS)?

CSS-basierte Neuanordnungen (Flex order, Grid-Platzierung) verursachen keinen CLS — die Reihenfolge wird beim ersten Rendern berechnet. CLS entsteht, wenn JavaScript DOM-Elemente nach dem Laden der Seite neu anordnet, oder wenn sich Inhalte durch Lazy-Loading verschieben. Beschränke dich auf CSS für Layout-Neuanordnungen und nutze JS nur für wirklich dynamische Interaktionen.

Kann ich in Liquid basierend auf dem Viewport bedingt unterschiedliche Inhalte rendern?

Nicht mit Liquid allein — es läuft serverseitig und kennt den Viewport nicht. Der sauberste Ansatz: Beschreibe die Änderung gegenüber Fudge und es rendert sowohl die Desktop- als auch die mobile Variante im Abschnitt, zusammen mit CSS, das je nach Breakpoint die richtige anzeigt.

Sollte ich Abschnitte für mobile Geräte duplizieren oder Variationen eines Abschnitts ausblenden?

Für kleinere Layout-Unterschiede (Spaltenanzahl, Padding) reicht ein responsiver Abschnitt. Für wesentlich unterschiedliche Inhaltsblöcke oder komplett andere visuelle Darstellungen empfiehlt sich die Nutzung von zwei Abschnitten — einer für Mobile gestylt, einer für Desktop, wobei der jeweils andere per Media Query ausgeblendet wird. Diese Aufteilung ist sauberer als eine komplexe responsive Logik in einem einzigen Abschnitt.