So bearbeitest du Abstände in Shopify (2026)

Die wichtigsten Takeaways

• Section-Padding (Abstand über/unter einem Abschnitt) lässt sich oft in den Abschnittseinstellungen des Theme-Editors anpassen.
• Zeilenabstand (line-height) und Element-Margins erfordern CSS im Assets-Ordner deines Themes.
• Dupliziere dein Theme, bevor du CSS-Dateien bearbeitest.
• Fudge kann präzise Abstandsänderungen anhand einer einfachen englischen Beschreibung vornehmen.

Abstände in Shopify lassen sich in zwei Kategorien unterteilen: Padding auf Abschnittsebene (das oft über den Theme-Editor gesteuert wird) und feinere Abstände wie Zeilenabstände und Element-Margins (für die CSS erforderlich ist). Hier erfährst du, wie du mit beiden umgehst.

Warum du uns vertrauen kannst

Wir haben hunderte Shopify-Storefronts erstellt und angepasst. Außerdem haben wir Fudge entwickelt – einen KI-Storefront-Editor mit einer Bewertung von 4.8 im Shopify App Store.

Methode 1 – Abschnittsabstände im Theme-Editor anpassen

Viele Shopify-Themes bieten Padding-Regler auf Section-Ebene an. Damit kannst du den Abstand oberhalb und unterhalb einzelner Abschnitte vergrößern oder verkleinern.

Passend dazu: Fudge Store Editor.

Passend dazu: Rebuild Your Shopify Homepage.

Schritt 1. Gehe zu Onlineshop > Themes > Anpassen.

Schritt 2. Klicke in der linken Seitenleiste auf einen Abschnitt, um dessen Einstellungen zu öffnen.

Schritt 3. Scrolle im Einstellungsbereich des Abschnitts nach unten. Suche nach den Schiebereglern für Padding oben und Padding unten (manchmal auch als „Abstand oben“ und „Abstand unten“ bezeichnet).

Schritt 4. Bewege die Regler, um den Abstand anzupassen. Die Vorschau wird live aktualisiert.

Schritt 5. Klicke auf Speichern.

Nicht alle Themes haben diese Regler. Das Dawn-Theme enthält sie in den meisten Abschnitten. Ältere Themes oft nicht.

Methode 2 – Zeilenabstand (line-height) mit CSS ändern

Der Zeilenabstand – der vertikale Abstand zwischen den Textzeilen innerhalb eines Absatzes – wird durch die CSS-Eigenschaft line-height gesteuert. Der Theme-Editor bietet dafür keine direkte Einstellungsmöglichkeit.

Weitere Details findest du in unserem Guide zum Ändern von Padding und Margin in Shopify.

Ähnlich: Abstände auf Mobilgeräten in Shopify verbessern.

Schritt 1. Dupliziere dein Theme: Onlineshop > Themes > Aktionen > Duplizieren.

Schritt 2. Gehe bei deinem aktiven Theme auf Aktionen > Code bearbeiten.

Schritt 3. Öffne Assets > base.css (oder das Haupt-Stylesheet deines Themes).

Schritt 4. Füge folgendes CSS am Ende der Datei hinzu:

/* Zeilenabstand für den Fließtext erhöhen */
body {
    line-height: 1.8;
}

/* Zeilenabstand nur für Absätze erhöhen */
p {
    line-height: 1.7;
}

Schritt 5. Klicke auf Speichern.

line-height-Werte: Ein einheitenloser Wert wie 1.8 bedeutet das 1,8-Fache der Schriftgröße. Der meiste Fließtext liest sich bei 1.5 bis 1.8 gut.

Methode 3 – Abstände zwischen Elementen mit CSS anpassen

Margin ist der Abstand außerhalb eines Elements – der Raum zwischen einem Element und dem nächsten. Ein größerer Margin sorgt für mehr Freiraum zwischen Sektionen, Überschriften und Absätzen.

Schritt 1. Befolge die gleichen Schritte wie in Methode 2 – Theme duplizieren, Code-Editor öffnen, base.css finden.

Schritt 2. Margin-Regeln hinzufügen:

/* Abstand unter Überschriften hinzufügen */
h2 {
    margin-bottom: 1rem;
}

/* Abstand zwischen Absätzen hinzufügen */
p {
    margin-bottom: 1rem;
}

/* Abstand unter dem Content-Wrapper einer Sektion erhöhen */
.section-content {
    margin-bottom: 3rem;
}

Schritt 3. Speichern.

Den richtigen Selektor finden

Klicke mit der rechten Maustaste auf das Element im Browser, dessen Abstand du ändern möchtest, wähle Untersuchen und lies die Klassennamen im HTML aus. Nutze diese als deine CSS-Selectoren.

Passend dazu: Überschriften-Schriftgröße in Shopify ändern.

Abstände zwischen Abschnitten vs. Abstände innerhalb von Abschnitten

Diese Unterscheidung ist wichtig:

• Zwischen Abschnitten – gesteuert durch das Padding oben/unten jedes Abschnitts. Nutze die Regler im Theme-Editor, falls vorhanden, oder CSS für den Section-Wrapper.
• Innerhalb von Abschnitten – Abstände zwischen einer Überschrift und einem Absatz, zwischen Listenelementen oder zwischen einem Button und dem Text darüber. Hierfür ist CSS erforderlich, das gezielt die inneren Elemente anspricht.

Gängige Lösungen für Abstände

Fudge für Abstandsänderungen nutzen

Wenn du lieber kein CSS schreiben möchtest, kann Fudge die Abstände präzise anpassen. Beschreibe einfach, was du willst:

“Erhöhe die Zeilenhöhe des Fließtextes auf 1.8.”

“Füge mehr Platz zwischen dem Produkttitel und dem Preis auf den Produktseiten hinzu.”

“Reduziere das Top-Padding im Hero-Bereich der Startseite.”

Fudge schreibt den Code und zeigt dir einen Entwurf, bevor etwas veröffentlicht wird.

FAQ