So verbessern Sie mobile Abstände in Shopify (2026)

Das Wichtigste in Kürze

• Viele Shopify-Themes enthalten separate Schieberegler für Mobile-Padding (Abstände) in den Abschnittseinstellungen — sieh dort zuerst nach.
• Globale Abstände werden oft über CSS Custom Properties gesteuert, die Dawn über die Theme-Einstellungen > Layout festlegt.
• Das häufigste Problem sind Abschnitte, die auf dem Smartphone oben oder unten zu viel Padding haben, wodurch die Seite leer wirkt und man ewig scrollen muss.
• Mit CSS Media Queries kannst du völlig unterschiedliche Abstandswerte für jede Bildschirmgröße festlegen.

Um die mobilen Abstände in Shopify zu korrigieren, öffne die Smartphone-Vorschau des Theme-Editors und verringere das Padding jedes Abschnitts (oder die Schieberegler für mobiles Padding, falls dein Theme diese hat). Für alles, was die Schieberegler nicht abdecken, fügst du eine @media (max-width: 749px) CSS-Regel hinzu.

Ein Abschnitt, der auf einem 1440px Desktop-Monitor ausgewogen aussieht, hat auf einem 390px iPhone-Bildschirm oft ungünstige Abstände: entweder zu viel Freiraum oder der Inhalt ist zu sehr zusammengequetscht.

Warum mobile Abstände oft nicht passen

Desktop-Designs werden normalerweise größer angelegt — mehr Padding, breitere Ränder (Margins), mehr Freiraum zwischen den Elementen. Wenn dieselben Pixelwerte auf mobilen Geräten angewendet werden, stimmen die Proportionen nicht mehr. 60px Top-Padding, das auf dem Desktop elegant aussieht, nimmt etwa 7% der Höhe eines iPhone-Bildschirms ein, und das obere und untere Padding zusammen verdoppeln das fast.

Die meisten modernen Shopify-Themes berücksichtigen dies mit responsivem Spacing, aber nicht alle Themes sind dabei gründlich, und Theme-Anpassungen können neue Abstandsprobleme verursachen.

Wenn ein Abschnitt gar nicht erst auf Smartphones angezeigt werden soll, lies dir durch, wie du Inhalte in Shopify auf mobilen Geräten ausblendest.

Methode 1 — Einstellungen für das Abschnitts-Padding im Theme Editor

Die schnellste Lösung für Abstände auf Abschnittsebene.

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

Schritt 2 — Wechsle zur mobilen Vorschau. Klicke oben auf das Smartphone-Icon. So erkennst du leichter, welche Abschnitte Abstandsprobleme haben.

Schritt 3 — Wähle den Problem-Abschnitt aus. Klicke ihn in der linken Seitenleiste oder direkt in der Vorschau an.

Schritt 4 — Suche nach Padding-Einstellungen. Scrolle im rechten Einstellungsfenster nach unten, dort findest du:

• Schieberegler für “Padding oben” / “Padding unten”
• Schieberegler für “Padding oben (mobil)” / “Padding unten (mobil)”
• “Abschnittsabstand”

Wenn es separate mobile Schieberegler gibt, passe sie unabhängig vom Desktop an. Das ist die sauberste Methode.

Schritt 5 — Überprüfe das Padding aller Abschnitte. Abschnitte können unschön aneinandergereiht wirken, wenn zwei aufeinanderfolgende Abschnitte jeweils 60px Padding oben und unten haben. Wenn du eines davon reduzierst, wird die optische Lücke oft schon behoben.

Für die Grundlagen zu Padding und Margin, siehe wie du Padding und Margin in Shopify änderst.

Methode 2 — CSS Media Queries für individuelle Abstände

Wenn der Theme-Editor keine mobilspezifischen Einstellungen hat, gibt dir CSS präzise Kontrolle.

Schritt 1 — Dupliziere dein Theme. Gehe zu Onlineshop → Themes, klicke auf das Drei-Punkte-Menü (…) neben deinem Theme und dann auf Duplizieren. Nimm die Änderungen an der Kopie vor.

Schritt 2 — Identifiziere das Element. Mache einen Rechtsklick auf den Abschnitt mit zu viel Abstand → Untersuchen (Inspect) → finde den Klassennamen (z.B. .section-features, .page-width).

