Tutorials

Wie man eine CSS-Klasse zu einer Shopify-Sektion hinzufügt [2025 Easy Guide]

Melden

Hier ist ein aktueller und leicht verständlicher Guide für das Jahr 2025, wie du CSS-Klassen zu deinen Shopify-Sektionen hinzufügen kannst – sowohl für Anfänger als auch für Fortgeschrittene.

Die individuelle Gestaltung deines Shopify-Shops ist entscheidend für ein professionelles Branding. Seit der Einführung von Online Store 2.0 ist es einfacher denn je, spezifische Sektionen mit CSS anzupassen. In diesem Tutorial lernst du zwei Wege: den schnellen Weg über den Editor und den flexiblen Weg über den Code.

Methode 1: Der einfachste Weg über den Theme-Editor (OS 2.0)

Seit 2024/2025 verfügen fast alle modernen Shopify-Themes (wie Dawn, Sense oder Prestige) über ein eingebautes Feld für eigenes CSS direkt in der Sektions-Einstellung.

Schritt 1: Den Editor öffnen

  1. Logge dich in dein Shopify-Admin-Dashboard ein.
  2. Gehe zu Onlineshop > Themes.
  3. Klicke bei deinem aktuellen Theme auf Anpassen (Customize).

Schritt 2: Die Sektion auswählen

  1. Klicke in der linken Seitenleiste auf die Sektion, die du stylen möchtest (z. B. "Mehrspaltig" oder "Bild mit Text").
  2. Scrolle in den Einstellungen der Sektion (rechts oder links, je nach Version) ganz nach unten.

Schritt 3: Eigenes CSS hinzufügen

  1. Suche das Feld Eigener CSS-Code (Custom CSS).
  2. Anstatt eine Klasse im HTML zu benennen, kannst du hier direkt CSS schreiben, das nur für diese Sektion gilt.
  3. Verwende das Kürzel &, um die Sektion direkt anzusprechen:
& {
  background-color: #f5f5f5;
  border-radius: 20px;
  padding: 50px;
}

Hinweis: Das & Zeichen fungiert hier als Platzhalter für die automatisch generierte ID dieser spezifischen Sektion.

Methode 2: Eine dauerhafte CSS-Klasse im Code hinzufügen (Für Profis)

Wenn du eine Klasse hinzufügen möchtest, um sie global in deinem Stylesheet (base.css oder theme.css) zu verwenden, musst du das Liquid-File der Sektion bearbeiten.

Schritt 1: Code-Editor öffnen

  1. Gehe zu Onlineshop > Themes.
  2. Klicke auf die drei Punkte (...) neben "Anpassen" und wähle Code bearbeiten.

Schritt 2: Sektions-Datei finden

  1. Suche im Ordner Sections nach der entsprechenden Datei (z. B. image-with-text.liquid oder rich-text.liquid).

Schritt 3: Klasse im HTML einfügen

  1. Suche nach dem ersten <div> oder dem <section> Tag am Anfang der Datei.
  2. Füge deine eigene Klasse hinzu. Es sieht oft so aus:

Vorher:

<div class="image-with-text">

Nachher:

<div class="image-with-text meine-custom-klasse">

Schritt 4 (Optional): Dynamische Klasse über die Einstellungen

Wenn du die Klasse im Editor selbst eintippen möchtest, musst du das Schema am Ende der Datei anpassen:

  1. Suche nach "settings": [
  2. Füge diesen Code-Block hinzu:
    {
"type": "text",
"id": "custom_class",
"label": "Eigene CSS Klasse"
},
  3. Gehe zurück nach oben zum HTML-Tag und verknüpfe es:
    <div class="image-with-text {{ section.settings.custom_class }}">

Bonus-Tipp: Wo schreibe ich das eigentliche Design (CSS)?

Wenn du Methode 2 nutzt, musst du dein CSS irgendwo definieren.

  1. Gehe im Code-Editor zu Assets.
  2. Suche nach base.css oder theme.css.
  3. Füge am Ende der Datei dein Styling hinzu:
.meine-custom-klasse {
    border: 2px solid #000;
    box-shadow: 10px 10px 5px grey;
}

Zusammenfassung: Welchen Weg soll ich wählen?

  • Wähle Methode 1, wenn du nur schnell das Aussehen einer einzigen Sektion auf einer einzigen Seite ändern willst. Es ist sicher und beeinträchtigt keinen anderen Teil deines Shops.
  • Wähle Methode 2, wenn du ein Design-System erstellst (z. B. eine Klasse .shadow-box), die du immer wieder an verschiedenen Sektionen verwenden möchtest.

Wichtig für 2025:

Shopify priorisiert mittlerweile die Sektions-spezifischen CSS-Felder (Methode 1), da dies die Ladezeiten optimiert. CSS wird nur geladen, wenn die Sektion auch tatsächlich auf der Seite vorhanden ist.

Hast du Fragen zu einem spezifischen Theme? Schreib es einfach in die Kommentare!

0