Benutzerdefiniertes CSS

Ausgewählte Links

1. Shopify CDN
2. Shopify-Dokumentation zum Hinzufügen von benutzerdefiniertem CSS zu Ihrem Theme
3. Shopify-Admin: Themes
4. Shopify-Dokumentation zur Theme-Unterstützung
5. Shopify-Entwicklerdokumentation zu Schema-Tags von Abschnitten
6. Shopify-Dokumentation zur Web-Performance
7. Shopify-Entwicklerdokumentation zu benutzerdefinierten Schriften
8. Shopify-Dokumentation zu zusätzlichen Supportressourcen
9. Shopify-Dokumentation zu benutzerdefiniertem CSS
10. Shopify-Dokumentation zu Templates

Hilfreiche Videos

Shopify Academy-Video: Ihren Shop anpassen

Shopify Academy-Video: Ihren Shop anpassen

Benutzerdefiniertes CSS hinzufügen

Mit benutzerdefiniertem CSS können Sie Styling-Änderungen an Ihrem Align-Theme vornehmen, wenn die integrierten Einstellungen nicht das gewünschte Ergebnis liefern. Gehen Sie dabei sorgfältig vor und testen Sie Änderungen, bevor Sie sie in Ihrem Live-Shop veröffentlichen.

CSS auf Ihr gesamtes Align-Theme anwenden

Verwenden Sie CSS auf Theme-Ebene für Änderungen, die in Ihrem gesamten Shop erscheinen sollen, beispielsweise für das Styling von Schaltflächen.

1. Gehen Sie in Ihrem Shopify-Admin zu Online Store > Themes
2. Suchen Sie nach Align und klicken Sie dann auf Customize.
3. Klicken Sie auf Theme settings.
4. Klicken Sie auf Custom CSS.
5. Fügen Sie Ihren Code hinzu.
6. Klicken Sie auf Save.

CSS auf Theme-Ebene gilt für alle Seiten des Shops außer Checkout und ist auf 1.500 Zeichen begrenzt.

CSS auf einen Abschnitt anwenden

Verwenden Sie CSS auf Abschnittsebene, wenn eine Änderung nur einen Abschnitt betreffen soll, beispielsweise dessen Schriftgröße oder Hintergrundfarbe.

1. Gehen Sie in Ihrem Shopify-Admin zu Online Store > Themes
2. Suchen Sie nach Align und klicken Sie dann auf Customize.
3. Wählen Sie den Abschnitt aus, den Sie gestalten möchten.
4. Klicken Sie unten im Eigenschaftenbereich des Abschnitts auf Custom CSS.
5. Fügen Sie Ihren Code hinzu.
6. Klicken Sie auf Save.

CSS auf Abschnittsebene ist auf den ausgewählten Abschnitt beschränkt und auf 500 Zeichen begrenzt.

Innerhalb der Grenzen für benutzerdefiniertes CSS arbeiten

Für benutzerdefiniertes CSS benötigen Sie Kenntnisse in CSS und HTML. Eine Anleitung speziell für Align finden Sie zunächst beim Company XYZ-Support. Informationen zu Einschränkungen der Shopify-Plattform und zur allgemeinen Theme-Unterstützung finden Sie in der verfügbaren Theme-Unterstützung

1. Verwenden Sie unterstützte Regeln. @import, @charset und @namespace werden nicht unterstützt. In CSS auf Abschnittsebene sind nur die At-Regeln @media, @container, @layer und @supports zulässig.
2. Zielen Sie sorgfältig auf Abschnittsinhalte. CSS auf Abschnittsebene kann nicht auf die ID oder Klassen des äußeren Wrappers des Abschnitts zielen. Eine Regel, die mit dem Tag des übergeordneten Wrappers beginnt, wird innerhalb dieses Abschnitts als Nachfahrenregel behandelt. Der Wrapper ist normalerweise ein <div>, Themes können jedoch andere zulässige Werte verwenden.
3. Verwenden Sie genehmigte Ressourcen-URLs. URLs in benutzerdefiniertem CSS dürfen nur die Domain https://cdn.shopify.com verwenden.
4. Berücksichtigen Sie die Schriftperformance. Benutzerdefinierte Schriften sind zulässig, aber Browser laden sie vor dem Rendern von Text herunter. Testen Sie ihre Auswirkungen auf die Shop-Performance und sehen Sie nach, wie Sie benutzerdefinierte Schriften in Ihrem Theme verwenden
5. Testen Sie nach Theme-Updates erneut. Änderungen am Theme-Markup, an Selektoren oder Klassen können dazu führen, dass vorhandenes benutzerdefiniertes CSS nicht mehr funktioniert.

Wenn Sie einen Fehler erhalten, den Sie nicht beheben können, wenden Sie sich an den Company XYZ-Support, um Hilfe zu Align zu erhalten, und sehen Sie für Unterstützung bei der Plattform in den zusätzlichen Supportressourcen von Shopify nach.

Nutzungshinweise

1. Beginnen Sie mit den integrierten Einstellungen. Verwenden Sie benutzerdefiniertes CSS nur, wenn die verfügbaren Steuerelemente des Align-Themes nicht das gewünschte Ergebnis liefern.
2. Halten Sie Regeln fokussiert. Verwenden Sie CSS auf Theme-Ebene für einheitliches Styling und CSS auf Abschnittsebene für lokale Anpassungen.
3. Prüfen Sie jede Bildschirmgröße. Testen Sie Änderungen auf Desktop- und Mobilgeräten, bevor Sie sie veröffentlichen.
4. Speichern Sie eine Kopie Ihrer Regeln. Bewahren Sie Ihr CSS an einem zugänglichen Ort auf, damit Sie es nach einem Theme-Update wiederherstellen oder aktualisieren können.