Padding & Margin in Shopify ändern (2026)

Das Wichtigste in Kürze

Einige Themes bieten in den Abschnittseinstellungen im Theme-Editor Schieberegler für das Padding an.

Für die volle Kontrolle über Padding und Margin benötigst du CSS im Assets-Ordner deines Themes.

Padding ist der Abstand innerhalb eines Elements, Margin der Abstand außerhalb eines Elements.

Dupliziere immer dein Theme, bevor du CSS-Dateien bearbeitest.

Fudge kann CSS-Änderungen für Abstände aus einer einfachen Textbeschreibung erstellen und anwenden.

Padding und Margin (Innen- und Außenabstände) bestimmen, wie viel Raum Elemente zum Atmen haben. Der Theme-Editor bietet für einige Abschnitte grundlegende Padding-Einstellungen. Für alles Spezifischere brauchst du CSS. Hier ist eine klare Anleitung für beides.

Warum Sie uns vertrauen können

Wir haben hunderte von Shopify-Storefronts erstellt und angepasst. Wir haben auch Fudge entwickelt – einen KI-Storefront-Editor mit einer 5,0-Bewertung im Shopify App Store.

Padding vs. Margin – eine kurze Erklärung

Diese beiden Eigenschaften werden oft verwechselt.

Padding (Innenabstand) ist der Platz innerhalb eines Elements, zwischen dem Inhalt des Elements und seinem Rand. Wenn Sie das Padding eines Abschnitts erhöhen, wird der Inhalt nach innen gedrückt – weg von den Rändern des Abschnitts.

Margin (Außenabstand) ist der Platz außerhalb eines Elements, zwischen dem Element und seinen Nachbarn. Wenn Sie den Margin eines Abschnitts erhöhen, wird dieser von angrenzenden Abschnitten oder Elementen weggeschoben.

Für visuelle Abstände zwischen Seitenabschnitten ist meist Padding die richtige Wahl. Für Abstände zwischen einzelnen Elementen wie Absätzen, Überschriften und Buttons ist Margin das, was Sie brauchen.

Methode 1 – Abschnitts-Padding im Theme Editor ändern

Moderne Shopify-Themes enthalten oft Padding-Slider am Ende der Abschnitts-Einstellungen.

Schritt 1. Gehen Sie zu Onlineshop > Themes > Anpassen.

Schritt 2. Klicken Sie in der linken Seitenleiste auf einen Abschnitt, um dessen Einstellungen zu öffnen.

Schritt 3. Scrollen Sie im Panel nach unten. Suchen Sie nach den Schiebereglern für Abstand oben (Padding top) und Abstand unten (Padding bottom).

Schritt 4. Ziehen Sie die Slider auf den gewünschten Wert. Die Vorschau aktualisiert sich in Echtzeit.

Schritt 5. Klicken Sie auf Speichern.

Dies ist die schnellste Option – kein Code erforderlich. Falls die Slider nicht vorhanden sind, bietet Ihr Theme für diesen Abschnitt keine Steuerung für das Padding an, und Sie benötigen Methode 2.

Ähnlich: Fudge Store Editor.

Methode 2 – Padding und Margin mit CSS ändern

Schritt 1. Duplizieren Sie zuerst Ihr Theme: Onlineshop > Themes > Aktionen > Duplizieren.

Schritt 2. Gehen Sie bei Ihrem aktiven Theme auf Aktionen > Code bearbeiten.

Schritt 3. Öffnen Sie Assets > base.css (oder das Haupt-Stylesheet – die größte .css-Datei im Assets-Ordner).

Schritt 4. Fügen Sie Ihre CSS-Regeln ganz unten hinzu:

/* Padding innerhalb eines Abschnitts hinzufügen */
.shopify-section { padding-top: 60px; padding-bottom: 60px; }

/* Margin unter Überschriften hinzufügen */
h2 { margin-bottom: 1.5rem; }

/* Abstand zwischen Absatz und Button verringern */
.button { margin-top: 1rem; }

Schritt 5. Klicken Sie auf Speichern.

CSS Padding Kurzschreibweise

/* Alle vier Seiten: oben rechts unten links */
.element { padding: 40px 20px 40px 20px; }

/* Oben/Unten | Links/Rechts */
.element { padding: 40px 20px; }

/* Alle Seiten gleich */
.element { padding: 40px; }

Dieselbe Kurzschreibweise funktioniert auch für margin.

Den richtigen CSS-Selector finden

