Das Wichtigste in Kürze
- Das Section Padding (Abstand über/unter einem Abschnitt) ist oft in den Einstellungen des Theme-Editors anpassbar.
- Zeilenabstände (line-height) und Element-Margins erfordern CSS im Assets-Ordner deines Themes.
- Erstelle ein Duplikat deines Themes, bevor du CSS-Dateien bearbeitest.
- Fudge kann präzise Abstandsänderungen basierend auf 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 feingliedrige Abstände wie Zeilenhöhe und Element-Margins (die CSS erfordern). So gehst du beides an.
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
Gängige Richtwerte: 60–100px auf dem Desktop (Top- und Bottom-Padding kombiniert), 30–50px auf Mobile. Passe die Abstände je nach Rolle der Sektion an – ein Hero-Bereich braucht mehr Freiraum als ein Product-Grid. Ein konsistenter vertikaler Rhythmus über alle Sektionen hinweg wirkt professioneller als willkürliche Abstände pro Sektion.
In den meisten Fällen rem – es skaliert mit der Root-Schriftgröße (Root Font Size), was globale Anpassungen der Abstände einfach macht. Verwende em für Abstände, die mit der lokalen Schriftgröße skalieren sollen (z. B. Margin um große Überschriften, das proportional zur Überschrift selbst wirken soll). Vermeide px für Padding/Margin, wenn du eine responsive Skalierung möchtest.
Dafür gibt es drei häufige Gründe: (1) Für die erste Sektion ist im Theme-Editor ein Top-Padding eingestellt, (2) die Announcement-Bar (Ankündigungsleiste) sorgt für vertikalen Platz, oder (3) der Header hat position: sticky und reserviert dadurch Höhe. Untersuche die Seite mit den Browser-DevTools, um das Element zu identifizieren, das den Inhalt nach unten schiebt – oder beschreibe Fudge einfach, was du siehst ("es gibt einen unerwünschten Abstand ganz oben auf der Startseite; entferne ihn"). Fudge diagnostiziert und behebt dann die tatsächliche Ursache, anstatt das Problem nur mit einem negativen Margin zu kaschieren.
Einheitenlos. line-height: 1.6 skaliert mit der font-size des Elements; line-height: 24px tut dies nicht. Einheitenlose Werte vererben sich vorhersehbar auf Kind-Elemente mit unterschiedlichen Schriftgrößen. Nutze 1.4–1.6 für Überschriften und 1.5–1.8 für Fließtext. Etwas engere line-height bei großen Display-Texten; etwas großzügiger für längere Lesetexte.
Ja – aber du müsstest Tailwind manuell in das Theme integrieren (die meisten Shopify-Themes haben es nicht standardmäßig dabei). Für die meisten Stores ist das Overkill. Füge stattdessen lieber ein kleines Set an Spacing-Utility-Klassen hinzu, wenn du einheitliche Werte haben möchtest (z. B. .mt-8 { margin-top: 2rem; }), ganz ohne den kompletten Tailwind-Build. Bei neu entwickelten Projekten ergibt Tailwind in Kombination mit Shopifys Hydrogen deutlich mehr Sinn als das nachträgliche Einbauen in ein Theme.
