Wie füge ich benutzerdefiniertes CSS zu meinem ganzen Shop oder zu einem Abschnitt hinzu?

CSS ändert, wie dein Shop aussieht: Farben, Abstände, Größen und mehr. Du kannst dein eigenes CSS an zwei Stellen in dem Builder hinzufügen: für den ganzen Shop oder nur für einen Abschnitt.

Benutzerdefiniertes CSS für den ganzen Shop

Klicke auf das Zahnrad-Symbol und öffne den Tab Benutzerdefiniertes CSS. Das Feld heißt CSS-Code: Gilt für den gesamten Shop. Dein CSS wird auf jeder Seite des Marktes geladen, den du bearbeitest, und die Vorschau zeigt das Ergebnis.

Nutze es für Regeln, die überall gelten müssen, zum Beispiel um ein Element auf allen Seiten auszublenden oder den Stil aller Buttons zu ändern. So schreibt h1 { text-transform: uppercase; } den Haupttitel jeder Seite in Großbuchstaben.

Benutzerdefiniertes CSS für einen Abschnitt

Wähle einen Abschnitt im Tab Abschnitte aus. Öffne unten in seinen Einstellungen den Tab Benutzerdefiniertes CSS. Sein Feld CSS-Code sagt Gilt nur für diesen Abschnitt. Die meisten Abschnitte haben es, auch Kopfzeile, Fußzeile, Hero, Produktinfo und Kasse.

Das ist die sicherere Wahl. Storeep setzt den Abschnitt vor jeden deiner Selektoren, daher können deine Regeln nichts außerhalb davon ändern.

• h2 { letter-spacing: 2px; } ändert nur die Titel in diesem Abschnitt.
• Nutze &, um den Abschnitt selbst zu gestalten: & { border-top: 1px solid #000; }.
• @media-Regeln funktionieren. Die Regeln darin sind ebenfalls auf den Abschnitt begrenzt.
• @keyframes-Animationen bleiben so, wie du sie geschrieben hast.

Das Abschnitts-CSS gehört zu diesem Abschnitt auf dieser Seite. Nutze Auf alle Seiten anwenden beim Abschnitt, um den Abschnitt samt CSS auf deine anderen Seiten zu kopieren, die ihn enthalten. Siehe Auf alle Seiten anwenden.

Welches du nutzen solltest

• Ein Abschnitt sieht falsch aus: nutze das benutzerdefinierte CSS des Abschnitts.
• Dieselbe Änderung wird überall gebraucht: nutze den Einstellungs-Tab Benutzerdefiniertes CSS.
• Prüfe vor dem Schreiben von CSS, ob eine Einstellung das schon erledigt: Farben findest du in den Farbschemata, Schriften in den Schrift-Einstellungen, und Ecken und Schatten kommen von deinem Theme.

Wenn dein CSS nicht funktioniert

• Prüfe, ob ein } oder ; fehlt. Ein einziger Fehler kann die Regeln danach stoppen.
• Deine Regel ist vielleicht schwächer als die Regel des Themes. Mache den Selektor genauer.
• Beginne deinen Selektor im Abschnitts-CSS nicht mit body oder html. Sie liegen außerhalb des Abschnitts, daher greift die Regel nicht.
• Wenn die Seite kaputt aussieht, entferne deine letzte Änderung, veröffentliche und füge die Regeln einzeln wieder hinzu.

Gut zu wissen

• Benutzerdefiniertes CSS gehört zu dem Markt, den du bearbeitest. Wiederhole es in jedem Markt, der es braucht.
• Ein Theme-Wechsel kann Klassennamen und Layout ändern, prüfe also nach einem Theme-Wechsel dein benutzerdefiniertes CSS.
• Änderungen werden live, wenn du auf Veröffentlichen klickst.
• Für HTML und Code innerhalb einer Seite siehe Eigener Code.