So änderst du Padding und Margin in Shopify (2026)

Die wichtigsten Erkenntnisse

• Einige Themes bieten Padding-Regler (Innenabstand) in den Abschnittseinstellungen im Theme-Editor.
• Für die volle Kontrolle über Padding und Margin (Außenabstand) benötigst 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.

Um das Padding in Shopify zu ändern, öffne einen Abschnitt im Theme-Editor und ziehe die Regler für “Padding top” (Abstand oben) und “Padding bottom” (Abstand unten). Für Margins oder Abschnitte ohne Regler musst du CSS hinzufügen.

Warum du uns vertrauen kannst

Wir haben Hunderte von Shopify-Storefronts erstellt und angepasst. Wir entwickeln auch Fudge, den KI-Operator für Shopify-Stores, mit einer Bewertung von 4.9 im Shopify App Store.

Padding vs. Margin - eine kurze Erklärung

Diese beiden Eigenschaften werden oft verwechselt.

Padding (Innenabstand) ist der Abstand 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 Kanten des Abschnitts.

Margin (Außenabstand) ist der Abstand außerhalb eines Elements, zwischen dem Element und seinen Nachbarn. Wenn du den Margin eines Abschnitts erhöhst, wird er von benachbarten Abschnitten oder Elementen weggedrückt.

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

Methode 1 - Abschnitts-Padding im Theme Editor ändern

Moderne Shopify-Themes enthalten oft Padding-Regler unten in den Abschnittseinstellungen.

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 Panels. Suche nach den Reglern für Padding top (Abstand oben) und Padding bottom (Abstand unten).

Schritt 4. Ziehe die Regler auf den gewünschten Wert. Die Vorschau wird in Echtzeit aktualisiert.

Schritt 5. Klicke auf Speichern.

Das ist die schnellste Option – kein Code erforderlich. Wenn die Regler nicht vorhanden sind, bietet dein Theme für diesen Abschnitt keine Padding-Steuerung, und du benötigst Methode 2.

Wenn du Abstandsänderungen lieber beschreiben möchtest, anstatt sie von Hand einzustellen, sieh dir den Fudge Store Editor an.

Methode 2 - Padding und Margin mit CSS ändern

Schritt 1. Dupliziere zuerst dein Theme: Gehe zu Onlineshop > Themes, klicke auf das Drei-Punkte-Menü (…) neben deinem Theme und dann auf Duplizieren.

Schritt 2. Klicke beim Duplikat auf das Drei-Punkte-Menü (…) und dann auf 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 hinzu:

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

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

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

Schritt 5. Klicke auf Speichern.

Ein einfacher .shopify-section-Selektor greift auch beim Header, Footer und der Ankündigungsleiste. In Dawn und den meisten aktuellen Themes befinden sich diese außerhalb des <main>-Elements, sodass main .shopify-section nur die eigentlichen Abschnitte der Seite ändert.

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 funktioniert auch für margin.

Den richtigen CSS-Selektor finden

Klicke mit der rechten Maustaste auf das Element, das du anpassen möchtest, in deinem Browser und wähle Untersuchen (Inspect). Schau dir die Klassennamen des Elements im HTML-Panel an - das sind deine CSS-Selektoren.

Responsives Padding für Mobile

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

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

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

Weitere mobile Fixes findest du unter So verbesserst du die mobilen Abstände in Shopify.

Häufige Szenarien

Für die Zeilenhöhe und den Abstand zwischen Textzeilen siehe So bearbeitest du Abstände in Shopify.

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

Fudge, der KI-Operator für Shopify-Stores, wendet CSS-Änderungen an, die du in ganz normalen Worten beschreibst. Du musst nicht die richtige Datei finden, den Selektor identifizieren oder das CSS selbst schreiben.

“Erhöhe das Padding oben und unten bei allen Homepage-Abschnitten auf 80px auf dem Desktop und 40px auf Mobilgeräten.”

“Füge auf der gesamten Website mehr Platz unter H2-Überschriften hinzu.”

Fudge schreibt das CSS als Entwurf in dein Theme. Du überprüfst die Abstände auf dem Desktop und Smartphone in der Vorschau und veröffentlichst sie, wenn alles gut aussieht. Wenn nicht, kannst du die Änderung über den Verlauf rückgängig machen.

FAQ