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.

Methode 1 — Die Mobile-Vorschau im Theme-Editor nutzen

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

Schritt 2 — Wechsel zur Mobile-Vorschau. Klicke auf das Smartphone-Symbol oben in der Mitte des Editors. Dies zeigt dir, wie Abschnitte auf kleinen Bildschirmen gerendert werden.

Schritt 3 — Abschnittsreihenfolge prüfen. Abschnitte stapeln sich standardmäßig in der gleichen Reihenfolge wie am Desktop. Ziehe Abschnitte in der linken Seitenleiste, um sie neu anzuordnen — dies wirkt sich auf Desktop und Mobil aus.

Schritt 4 — Blockreihenfolge innerhalb der Abschnitte prüfen. Einige Themes bieten eine „Mobile layout“-Option in den Abschnittseinstellungen. Suche im rechten Panel danach, wenn ein Abschnitt ausgewählt ist.

Dieser integrierte Ansatz deckt die meisten einfachen Anforderungen ab, ohne dass du den Code anfassen musst.

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 vom Desktop abweichen soll — zum Beispiel ein dreispaltiges Layout, bei dem der mittlere Block mobil an erster Stelle stehen soll — ist CSS das richtige Werkzeug.

Füge dies in die Datei assets/base.css deines Themes ein (dupliziere dein Theme immer zuerst):

@media (max-width: 767px) {
  .klasse-deines-abschnitts {
    display: flex;
    flex-direction: column;
  }

  .dein-block-zuerst-auf-mobil {
    order: 1;
  }

  .dein-block-als-zweites-auf-mobil {
    order: 2;
  }
}

Die richtigen Klassennamen finden: Rechtsklick auf das Element im Browser → Untersuchen (Inspect) → kopiere die Klasse aus dem HTML. Suche nach abschnittsspezifischen Klassen statt nach generischen.

Diese Methode bietet präzise Kontrolle, erfordert aber etwas Vertrautheit mit den Browser-Dev-Tools und CSS.

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.

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

Try Fudge for Free

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

Änderungen in der Desktop-Ansicht vornehmen, ohne mobil zu prüfen. Wechsel nach Änderungen immer in die Mobile-Vorschau — was am Desktop gut aussieht, kann mobil fehlerhaft wirken.

Das Live-Theme bearbeiten. Dupliziere dein Theme, bevor du den Code-Editor anfasst. Eine falsche CSS-Regel kann das Layout deines Shops komplett zerstören.

JavaScript für die Layout-Reihenfolge nutzen. CSS übernimmt die Neusortierung auf Rendering-Ebene. JavaScript-basierte Sortierung verursacht Layout Shifts (CLS), was deinen Google PageSpeed Score verschlechtert.