Section CSS überschreiben

Deutsch Diskussion Technische Fragen & Antworten

Topic summary

Ein Nutzer möchte den margin-top-Abstand zwischen Sections auf der Startseite im Shopify-Theme “Craft” mit eigenem CSS überschreiben, findet aber keine Möglichkeit dazu.

Technischer Hintergrund:

  • Das Theme verwendet CSS-Variablen: margin-top: var(--sections-desktop-spacing);
  • Der Code gilt für Bildschirmbreiten ab 750px

Vorgeschlagene Lösung:

  • Verwendung von !important im Custom CSS:
@media screen and (min-width: 750px) {
  .shopify-section.section + .shopify-section.section {
    margin-top: 10px !important;
  }
}
  • Das !important-Schlüsselwort erzwingt das Überschreiben der Theme-Regeln
  • Für mehrere spezifische Anpassungen können verschiedene Selektoren und Werte hinzugefügt werden

Zusätzliche Hinweise:

  • Verweis auf eine Community-Anleitung für CSS-Anpassungen
  • Empfehlung, die Community-Suche für ähnliche Themen zu nutzen
  • Vorschlag zur Implementierung von Gamification-Elementen im Shop

Status: Lösung bereitgestellt, Diskussion offen für weitere Fragen.

Summarized with AI on November 8. AI used: claude-sonnet-4-5-20250929.
1

Hallo,

die verschiedenen Abschnitte/Sections auf der Startseite haben einen Abstand zum darüber liegenden Abschnitt margin-top in dem Theme Craft. Diese kann ich leider nirgendwo mit eigenem CSS überschreiben.

Wo kann ich diesen CSS Wert margin-top des Themes ändern bzw. wie kann ich ihn überschreiben?

Das geladene CSS lautet

@media screen and (min-width: 750px) {
    .section+.section {
        margin-top: var(--spacing-sections-desktop);
    }
}

Der HTML code / die Section auf die sich das CSS bezieht lautet:


Besten Dank für einen Hinweis.

Dirk
2

Hey @Dirk7

Kennst du unsere Anleitung hier? Um das CSS zu überschreiben und den margin-top-Wert zu ändern, kannst du ein CSS einsetzen, wie:

@media screen and (min-width: 750px) {
    .shopify-section.section + .shopify-section.section {
        margin-top: 10px !important; /* Setze deinen gewünschten Wert */
    }
}
  • Das !important Schlüsselwort stellt sicher, dass dein benutzerdefiniertes CSS die vorhandenen CSS-Regeln überschreibt.
  • Wenn du mehrere spezifische Anpassungen vornehmen musst, kannst du verschiedene Selektoren und Werte hinzufügen.

Hoffe das hilft dir weiter - lass wissen falls nicht! :wink:

Warum nicht etwas Gamification in das Shop einbauen, um deinen Kunden etwas Fun im Shop anzubieten? Gerne kann ich bei Interesse Tipps dazu geben!

Hast du weitere Fragen zum Shop? Gebe einfach ein Suchbegriff oben in der Suchleiste der Community Landingpage ein, denn das Thema haben wir sehr wahrscheinlich schon besprochen. Halte bitte Ausschau in deiner E-Mail auf Notifications zu Antworten auf deine Fragen in der Community.