Tutorial

Shopify Custom CSS: Sektions-Farben und Schriftarten ändern [2025 Easy Guide]

Melden

Hier ist ein aktueller, leicht verständlicher Guide für 2025, wie du deinen Shopify-Store mit Custom CSS individualisierst.

Du nutzt ein Shopify-Theme (wie Dawn, Sense oder Refresh), aber die Standard-Einstellungen reichen nicht aus? Kein Problem. Seit den OS 2.0 Updates ist es einfacher denn je, CSS direkt im Editor einzufügen, ohne den gesamten Theme-Code bearbeiten zu müssen.

In diesem Guide lernst du, wie du gezielt Farben und Schriftarten einzelner Abschnitte änderst.

Schritt 1: Den Custom CSS Bereich finden

Shopify hat für jede Sektion ein eigenes Feld für CSS-Code reserviert.

  1. Gehe in deinem Shopify-Adminbereich auf Onlineshop > Themes.
  2. Klicke bei deinem aktuellen Theme auf Anpassen (Customize).
  3. Klicke im Editor links auf die Sektion, die du bearbeiten möchtest (z. B. "Rich Text" oder "Bild mit Text").
  4. Scrolle im rechten Einstellungs-Panel ganz nach unten bis zum Punkt Custom CSS.

Schritt 2: Hintergrundfarben einer Sektion ändern

Manchmal bietet das Theme nur bestimmte "Farbschemata" an. Mit CSS kannst du jede beliebige Farbe wählen.

Der Code: Gib dies im Feld "Custom CSS" der Sektion ein:

.section-id {
  background-color: #ff5733; /* Ersetze dies durch deinen Hex-Code */
}

Pro-Tipp 2025: In den meisten modernen Themes kannst du das Wort .section-id weglassen oder durch & (als Platzhalter für die aktuelle Sektion) ersetzen:

& {
  background-color: #f0f0f0;
}

Schritt 3: Schriftarten und Textfarben anpassen

Du möchtest, dass die Überschrift in einer Sektion anders aussieht als im Rest des Shops?

Überschriften (H2) ändern:

h2 {
  font-family: 'Arial', sans-serif; /* Deine Wunsch-Schriftart */
  color: #2c3e50; /* Deine Wunsch-Farbe */
  font-size: 40px; /* Größe anpassen */
  font-weight: bold; /* Fettdruck */
}

Fließtext (Paragraph) ändern:

p {
  color: #666666;
  line-height: 1.6;
  font-size: 18px;
}

Schritt 4: Die richtige "Klasse" finden (Inspect Tool)

Wenn der obige Code nicht reagiert, musst du herausfinden, wie Shopify das Element nennt.

  1. Öffne deine Store-Vorschau im Chrome-Browser.
  2. Mache einen Rechtsklick auf das Element (z. B. einen Button oder Text) und wähle Untersuchen (Inspect).
  3. Suche im Code nach der Klasse (sieht aus wie class="rich-text__heading").
  4. Nutze diesen Namen in deinem Custom CSS:
.rich-text__heading {
  color: red !important;
}

(Das !important hilft dabei, die Standard-Einstellungen von Shopify zu überschreiben.)

Schritt 5: Bonus-Trick – Verläufe (Gradients)

Gradients sind 2025 ein großer Design-Trend. So fügst du einen Verlauf als Hintergrund für eine Sektion hinzu:

& {
  background: linear-gradient(90deg, #ff9a9e 0%, #fecfef 99%, #fecfef 100%);
}

Häufige Fehler vermeiden

  1. Backup machen: Bevor du größere Änderungen machst, dupliziere dein Theme unter Aktionen > Duplizieren.
  2. Mobile Ansicht prüfen: CSS-Änderungen sehen auf dem Desktop oft gut aus, können aber auf dem Handy den Text abschneiden. Nutze die mobile Vorschau im Editor!
  3. Hex-Codes nutzen: Verwende Tools wie Adobe Color, um exakte Farbcodes zu finden.

Zusammenfassung

Mit dem Feld Custom CSS direkt in den Sektions-Einstellungen sparst du Zeit und hältst deinen Code sauber. Du musst kein Programmierer sein, um kleine visuelle Highlights zu setzen – ein paar Zeilen Code genügen, um deinen Shopify Store 2025 professionell aussehen zu lassen!

0