Das Wichtigste in Kürze
- Section-Padding (der Abstand über/unter einem Abschnitt) lässt sich oft in den Einstellungen des Theme-Editors anpassen.
- Zeilenabstand (line-height) und Margins von Elementen erfordern CSS im Assets-Ordner deines Themes.
- Dupliziere dein Theme, bevor du CSS-Dateien bearbeitest.
- Fudge kann präzise Abstandsänderungen basierend auf einer einfachen Beschreibung vornehmen.
Um Abstände in Shopify zu bearbeiten, ziehe im Theme-Editor die Regler für Padding top (Abstand oben) und Padding bottom (Abstand unten). Für den Zeilenabstand und den Abstand zwischen Elementen fügst du CSS zum Stylesheet deines Themes hinzu.
Warum du uns vertrauen kannst
Wir haben Hunderte von Shopify-Storefronts erstellt und angepasst. Wir entwickeln auch Fudge, den KI-Operator für Shopify-Stores, mit einer 4.9-Bewertung im Shopify App Store.
Methode 1 – Abschnittsabstände im Theme-Editor anpassen
Viele Shopify-Themes bieten Padding-Einstellungen auf Abschnittsebene. Damit kannst du den Abstand über und unter einzelnen Abschnitten vergrößern oder verkleinern.
Schritt 1. Gehe zu Onlineshop > Themes > Anpassen.
Schritt 2. Klicke in der linken Seitenleiste auf einen Abschnitt, um seine Einstellungen zu öffnen.
Schritt 3. Scrolle im Einstellungsfenster des Abschnitts nach unten. Suche nach den Reglern für Padding top und Padding bottom (manchmal auch als „Abstand oben“ und „Abstand unten“ bezeichnet).
Schritt 4. Ziehe 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 für die meisten Abschnitte. Ältere Themes oft nicht.
Für ein komplettes Redesign der Startseite, schau dir an, wie du deine Shopify-Startseite neu aufbaust.
Methode 2 – Zeilenabstand (line-height) mit CSS ändern
Der Zeilenabstand – die vertikale Lücke zwischen Textzeilen in einem Absatz – wird über die CSS-Eigenschaft line-height gesteuert. Der Theme-Editor bietet dafür keine direkte Einstellung.
Schritt 1. Dupliziere dein Theme: Gehe zu Onlineshop > Themes, klicke auf das Drei-Punkte-Menü (…) neben deinem Theme und dann auf Duplizieren.
Schritt 2. Klicke beim Duplikat auf das Drei-Punkte-Menü (…) und dann auf Code bearbeiten.
Schritt 3. Öffne Assets > base.css (oder das Haupt-Stylesheet deines Themes).
Schritt 4. Füge unten in 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.
Werte für line-height: Ein einheitenloser Wert wie 1.8 bedeutet das 1,8-fache der Schriftgröße. Fließtext liest sich bei 1.5 bis 1.8 am besten.
Mehr Details zu Padding und Margin findest du unter Wie man Padding und Margin in Shopify ändert.
Methode 3 – Abstände zwischen Elementen mit CSS anpassen
Margin ist der Außenabstand eines Elements – die Lücke zwischen einem Element und dem nächsten. Ein größerer Margin sorgt für mehr Platz zwischen Überschriften, Absätzen und Buttons.
Schritt 1. Befolge die gleichen Schritte wie in 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
Mache in deinem Browser einen Rechtsklick auf das Element, dessen Abstand du ändern möchtest, wähle Untersuchen (Inspect) und lies die Klassennamen im HTML ab. Nutze diese als deine CSS-Selektoren.
Informationen zu Überschriftengrößen findest du unter Wie man die Schriftgröße von Überschriften in Shopify ändert.
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 eng aneinander | Theme-Editor > Abschnitt > Padding top/bottom 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 top reduzieren |
| Abstände auf Mobile sehen falsch aus | CSS mit Media Query: @media (max-width: 749px) { ... } |
Für Smartphone-Layouts schau dir an, wie du die mobilen Abstände in Shopify verbesserst.
Fudge für Abstandsänderungen nutzen
Wenn du lieber kein CSS schreiben möchtest, kann Fudge, der KI-Operator für Shopify-Stores, Abstandsänderungen präzise anwenden. Beschreibe einfach, was du willst:
„Erhöhe den Zeilenabstand des Fließtexts auf 1.8.“
„Füge auf Produktseiten mehr Platz zwischen dem Produkttitel und dem Preis hinzu.“
„Reduziere das Top-Padding im Hero-Bereich der Startseite.“
Fudge liest zuerst den Code deines Themes, sodass das geschriebene CSS zur Struktur deines Themes passt, anstatt einfach Overrides oben drauf zu packen. Es zeigt dir einen Entwurf, bevor etwas veröffentlicht wird.
FAQ
Wie viel vertikalen Abstand sollten Abschnitte zueinander haben?
Gute Ausgangswerte: 60–100px auf dem Desktop (Padding oben und unten kombiniert), 30–50px auf Mobile. Passe es an die Funktion des Abschnitts an – ein Hero-Bereich braucht mehr Luft zum Atmen als ein Produkt-Raster. Ein einheitlicher vertikaler Rhythmus über alle Abschnitte hinweg wirkt durchdachter als willkürliche Abstände pro Abschnitt.
Sollte ich em oder rem für Abstände in Shopify verwenden?
rem für die meisten Fälle – es skaliert mit der Root-Schriftgröße, was globale Abstandsänderungen einfach macht. Verwende em für Abstände, die mit der lokalen Schriftgröße skalieren sollen (z. B. Margin um große Überschriften, der proportional zur Überschrift wirken soll). Vermeide px für Padding/Margin, wenn du möchtest, dass es responsiv skaliert.
Warum ist ganz oben auf meiner Shopify-Startseite so viel leerer Platz?
Die drei häufigsten Ursachen: (1) Für den ersten Abschnitt ist im Theme-Editor ein Padding top eingestellt, (2) die Announcement-Bar (Ankündigungsleiste) fügt vertikalen Platz hinzu, oder (3) ein fixierter Header mit einem Spacer-Element reserviert diese Höhe. Untersuche es mit den Browser-DevTools, um herauszufinden, welches Element den Inhalt nach unten drückt – oder beschreibe Fudge einfach, was du siehst ("es gibt zusätzlichen leeren Platz oben auf der Startseite; entferne ihn") und Fudge diagnostiziert und behebt die Ursache, anstatt sie nur mit einem negativen Margin zu übertünchen.
Sollte line-height eine Einheit haben oder einheitenlos sein?
Einheitenlos. line-height: 1.6 skaliert mit der Schriftgröße des Elements; line-height: 24px nicht. Einheitenlose Werte vererben sich vorhersehbar auf Child-Elemente mit unterschiedlichen Schriftgrößen. Verwende 1.4–1.6 für Überschriften, 1.5–1.8 für Fließtext. Engerer Zeilenabstand für große Display-Texte; lockerer für lange Lesetexte.
Kann ich Abstände im Tailwind-Stil für Shopify-Themes nutzen?
Ja – aber du müsstest Tailwind manuell zum Theme hinzufügen (die meisten Shopify-Themes haben es nicht integriert). Für die meisten Stores ist das Overkill. Füge lieber ein kleines Set an Spacing-Utility-Klassen hinzu, wenn du einheitliche Werte möchtest (z. B. .mt-8 { margin-top: 2rem; }), ohne gleich den kompletten Tailwind-Build zu integrieren. Bei komplett neuen Projekten macht Tailwind über Shopifys Hydrogen mehr Sinn als ein nachträglicher Einbau.
