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 Abstandsänderungen präzise umsetzen. Beschreibe einfach, was du willst (auf Englisch):
“Increase the line height of body text to 1.8.”
“Add more space between the product title and the price on product pages.”
“Reduce the top padding on the homepage hero section.”
Fudge schreibt den Code und zeigt dir einen Entwurf, bevor etwas veröffentlicht wird.
