Grundlegende CSS-Anpassung
Grundlegende CSS-Anpassungen ermöglichen es, das Erscheinungsbild Ihres Shopify-Shops über die Standard-Einstellungen des Themes hinaus zu individualisieren. In diesem Kapitel erfahren Sie, wie Sie eine neue CSS-Datei erstellen und in Ihr Theme importieren, um Stiländerungen vorzunehmen.
Schritte
- Erstellen einer neuen CSS-Datei: Navigieren Sie zu Online Store > Themes > Code bearbeiten und öffnen Sie den Assets-Ordner. Klicken Sie auf Neues Asset hinzufügen, wählen Sie Leere Datei erstellen und benennen Sie diese custom.css;
- Hinzufügen von CSS-Code: Öffnen Sie Ihre
custom.css-Datei und fügen Sie diesen Code hinzu, um Schriftarten zu ändern und die Überschriftenstile anzupassen:
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap');
h2 {
font-family: 'Poppins', sans-serif;
font-size: 42px;
font-weight: 600;
color: #000;
}
- Verknüpfen Ihrer CSS-Datei mit Ihrem Theme: Gehen Sie zur Datei
layout/theme.liquidund fügen Sie die folgende Zeile vor dem schließenden</head>-Tag ein, um Ihre neue CSS-Datei zu verknüpfen:
{{ 'custom.css' | asset_url | stylesheet_tag }}
- Vorschau Ihrer Änderungen: Speichern Sie Ihre Änderungen und sehen Sie sich eine Vorschau Ihres Shops an, um zu überprüfen, wie sich Schriftart und Überschriftenstil geändert haben.
1. Wo erstellen Sie eine neue CSS-Datei in Shopify?
2. Was ändert der bereitgestellte CSS-Code?
3. Wie importiert man eine eigene CSS-Datei in das Shopify-Theme?
4. Warum ist es sinnvoll, eigene CSS-Anpassungen vorzunehmen?
5. Was ist der Zweck des Imports der Schriftart Poppins im Beispiel?
Danke für Ihr Feedback!
Fragen Sie AI
Fragen Sie AI
Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen
Can you explain how to use Google Fonts with Shopify in more detail?
What should I do if my custom CSS changes aren't showing up on my store?
How can I customize other elements besides headings and paragraphs?
Awesome!
Completion rate improved to 6.25Grundlegende CSS-Anpassung
Swipe um das Menü anzuzeigen
Grundlegende CSS-Anpassungen ermöglichen es, das Erscheinungsbild Ihres Shopify-Shops über die Standard-Einstellungen des Themes hinaus zu individualisieren. In diesem Kapitel erfahren Sie, wie Sie eine neue CSS-Datei erstellen und in Ihr Theme importieren, um Stiländerungen vorzunehmen.
Schritte
- Erstellen einer neuen CSS-Datei: Navigieren Sie zu Online Store > Themes > Code bearbeiten und öffnen Sie den Assets-Ordner. Klicken Sie auf Neues Asset hinzufügen, wählen Sie Leere Datei erstellen und benennen Sie diese custom.css;
- Hinzufügen von CSS-Code: Öffnen Sie Ihre
custom.css-Datei und fügen Sie diesen Code hinzu, um Schriftarten zu ändern und die Überschriftenstile anzupassen:
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap');
h2 {
font-family: 'Poppins', sans-serif;
font-size: 42px;
font-weight: 600;
color: #000;
}
- Verknüpfen Ihrer CSS-Datei mit Ihrem Theme: Gehen Sie zur Datei
layout/theme.liquidund fügen Sie die folgende Zeile vor dem schließenden</head>-Tag ein, um Ihre neue CSS-Datei zu verknüpfen:
{{ 'custom.css' | asset_url | stylesheet_tag }}
- Vorschau Ihrer Änderungen: Speichern Sie Ihre Änderungen und sehen Sie sich eine Vorschau Ihres Shops an, um zu überprüfen, wie sich Schriftart und Überschriftenstil geändert haben.
1. Wo erstellen Sie eine neue CSS-Datei in Shopify?
2. Was ändert der bereitgestellte CSS-Code?
3. Wie importiert man eine eigene CSS-Datei in das Shopify-Theme?
4. Warum ist es sinnvoll, eigene CSS-Anpassungen vorzunehmen?
5. Was ist der Zweck des Imports der Schriftart Poppins im Beispiel?
Danke für Ihr Feedback!
