Benutzerdefinierter Code

Ausgewählte Links

1. Shopify-Dokumentation zu Abschnitten und Blöcken
2. Company XYZ-Dokumentation zum Abschnitt für benutzerdefinierten Code
3. Company XYZ-Dokumentation zum Block für benutzerdefinierte Ressourcen
4. Company XYZ-Dokumentation zum Custom-CSS-Block
5. Company XYZ-Dokumentation zum Custom-JavaScript-Block

Hilfreiche Videos

Video der Shopify Academy: Ihren Shop anpassen

Video der Shopify Academy: Ihren Shop anpassen

Verwenden Sie diesen Abschnitt, um benutzerdefiniertes CSS, JavaScript oder vollständige Asset-Einbettungen direkt in einer Vorlage zu platzieren. Er eignet sich am besten für erweiterte, seitenbezogene Änderungen wie Stilüberschreibungen, eingebettete Dienste oder Skripts, die nur in einem bestimmten Bereich geladen werden sollen.

Benutzerdefinierter Code kann Layout, Leistung, Barrierefreiheit und interaktives Verhalten beeinflussen. Testen Sie Änderungen vor der Veröffentlichung sorgfältig auf Desktop und Mobilgeräten.

Grundeinstellungen

Dieser Abschnitt enthält keine visuellen Abschnittssteuerungen. Stattdessen erstellen Sie ihn mit Blöcken, damit CSS, JavaScript und externe Asset-Einschlüsse getrennt bleiben und sich leichter verwalten lassen. Einen umfassenderen Überblick über die Struktur des Theme-Editors finden Sie in der Shopify-Dokumentation zu Abschnitten und Blöcken

Der Hilfetext des Abschnitts enthält die kanonische Referenz für Benutzerdefinierter Code. In der Praxis eignet sich dieser Abschnitt am besten, wenn Sie benutzerdefiniertes Verhalten auf Vorlagenebene benötigen statt umfassenderer Änderungen auf Website-Ebene.

Unterstützte Blocktypen

1. Benutzerdefinierter Asset
2. Benutzerdefiniertes CSS
3. Benutzerdefiniertes JavaScript

Blockreferenz

Benutzerdefinierter Asset

Verwenden Sie diesen Block, wenn Sie einen vollständigen Asset-Einschluss einfügen müssen, etwa einen Stylesheet-Link oder ein externes Skript-Tag. Er ist die richtige Wahl für Dienste von Drittanbietern, die eine vollständige Einbettung oder ein Asset-Snippet bereitstellen, statt nur rohes CSS oder JavaScript. Die Blockreferenz finden Sie unter Benutzerdefinierter Asset-Block.

1. Verwenden Sie einen Block pro Dienst oder Datei, damit Aktualisierungen und Fehlersuche einfach bleiben.
2. Verwenden Sie diesen Block für vollständige Asset-Einschlüsse statt für eigenständige CSS-Regeln oder JavaScript-Code.

Editor-Einstellungen

Sie können einen Editor-Titel für den Block festlegen, damit er in der Seitenleiste leichter zu identifizieren ist. Das ist besonders hilfreich, wenn Sie derselben Abschnittsgruppe mehrere Dienste oder Dateien hinzufügen.

Benutzerdefiniertes CSS

Verwenden Sie diesen Block, um CSS-Regeln direkt in die Vorlage einzufügen, ohne sie in style-Tags einzuschließen. Er eignet sich für kleine, gezielte visuelle Überschreibungen, die nur in diesem Vorlagenkontext gelten sollen. Die Blockreferenz finden Sie unter Benutzerdefiniertes CSS-Block.

Tipp

Halten Sie Selektoren eng begrenzt, damit das CSS nur den vorgesehenen Bereich beeinflusst und nach zukünftigen Theme-Aktualisierungen leichter zu pflegen ist.

1. Fügen Sie nur CSS-Regeln ein.
2. Verwenden Sie diesen Block für fokussierte Überschreibungen statt für umfangreiche benutzerdefinierte Stylesheets.

Editor-Einstellungen

Sie können den Block im Editor umbenennen, damit sein Zweck deutlich wird, etwa als Korrektur für Abstände oder Anpassung für eine Landingpage. Klare Titel erleichtern eine spätere Bereinigung erheblich.

Benutzerdefiniertes JavaScript

Verwenden Sie diesen Block, um JavaScript direkt in die Vorlage einzufügen, ohne Skript-Tags. Er eignet sich gut für eingebettete Widgets, die Initialisierung von Diensten oder kleine interaktive Verhaltensweisen, die an die aktuelle Vorlage gebunden sind. Die Blockreferenz finden Sie unter Benutzerdefiniertes JavaScript-Block.

Achtung

Ein JavaScript-Fehler kann andere Seitenfunktionen unterbrechen. Wenn nach einer Änderung etwas nicht mehr funktioniert, deaktivieren Sie zuerst den neuesten Skriptblock und testen Sie erneut.

1. Fügen Sie nur JavaScript ein.
2. Trennen Sie nicht zusammenhängende Skripts in verschiedene Blöcke, damit sich jede Änderung leichter prüfen oder entfernen lässt.

Editor-Einstellungen

Verwenden Sie den Editor-Titel, um das Skript nach Dienst oder Zweck zu kennzeichnen. Das ändert nichts am Frontend, erleichtert aber die laufende Wartung erheblich.

Standard-Abschnittseinstellungen

Dieser Abschnitt enthält keine gemeinsamen Einstellungen für Layout, Abstand, Hintergrund, Sichtbarkeit oder Breite. Sein Verhalten hängt vollständig von den Blöcken ab, die Sie hinzufügen, und von dem darin platzierten Code.

Nutzungshinweise

1. Passen Sie den Block an die Aufgabe an. Verwenden Sie Benutzerdefiniertes CSS für Stilregeln, Benutzerdefiniertes JavaScript für Skriptlogik und Benutzerdefinierter Asset, wenn Sie einen vollständigen externen Einschluss einfügen müssen.
2. Halten Sie Änderungen modular. Teilen Sie nicht zusammenhängende Anpassungen in separate Blöcke auf, damit Sie Probleme schnell eingrenzen und eine Änderung entfernen können, ohne andere zu beeinflussen.
3. Benennen Sie Blöcke klar. Verwenden Sie aussagekräftige Editor-Titel, damit wiederkehrende Snippets später leicht zu identifizieren bleiben.
4. Erwarten Sie, dass der Blockinhalt das Ergebnis bestimmt. Das Hinzufügen von Blöcken kann einfache Inhalte auf Abschnittsebene ersetzen oder sie um zusätzliche Einbettungen und Verhaltensweisen erweitern. Überprüfen Sie daher die fertige Vorlage nach jeder Änderung.
5. Testen Sie wichtige Abläufe. Prüfen Sie nach jeder Code-Änderung wichtige Seitenaktionen, responsive Layouts und eingebettete Dienste.
6. Beschränken Sie vorlagenspezifischen Code. Fügen Sie nur hinzu, was diese Vorlage benötigt, um Konflikte, Wartungsaufwand und unnötige Seitenlast zu reduzieren.