Schritt 3 — Öffne deine CSS-Datei. Klicke bei der Kopie auf das Drei-Punkte-Menü (…), dann auf Code bearbeiten und öffne assets/base.css.

Schritt 4 — Füge eine mobilspezifische Regel hinzu:

@media (max-width: 749px) {
    .section-features {
        padding-top: 32px;
        padding-bottom: 32px;
    }
}

Passe die Werte an, bis sich die Abstände richtig anfühlen. Eine gute Faustregel: Mobiles Padding sollte in etwa die Hälfte des Desktop-Paddings betragen (für die meisten Abschnittstypen).

CSS-Custom-Properties für globale Abstände

Moderne Shopify-Themes (besonders Dawn und dessen Ableger) verwenden CSS Custom Properties, um Abstände global zu steuern. In Dawn werden diese Variablen in den Theme-Einstellungen > Layout (Grid-Abstand-Schieberegler) festgelegt und in der theme.liquid ausgegeben. Ändere also zuerst die Schieberegler. Die Ausgabe sieht in etwa so aus:

:root {
    --page-width: 1200px;
    --grid-mobile-horizontal-spacing: 10px;
    --grid-mobile-vertical-spacing: 10px;
}

Das Ändern dieser Werte wirkt sich sofort auf die Abstände deines gesamten Themes aus. Das ist effizienter, als einzelne Abschnitte anzusprechen, aber Vorsicht — eine globale Änderung kann unbeabsichtigte Auswirkungen auf viele Seiten haben.

Methode 3 — Fudge für Abstandsanpassungen

Wenn du Abstände über mehrere Abschnitte hinweg anpassen möchtest, ohne nach Klassennamen zu suchen oder CSS-Variablen anzufassen, beschreibe die Änderung einfach Fudge, dem KI-Operator für Shopify-Stores. Sein Store-Editor verwandelt normale Sprache in Theme-CSS:

“Reduziere das Top- und Bottom-Padding bei allen Abschnitten auf mobilen Bildschirmen um etwa 30%.”

Oder etwas genauer:

“Der Hero-Abschnitt hat auf dem Smartphone unten zu viel Padding — ziehe den nächsten Abschnitt näher heran.”

Fudge generiert die CSS-Änderungen als Entwurf zur Überprüfung, sodass du auf deinem Smartphone durch die Vorschau scrollen kannst, bevor etwas veröffentlicht wird. Layouts, die auf kleinen Bildschirmen kaputtgehen, gehören auch zu den Dingen, auf die es achtet, wenn du es fragst, wo mobile Käufer abspringen.

Häufige Probleme mit mobilen Abständen und Lösungen

Zu viel Platz zwischen Abschnitten. Meistens dadurch verursacht, dass beide Abschnitte ein großes Top- und Bottom-Padding haben. Reduziere das Bottom-Padding im ersten Abschnitt oder das Top-Padding im zweiten.

Text zu nah am Bildschirmrand. Abschnitte brauchen auf dem Smartphone horizontales Padding. Suche nach padding-left/padding-right oder einer .page-width Container-Klasse, die die horizontalen Ränder (Margins) steuert.

Bilder ohne Margin darunter. Wenn Bilder und Text übereinander gestapelt werden, hilft ein Abstand dazwischen bei der Lesbarkeit. Füge auf mobilen Geräten margin-bottom zu den Bild-Containern hinzu.

Schriftgröße zu groß für Mobile. Große Desktop-Überschriften können auf dem Smartphone ungünstige Zeilenumbrüche erzwingen. Nutze Media Queries, um die font-size von Überschriften bei kleinen Breakpoints zu reduzieren.

Um die Reihenfolge zu ändern, in der Abschnitte auf dem Smartphone gestapelt werden, sieh dir an, wie du dein mobiles Layout in Shopify neu anordnest.

Mobile Abstände richtig testen

Die mobile Vorschau im Theme Editor ist nützlich, aber nicht perfekt. Für richtiges Testen:

• Chrome DevTools — F12 → Smartphone-Icon → iPhone- oder Android-Preset auswählen
• Testen auf echten Geräten — Nichts schlägt den Test auf dem eigenen Handy
• BrowserStack — Auf mehreren echten Geräten testen, wenn du eine ganze Bandbreite von Bildschirmgrößen abdecken willst

Typische mobile Größen zum Testen: 375px (iPhone SE), 390px (iPhone 14/15), 412px (Android), 768px (iPad).

FAQ