Hinzufügen von benutzerdefiniertem CSS zu deinem Theme
CSS (Cascading Style Sheet) ändert die Darstellung von Elementen in deinem Theme und kann das Aussehen mehrerer Seiten gleichzeitig steuern. Mit der Funktion "Benutzerdefiniertes CSS" kannst du dein Theme über die integrierten Einstellungen hinaus anpassen. Du kannst benutzerdefiniertes CSS zu deinem gesamten Theme hinzufügen oder zu einem bestimmten Abschnitt einer Vorlage in deinem Theme. Benutzerdefiniertes CSS wird auf der Seite Checkout nicht unterstützt.
Es erfordert einige Kenntnisse von CSS und HTML, dein CSS anzupassen. Bevor du dein Theme anpasst, solltest du dich darüber informieren, welche Unterstützung dafür verfügbar ist.
Auf dieser Seite
Überlegungen zur Verwendung von benutzerdefiniertem CSS
Bevor du benutzerdefiniertes CSS zu deinem Theme hinzufügst, solltest du die folgenden Überlegungen beachten:
-
Die folgenden CSS-Auswahlmöglichkeiten werden in benutzerdefiniertem CSS nicht unterstützt:
- Regeln für
@import,@charsetund@namespacekönnen nicht verwendet werden - Für CSS auf Abschnittsebene sind nur die Regeln
@media,@container,@layerund@supportszulässig - Für CSS auf Abschnittsebene kannst du die ID oder die Klassen des einschließenden Shopify-Abschnittselements, das vom Theme gerendert wird, nicht mit der
shopify-section-Klasse erreichen
- Regeln für
Wenn eine Regel für benutzerdefiniertes CSS mit dem Tag angegeben wird, das das übergeordnete Abschnittselement umschließt, wird es als absteigendes Tag betrachtet und die Stilregel wird auf diesen Abschnitt angewendet. Beachte, dass der übergeordnete Abschnitt von einem
<div>-Tag umschlossen ist. Dieses kann jedoch von Theme-Entwicklern auf jeden der zulässigen Werte im Abschnittsschema festgelegt werden.Derzeit ist nur die Domain https://cdn.shopify.com zulässig, wenn URLs in benutzerdefiniertem CSS verwendet werden.
Benutzerdefinierte Schriftarten sind nicht eingeschränkt. Benutzerdefinierte Schriftarten sind jedoch eine separate Ressource, die von Browsern heruntergeladen werden, bevor Text gerendert wird. Dies kann sich auf die Gesamtleistung eines Shops auswirken. Es liegt in deiner Verantwortung, sicherzustellen, dass deine Storefront von benutzerdefinierten Schriftarten nicht negativ betroffen ist. Erfahre, wie du benutzerdefinierte Schriftarten in deinem Theme verwendest.
CSS-Regeln, die sich auf das gesamte Theme auswirken, sind auf 1500 Zeichen begrenzt.
CSS-Regeln, die einen bestimmten Abschnitt betreffen, sind auf 500 Zeichen begrenzt.
Abhängig von den von dir ausgewählten CSS-Auswahlmöglichkeiten und Klassen kann das Aktualisieren deines Theme dazu führen, dass dein benutzerdefiniertes CSS nicht mehr funktioniert.
Shopify unterstützt keine erweiterten Theme-Anpassungen. Wenn in deinem benutzerdefinierten CSS ein Fehler bezüglich dieser Einschränkungen auftritt und du nicht ermitteln kannst, was den Fehler verursacht, sieh dir die Liste anderer verfügbarer Support-Ressourcen an.
Benutzerdefiniertes CSS hinzufügen
Benutzerdefiniertes CSS kann zu deinem gesamten Theme hinzugefügt werden. Dies hat Auswirkungen auf alle Seiten deines Onlineshops mit Ausnahme der Seite Checkout. Du kannst beispielsweise ändern, wie Schaltflächen in deinem gesamten Shop angezeigt werden.
Schritte:
- Gehe im Shopify-Adminbereich zu Onlineshop > Themes.
- Klicke auf Einrichten.
- Klicke auf Theme-Einstellungen.
- Klicke auf Benutzerdefiniertes CSS.
- Füge deinen Code hinzu.
- Klicke auf Speichern.
Benutzerdefiniertes CSS kann auch zu einem bestimmten Abschnitt deines Themes hinzugefügt werden. Wenn du einem Abschnitt deines Themes benutzerdefiniertes CSS hinzufügst, wird die CSS-Sprache bereichsbezogen auf diesen Abschnitt angewendet. Du kannst beispielsweise eine benutzerdefinierte Schriftgröße oder eine Hintergrundfarbe auf einen einzelnen Abschnitt anwenden.
Schritte:
- Gehe im Shopify-Adminbereich zu Onlineshop > Themes.
- Klicke auf Einrichten.
- Klicke auf den Abschnitt, zu dem du CSS hinzufügen möchtest.
- Klicke unten im Fenster mit den Abschnittseigenschaften auf Benutzerdefiniertes CSS.
- Füge deinen Code hinzu.
- Klicke auf Speichern.
Zusätzliche Ressourcen für CSS
Es erfordert einige Kenntnisse von CSS und HTML, dein CSS anzupassen. Bevor du dein Theme anpasst, solltest du dich darüber informieren, welche Unterstützung dafür verfügbar ist.
Wenn du mehr über CSS erfahren möchtest, kannst du dich in einigen der folgenden Ressourcen informieren: