Hilfe
Einloggen

Benutzerdefiniertes CSS zum Theme hinzufügen

Ein Cascading Style Sheet (CSS) ändert die Anzeige von Elementen in deinem Theme und kann das Erscheinungsbild mehrerer Seiten gleichzeitig steuern. Du kannst dein Theme über die integrierten Einstellungen hinaus anpassen, indem du die Funktion für benutzerdefiniertes CSS verwendest. Du kannst beispielsweise mit CSS Farbverläufe festlegen in den Farbeinstellungen deines Themes. Du kannst benutzerdefiniertes CSS zu deinem gesamten Theme oder zu einem bestimmten Abschnitt einer Vorlage in deinem Theme hinzufügen. Benutzerdefiniertes CSS wird auf der Checkout-Seite nicht unterstützt.

Die Anpassung deines CSS erfordert eine gewisse Vertrautheit mit CSS und HTML. Bevor du dein Theme anpasst, solltest du dich darüber informieren, welcher Support verfügbar ist.

Auf dieser Seite

Wichtige Hinweise zur Verwendung von benutzerdefiniertem CSS

Bevor du benutzerdefiniertes CSS zu deinem Theme hinzufügst, beachte die folgenden Hinweise:

  • Die folgenden CSS-Selektoren und -Eigenschaften werden in benutzerdefiniertem CSS nicht unterstützt:
    • Die At-Regeln @import, @charset und @namespace können nicht verwendet werden.
    • Für CSS auf Abschnittsebene sind nur die At-Regeln @media, @container, @layer und @supports zulässig.
    • Für CSS auf Abschnittsebene kannst du nicht auf die ID oder die Klassen des umschließenden Shopify-Abschnittselements abzielen, das vom Theme mit der Klasse shopify-section gerendert wird.
    • Die Eigenschaft content ist in benutzerdefiniertem CSS nicht verfügbar.
  • Wenn eine benutzerdefinierte CSS-Regel mit dem Tag deklariert wird, das das übergeordnete Abschnittselement umschließt, gilt dieses als untergeordnetes Tag und die Styling-Regel wird auf diesen Abschnitt angewendet. Beachte, dass der übergeordnete Abschnitt standardmäßig in einem <div>-Tag eingeschlossen ist, dies kann jedoch von Theme-Entwickler:innen auf einen beliebigen der zulässigen Werte im Abschnittsschema festgelegt werden.
  • Bei der Verwendung von URLs in benutzerdefiniertem CSS ist derzeit nur die Domain https://cdn.shopify.com zulässig.
  • Benutzerdefinierte Schriftarten sind nicht eingeschränkt. Benutzerdefinierte Schriftarten sind jedoch eine separate Ressource, die von Browsern heruntergeladen wird, bevor Text gerendert wird. Dies kann die Gesamtleistung eines Shops beeinträchtigen. Es liegt in deiner Verantwortung sicherzustellen, dass deine Storefront nicht durch benutzerdefinierte Schriftarten negativ beeinflusst wird. Erfahre, wie du benutzerdefinierte Schriftarten in deinem Theme verwenden kannst.
  • CSS-Regeln, die das gesamte Theme betreffen, sind auf 1.500 Zeichen begrenzt.
  • CSS-Regeln, die einen bestimmten Abschnitt betreffen, sind auf 500 Zeichen begrenzt.
  • Abhängig von den verwendeten CSS-Selektoren oder -Klassen kann es passieren, dass dein benutzerdefiniertes CSS nach einer Aktualisierung deines Themes nicht mehr funktioniert.

Shopify bietet keinen Support für erweiterte Theme-Anpassungen. Wenn bei deinem benutzerdefinierten CSS ein Fehler im Zusammenhang mit diesen Einschränkungen auftritt und du die Fehlerursache nicht ermitteln kannst, sieh dir die Liste der anderen verfügbaren Support-Ressourcen an.

Benutzerdefiniertes CSS hinzufügen

Benutzerdefiniertes CSS kann zu deinem gesamten Theme hinzugefügt werden und wirkt sich auf alle Seiten in deinem Onlineshop aus, mit Ausnahme der Checkout-Seite. Beispielsweise kannst du die Anzeige von Schaltflächen in deinem gesamten Shop ändern.

Schritte:

  1. Gehe in deinem Shopify-Adminbereich zu Onlineshop > Themes.

  2. Klicke auf Theme bearbeiten.

  3. Klicke auf Theme-Einstellungen.

  4. Klicke auf Benutzerdefiniertes CSS.

  5. Füge deinen Code hinzu.

  6. Klicke auf Speichern.

Position des Feldes für benutzerdefiniertes CSS in den Theme-Einstellungen

Benutzerdefiniertes CSS kann auch zu einem bestimmten Abschnitt deines Themes hinzugefügt werden. Wenn du einem Abschnitt deines Themes benutzerdefiniertes CSS hinzufügst, ist das CSS auf diesen Abschnitt beschränkt. Beispielsweise kannst du eine benutzerdefinierte Schriftgröße oder eine Hintergrundfarbe auf einen einzelnen Abschnitt anwenden.

Schritte:

  1. Gehe in deinem Shopify-Adminbereich zu Onlineshop > Themes.

  2. Klicke auf Theme bearbeiten.

  3. Klicke auf den Abschnitt, dem du CSS hinzufügen möchtest.

  4. Klicke unten im Panel mit den Abschnittseigenschaften auf Benutzerdefiniertes CSS.

  5. Füge deinen Code hinzu.

  6. Klicke auf Speichern.

Position des Feldes für benutzerdefiniertes CSS in den Abschnittseinstellungen

Weitere Ressourcen für CSS

Die Anpassung deines CSS erfordert eine gewisse Vertrautheit mit CSS und HTML. Bevor du dein Theme anpasst, solltest du dich darüber informieren, welcher Support verfügbar ist.

Wenn du mehr über CSS erfahren möchtest, kannst du dir die folgenden Ressourcen ansehen: