Die wichtigsten Punkte
- Das Padding von Abschnitten (Abstand über/unter einem Abschnitt) lässt sich oft in den Abschnitts-Einstellungen im Theme-Editor anpassen.
- Ein Zeilenabstand (line-height) und Außenabstände von Elementen (Margins) erfordern CSS im Assets-Ordner deines Themes.
- Dupliziere dein Theme, bevor du CSS-Dateien bearbeitest.
- Fudge kann präzise Abstandsänderungen basierend auf einer ganz normalen Textbeschreibung vornehmen.
Abstände (Spacing) in Shopify lassen sich in zwei Kategorien unterteilen: Abschnitts-Padding (welches oft vom Theme-Editor gesteuert wird) und feinere Abstände wie Zeilenabstände und Margins von Elementen (welche CSS erfordern). Hier erfährst du, wie du mit beidem umgehst.
Warum du uns vertrauen kannst
Wir haben hunderte von Shopify-Storefronts erstellt und angepasst. Außerdem haben wir Fudge entwickelt – einen KI-Storefront-Editor mit einer 5,0-Sterne-Bewertung 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 – also der vertikale Abstand zwischen Textzeilen innerhalb eines Absatzes – wird durch die CSS-Eigenschaft line-height gesteuert. Der Theme Editor bietet hierfür keine direkte Einstellung an.
Weitere Details findest du in unserem Guide zum Thema Padding und Margin in Shopify ändern.
Passend dazu: Mobile Abstände 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 am Ende der Datei folgendes CSS hinzu:
/* Zeilenabstand für 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.
Vorgaben für line-height: Ein einheitenloser Wert wie 1.8 bedeutet das 1,8-fache der Schriftgröße. Die meisten Fließtexte lassen sich bei Werten zwischen 1.5 und 1.8 gut lesen.
Methode 3 – Abstände zwischen Elementen mit CSS anpassen
Margin ist der Raum außerhalb eines Elements – die Lücke zwischen einem Element und dem nächsten. Das Erhöhen des Margins schafft mehr Freiraum zwischen Abschnitten, Überschriften und Absätzen.
Schritt 1. Folge den gleichen Schritten wie bei Methode 2 – Theme duplizieren, Code-Editor öffnen, base.css finden.
Schritt 2. Füge Margin-Regeln hinzu:
/* Abstand unter Überschriften hinzufügen */
h2 { margin-bottom: 1rem; }
/* Abstand zwischen Absätzen hinzufügen */
p { margin-bottom: 1rem; }
/* Abstand unter dem Content-Wrapper eines Abschnitts 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
| Problem | Lösung |
|---|---|
| Abschnitte wirken zu gequetscht | Theme-Editor > Abschnitt > Padding oben/unten erhöhen |
| Text wirkt zu gedrängt | CSS: p { line-height: 1.7; } |
| Überschriften zu nah am Inhalt darunter | CSS: h2 { margin-bottom: 1rem; } |
| Zu viel Platz über dem ersten Abschnitt | Theme-Editor > Abschnitt > Padding oben reduzieren |
| Abstände auf dem Handy sehen falsch aus | CSS mit Media Query: @media (max-width: 768px) { ... } |
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
Gute Richtwerte: 60–100px auf dem Desktop (oberes und unteres Padding kombiniert), 30–50px auf Mobile. Passe es je nach Rolle des Abschnitts an – ein Hero-Bereich braucht mehr Freiraum als ein Produkt-Grid. Ein konsistenter vertikaler Rhythmus über alle Abschnitte hinweg wirkt professioneller als willkürliche Abstände pro Abschnitt.
In den meisten Fällen rem – es skaliert mit der Root-Schriftgröße, was globale Anpassungen einfach macht. Nutze em für Abstände, die mit der lokalen Schriftgröße skalieren sollen (z. B. Margins um große Überschriften, die proportional zur Überschrift wirken sollen). Vermeide px für Padding/Margin, wenn du responsive Skalierung möchtest.
Drei häufige Ursachen: (1) Beim ersten Abschnitt ist im Theme-Editor 'Padding top' eingestellt, (2) die Announcement Bar fügt vertikalen Platz hinzu, oder (3) der Header hat position: sticky und reserviert so die Höhe. Nutze die Browser-DevTools, um herauszufinden, welches Element den Content nach unten drückt – oder beschreibe einfach Fudge was du siehst ("Da ist ein extra Weißraum ganz oben auf der Startseite; entferne ihn") und es diagnostiziert und repariert die Ursache, anstatt sie nur mit einem negativen Margin zu überdecken.
Einheitenlos. line-height: 1.6 skaliert mit der Schriftgröße des Elements; line-height: 24px nicht. Einheitenlose Werte vererben sich berechenbar auf untergeordnete Elemente mit unterschiedlichen Schriftgrößen. Nutze 1.4–1.6 für Überschriften, 1.5–1.8 für Fließtext. Ein engerer Zeilenabstand für Display-Texte; ein größerer für lange Texte.
Ja – aber du müsstest Tailwind manuell zum Theme hinzufügen (die meisten Shopify-Themes haben es nicht integriert). Für die meisten Shops ist das Overkill. Baue dir ein kleines Set von Spacing Utility-Klassen, wenn du konsistente Werte möchtest (z. B. .mt-8 { margin-top: 2rem; }), ohne gleich das ganze Tailwind-Build zu nutzen. Bei neuen Projekten ergibt Tailwind über Shopifys Hydrogen mehr Sinn, als es nachträglich einzubauen.
