Padding & Margin in Shopify ändern (2026)

Das Wichtigste in Kürze

Einige Themes bieten Padding-Slider in den Abschnitts-Einstellungen im Theme Editor.

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

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

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

Fudge kann CSS-Abstandsänderungen anhand einer einfachen Beschreibung schreiben und anwenden.

Padding und Margin steuern, wie viel Luft Elemente zum Atmen haben. Der Theme Editor bietet dir bei einigen Abschnitten grundlegende Padding-Einstellungen. Für spezifischere Anpassungen brauchst du CSS. Hier ist eine einfache Anleitung für beides.

Warum Sie uns vertrauen können

Wir haben Hunderte von Shopify-Storefronts erstellt und angepasst. Außerdem haben wir Fudge entwickelt – einen KI-Storefront-Editor mit einer Bewertung von 4.9 im Shopify App Store.

Padding vs. Margin – eine kurze Erklärung

Diese beiden Eigenschaften verwechselt man leicht.

Padding (Innenabstand) ist der Platz innerhalb eines Elements, zwischen dem Inhalt des Elements und seinem Rand. Wenn du das Padding eines Abschnitts erhöhst, 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 du den Margin eines Abschnitts erhöhst, rückt er weiter von benachbarten Abschnitten oder Elementen ab.

Für optische Lücken zwischen Seitenabschnitten ist Padding meistens die richtige Wahl. Für Abstände zwischen einzelnen Elementen wie Absätzen, Überschriften und Buttons ist Margin das, was du brauchst.

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. Dupliziere zuerst 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 - die größte .css-Datei im Assets-Ordner).

Schritt 4. Füge deine CSS-Regeln ganz unten ein:

/* 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. Klicke 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;
}

Die gleiche Kurzschreibweise (Shorthand) 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

Ein Padding, das auf dem Desktop gut aussieht, wirkt auf dem Smartphone (“Mobile”) oft zu groß. Verwende eine Media Query, um es auf kleinen Bildschirmen zu reduzieren:

Verwandt: 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 du erreichen willst	Wie du es umsetzt
Mehr Platz über/unter einem Abschnitt	Theme Editor > Abschnitt > Padding oben/unten Slider
Geringeres Padding innerhalb eines Inhaltsblocks	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 bei diesem Abschnitt reduzieren
Einheitliche Abschnittsabstände auf allen Seiten	CSS: `.shopify-section` mit `padding`-Regeln anvisieren

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 des Elements). Margin ist der Abstand außerhalb eines Elements (zwischen diesem Element und seinen Nachbarn). Verwende Padding für etwas 'Luft zum Atmen' innerhalb eines Abschnitts; verwende Margin für die Lücke zwischen Abschnitten oder zwischen Absätzen und Buttons.

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

CSS-Spezifität. Die Padding-Slider im Theme Editor verwenden Inline-Styles oder Regeln mit hoher Spezifität, die dein eigenes CSS überschreiben. Passe entweder die Spezifität an das Theme an (z. B. .shopify-section .container { padding: ... }), verwende !important sparsam oder setze den Slider im Theme Editor auf null, bevor du CSS hinzufügst.

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

Ein guter Startwert sind 30–50px oben/unten auf Mobile und 60–100px auf Desktop. Größere Lücken sehen zwar modern aus, schieben den Inhalt auf kleinen Bildschirmen aber oft 'below the fold' (in den nicht sichtbaren Bereich). Nutze eine Media Query, damit Mobile und Desktop nicht denselben Wert teilen.

Kann ich das Padding nur auf der Startseite ändern und Produktseiten in Ruhe lassen?

Ja. Shopify fügt auf der Startseite template-index zur Body-Klasse hinzu. Beschreibe die Änderung für Fudge ("Füge nur den Startseiten-Abschnitten 80px Padding oben hinzu") und das Tool schreibt das Template-spezifische CSS für dich. Manueller Weg: Begrenze deine eigene Regel auf body.template-index .shopify-section.

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

Nein. Padding und Margin sind rein optisch — sie fügen keine Bytes, Skripte oder renderblockierenden Prozesse hinzu. Die Seiten-Geschwindigkeit hängt von Bildern, JavaScript, Schriftarten und Apps ab. Du kannst die Abstände völlig bedenkenlos anpassen, ohne dir Sorgen um die Performance zu machen.