Padding & Margin in Shopify ändern (2026)

Wichtige Erkenntnisse

Einige Themes bieten Padding-Slider in den Abschnittseinstellungen im Theme Editor an.

Für die volle Kontrolle über Padding und Margin benötigen Sie CSS im Assets-Ordner Ihres Themes.

Padding ist der Platz innerhalb eines Elements; Margin ist der Platz außerhalb eines Elements.

Duplizieren Sie immer Ihr Theme, bevor Sie CSS-Dateien bearbeiten.

Fudge kann CSS-Abstandsänderungen basierend auf einer einfachen englischen Beschreibung schreiben und anwenden.

Padding und Margin steuern, wie Elemente „atmen“. Der Theme Editor bietet Ihnen bei einigen Abschnitten grundlegende Padding-Optionen. Für spezifischere Anpassungen benötigen Sie 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 Platz innerhalb eines Elements (zwischen dem Inhalt und dem Rahmen des Elements). Margin ist der Platz außerhalb eines Elements (zwischen diesem Element und seinen Nachbarn). Nutze Padding für etwas „Luft zum Atmen“ innerhalb einer Section; nutze Margin für den Abstand zwischen Sections oder zwischen Absätzen und Buttons.

Warum werden meine CSS-Padding-Änderungen nicht angezeigt?

CSS-Spezifität (Specificity). Die Padding-Slider für Sections im Theme Editor wenden Inline-Styles oder Regeln mit hoher Spezifität an, die dein benutzerdefiniertes CSS überschreiben. Entweder du passt dich der Spezifität des Themes an (z. B. .shopify-section .container { padding: ... }), verwendest !important sehr sparsam oder stellst den Slider im Theme Editor auf null, bevor du eigenes CSS hinzufügst.

Welches Padding sollten Homepage-Sections auf dem Handy haben?

Ein guter Ausgangspunkt sind 30–50px oben/unten auf Mobile und 60–100px auf Desktop. Größere Abstände wirken modern, können den Inhalt auf kleinen Bildschirmen aber aus dem sofort sichtbaren Bereich (below the fold) schieben. Nutze eine Media Query, damit Mobile und Desktop nicht denselben Wert verwenden.

Kann ich das Padding nur auf der Startseite ändern und die Produktseiten unberührt lassen?

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

Wirkt sich das Anpassen von Padding auf die Ladezeit der Shopify-Seite aus?

Nein. Padding und Margin sind rein visuell — sie fügen keine Bytes, Scripts oder render-blockierenden Prozesse hinzu. Die Website-Geschwindigkeit hängt von Bildern, JavaScript, Fonts und Apps ab. Du kannst die Abstände frei anpassen, ohne dir Sorgen um die Performance machen zu müssen.