Erfolgreich
Benutzerdefiniertes CSS
Verwenden Sie benutzerdefiniertes CSS für präzise Styling-Anpassungen, wenn Standard-Einstellungen nicht ausreichen.
Verwenden Sie diesen Block, wenn Sie eine Stil-Anpassung benötigen, die mit den verfügbaren Einstellungen nicht umsetzbar ist. Er ermöglicht es Ihnen, gezieltes CSS für den aktuellen Template-Bereich hinzuzufügen. Das ist nützlich für kleinere Anpassungen wie Abstände, Typografie, Ausrichtung oder Layoutkorrekturen. Weitere Informationen dazu, wo Blöcke in einem Theme platziert sind, finden Sie in der Shopify-Dokumentation zu Abschnitten und Blöcken
Geben Sie nur CSS ein, ohne <style>-Tags. Breite Selektoren oder ungültige Regeln können mehr von der Seite beeinflussen, als Sie beabsichtigt haben.
Grundeinstellungen
Abschnitt betitelt „Grundeinstellungen“Das Codefeld ist der Ort, an dem Sie Ihr CSS hinzufügen. Dieser Block eignet sich am besten für fokussierte Änderungen mit klaren Selektoren und weniger für große Sammlungen seitenweiter Stile. Eine Übersicht über den Editor selbst finden Sie in der Shopify-Dokumentation zum Theme-Editor
Halten Sie Regeln so spezifisch und so minimal wie möglich. Kleinere, klar abgegrenzte Anpassungen lassen sich leichter testen, einfacher pflegen und brechen weniger wahrscheinlich, wenn Sie Inhalte aktualisieren oder benachbarte Blöcke anpassen.
Wenn Sie eine Schritt-für-Schritt-Anleitung wünschen, sehen Sie sich die vom Quelltext bereitgestellte Referenz Benutzerdefiniertes CSS an.
Standard-Block-Einstellungen
Abschnitt betitelt „Standard-Block-Einstellungen“Editor-Einstellungen
Abschnitt betitelt „Editor-Einstellungen“Diese Einstellungen wirken sich nur darauf aus, wie der Block in der Editor-Seitenleiste angezeigt wird. Verwenden Sie den Editor-Titel, um den Zweck des CSS klar zu kennzeichnen, insbesondere wenn Sie mehrere Custom-CSS-Blöcke zum selben Template hinzufügen.
Nutzungshinweise
Abschnitt betitelt „Nutzungshinweise“- Selektoren eng halten. Zielbereich so klein wie möglich wählen, damit Ihr CSS andere Inhalte nicht unbeabsichtigt neu gestaltet.
- Für Ausnahmen verwenden. Greifen Sie zuerst auf die integrierten Design-Steuerelemente zurück und verwenden Sie diesen Block dann für Anpassungen, die diese Steuerelemente nicht abdecken können.
- Blöcke klar benennen. Legen Sie einen Editor-Titel fest, der die Änderung beschreibt, etwa eine Korrektur des Abstands oder eine mobile Typografie-Anpassung.
- Kleinere Bildschirme prüfen. Testen Sie Ihr CSS auf mobilen und Tablet-Layouts, um sicherzustellen, dass Abstände, Umbrüche und Ausrichtung weiterhin gut funktionieren.
- Nicht zu viel hier speichern. Verwenden Sie diesen Block für kurze Anpassungen, nicht als Sammelstelle für umfangreiche benutzerdefinierte Stilsysteme.