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-Steuerelemente auf Abschnittsebene an. Damit kannst du Abstände über und unter einzelnen Abschnitten hinzufügen oder entfernen.
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 zum Ende des Einstellungsfensters für den Abschnitt. Suche nach den Reglern für Padding oben und Padding unten (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 in den meisten Abschnitten. Ältere Themes oft nicht.
Methode 2 – Zeilenabstand (line-height) mit CSS ändern
Der Zeilenabstand – die vertikale Lücke zwischen Textzeilen innerhalb eines Absatzes – wird durch die CSS-Eigenschaft line-height gesteuert. Der Theme-Editor bietet hierfür keine direkte Einstellung an.
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 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.
line-height-Werte: 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 im Browser mit der rechten Maustaste auf das Element, für das du den Abstand ändern willst, wähle Untersuchen (Inspect) und lies die Klassennamen im HTML. Verwende diese als deine CSS-Selektoren.
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.
