Summary  
This chapter explains how to create and import a custom CSS file, use CSS selectors to override default styles (such as headings and paragraphs), and import external fonts via @import.  

General domain of usage  
Front-end web styling and theme customization.

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
1. **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;
2. **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:
```css
@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;
}
```
3. **Verknüpfen Ihrer CSS-Datei mit Ihrem Theme**: Gehen Sie zur Datei `layout/theme.liquid` und fügen Sie die folgende Zeile vor dem schließenden `</head>`-Tag ein, um Ihre neue CSS-Datei zu verknüpfen:
```html
{{ 'custom.css' | asset_url | stylesheet_tag }}
```
4. **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.

Wo erstellen Sie eine neue CSS-Datei in Shopify?

Was ändert der bereitgestellte CSS-Code?

Wie importiert man eine eigene CSS-Datei in das Shopify-Theme?

Warum ist es sinnvoll, eigene CSS-Anpassungen vorzunehmen?

Was ist der Zweck des Imports der Schriftart `Poppins` im Beispiel?

Lernen Sie, Ihren eigenen Online-Shop mit Shopify zu erstellen und anzupassen. Richten Sie Ihren Shop ein, navigieren Sie durch das Admin-Dashboard und fügen Sie Produkte hinzu. Erstellen und bearbeiten Sie Seiten, laden Sie Medien hoch und wenden Sie grundlegende Stiloptionen an, um Ihre Marke widerzuspiegeln. Verwenden Sie den Shopify-Theme-Editor, um Layouts und Produktkollektionen anzupassen. Richten Sie Zahlungen, Versand und Shop-Richtlinien ein, starten und verwalten Sie anschließend Ihren Shop.

Erlernen Sie die Grundlagen der Shopify-Einrichtung und Theme-Anpassung. Von der Kontoerstellung über die Navigation im Admin-Dashboard und der Theme-Struktur bis hin zum Aufbau einer Grundlage zur individuellen Gestaltung Ihres Shops und der Nachbildung des „Taste“-Themes.

Erstellen Sie das Fundament Ihres Shops mit wichtigen Seiten, Medien und grundlegender Gestaltung. Lernen Sie, essenzielle Seiten wie Startseite, Über uns und Kontakt zu erstellen und zu bearbeiten, Ihre Medienressourcen zu verwalten und einfache CSS-Anpassungen vorzunehmen, um das Erscheinungsbild Ihres Shops zu personalisieren. Erwerben Sie praktische Fähigkeiten im Umgang mit Theme-Assets, um sowohl das Aussehen als auch die Funktionalität Ihres Shopify-Shops zu verbessern.

Beherrschung der Shop-Anpassung mit dem Shopify Theme Editor. Untersuchung der Anpassung von Layouts, Personalisierung von Theme-Abschnitten und Erstellung individueller Designs. Einrichtung und Anzeige von Produktkollektionen sowie Konfiguration von Produktfiltern und Sortieroptionen zur Optimierung des Einkaufserlebnisses für Kunden.

Erweitern Sie Ihre Anpassungsfähigkeiten mit themespezifischen Tools und wichtigen Testmethoden. Erfahren Sie, wie Sie Animationen erstellen, die Responsivität sicherstellen und Probleme beheben, um ein reibungsloses Benutzererlebnis zu gewährleisten. Schließen Sie Ihren Lernweg mit einer abschließenden Überprüfung und der Bereitstellung ab, um Ihren individuell gestalteten Shopify-Shop souverän zu veröffentlichen.

Grundlegende CSS-Anpassung

Schritte

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?