Klicken Sie mit der rechten Maustaste auf das Element, das Sie anpassen möchten, und wählen Sie Untersuchen (Inspect). Schauen Sie sich die Klassennamen des Elements im HTML-Panel an – das sind Ihre CSS-Selectoren.

Benötigen Sie präzise Padding- oder Margin-Änderungen, ohne CSS zu schreiben?

Try Fudge for Free

Verwandt: Speed Up a Shopify Theme.

Verwandt: Change Heading Font Size in Shopify.

Responsives Padding für Mobilgeräte

Padding, das auf dem Desktop gut aussieht, wirkt auf dem Handy oft zu groß. Verwenden Sie eine Media Query, um es auf kleinen Bildschirmen zu reduzieren:

Ähnlich: Mobile Abstände in Shopify verbessern.

/* Desktop padding */
.shopify-section { padding-top: 80px; padding-bottom: 80px; }

/* Mobile padding */
@media (max-width: 768px) {
  .shopify-section { padding-top: 40px; padding-bottom: 40px; }
}

Gängige Szenarien

Was Sie erreichen wollen	Vorgehensweise
Mehr Platz über/unter einem Abschnitt	Theme Editor > Abschnitt > Slider für Abstand oben/unten
Engeres Padding innerhalb eines Content-Blocks	CSS: `padding` auf der Block-Klasse
Abstand zwischen Überschrift und Absatz	CSS: `margin-bottom` auf der Überschrift
Unerwünschte Lücke über dem ersten Abschnitt entfernen	Theme Editor: Padding oben für diesen Abschnitt reduzieren
Einheitliche Abschnittsabstände auf allen Seiten	CSS: `.shopify-section` mit `padding`-Regeln ansteuern

Fudge für Padding- und Margin-Änderungen nutzen

Fudge kann CSS-Änderungen anhand einfacher englischer Anweisungen umsetzen. Du musst nicht die richtige Datei finden, den Selektor identifizieren oder das CSS selbst schreiben.

“Increase the top and bottom padding on all homepage sections to 80px on desktop, 40px on mobile.”

“Add more space below H2 headings across the site.”

Fudge schreibt den Code, wendet ihn als Entwurf an, und du überprüfst alles vor der Veröffentlichung.

FAQ

Was ist der Unterschied zwischen Padding und Margin in Shopify?

Padding ist der Abstand innerhalb eines Elements (zwischen dem Inhalt und dem Rand). Margin ist der Abstand außerhalb eines Elements (zwischen diesem Element und seinen Nachbarn). Nutze Padding, um Elementen in einem Abschnitt Raum zum Atmen zu geben. Nutze Margin für den Abstand zwischen Abschnitten oder zwischen Texten und Buttons.

Warum werden meine CSS-Änderungen für das Padding nicht angezeigt?

Das liegt an der CSS-Spezifität. Die Schieberegler für das Padding im Theme-Editor erzwingen Inline-Styles oder Regeln mit hoher Spezifität, die dein eigenes CSS überschreiben. Passe entweder die Spezifität des Themes an (z. B. .shopify-section .container { padding: ... }), setze sparsam !important ein, oder setze den Regler im Theme-Editor auf null, bevor du eigenes CSS hinzufügst.

Welches Padding sollten Startseiten-Abschnitte auf mobilen Geräten haben?

Ein guter Richtwert sind 30–50px oben/unten für mobile Geräte und 60–100px für den Desktop. Größere Abstände sehen modern aus, schieben den Inhalt auf kleinen Bildschirmen jedoch schnell in den unsichtbaren Bereich (below the fold). Nutze eine Media Query, damit Mobile und Desktop nicht denselben Wert verwenden.

Kann ich das Padding nur auf der Startseite ändern und die Produktseiten so belassen?

Ja. Shopify fügt der Body-Klasse auf der Startseite template-index hinzu. Beschreibe Fudge einfach die Änderung ("add 80px top padding only to homepage sections") und das Tool schreibt das passende, auf das Template beschränkte CSS. Der manuelle Weg: Beschränke deine eigene Regel auf body.template-index .shopify-section.

Beeinflusst das Anpassen des Paddings die Ladezeit meiner Shopify-Seite?

Nein. Padding und Margin sind rein optisch – sie fügen keine Datenmengen, Skripte oder renderblockierende Aufgaben hinzu. Die Ladezeit wird durch Bilder, JavaScript, Schriftarten und Apps beeinflusst. Du kannst Abstände bedenkenlos anpassen, ohne Leistungseinbußen befürchten zu müssen.