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.

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.