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 Abschnittseinstellungen.
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 zum Ende des Panels. 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 wird in Echtzeit aktualisiert.
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 Padding-Steuerung an, und Sie benötigen Methode 2.
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.
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:
/* 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 aus einfachem Englisch anwenden. Sie müssen nicht die richtige Datei finden, den Selector identifizieren oder das CSS selbst schreiben.
„Erhöhe das Padding oben und unten in allen Abschnitten der Startseite auf 80px auf dem Desktop und 40px auf dem Handy.“
„Füge mehr Platz unter H2-Überschriften auf der gesamten Website hinzu.“
Fudge schreibt den Code, wendet ihn als Entwurf an, und Sie prüfen ihn vor der Veröffentlichung.
