Benutzerdefinierter Code

Ausgewählte Links

1. Shopify-Dokumentation zum Erweitern Ihres Themes
2. Shopify-Dokumentation zum Theme-Editor
3. Shopify-Liquid-Dokumentation
4. Shopify-Liquid-Dokumentation zur Versandrichtlinie des Shops
5. Shopify-Dokumentation zu Liquid-Einstellungen
6. Shopify-Dokumentation zum Hinzufügen von benutzerdefiniertem CSS zu Ihrem Theme
7. Shopify-Dokumentation zu Vorlagen
8. Shopify-Dokumentation zum Theme-Support
9. Shopify-Dokumentation zu Apps
10. Shopify-Dokumentation zu App blocks

Hilfreiche Videos

Shopify Academy-Video: Ihren Shop anpassen

Shopify Academy-Video: Ihren Shop anpassen

Align mit benutzerdefiniertem Code erweitern

Align enthält integrierte Theme-Einstellungen für viele gängige Änderungen. Wenn diese Einstellungen Ihren Anforderungen nicht entsprechen, können Sie Ihr Align-Theme mit benutzerdefiniertem HTML oder Liquid, benutzerdefiniertem CSS, einer App oder direkten Codeänderungen erweitern.

Beginnen Sie mit dem Shopify Theme-Editor, um die in Ihrem aktuellen Align-Theme verfügbaren Einstellungen zu verstehen. Eine Anleitung zur Plattform finden Sie in der Shopify-Dokumentation zum Theme-Editor

Benutzerdefiniertes HTML oder Liquid hinzufügen

Einige Themes enthalten Einstellungen zum Hinzufügen von HTML oder Liquid innerhalb einer Vorlage, eines Abschnitts oder eines Blocks. Mit diesen Einstellungen können Sie unterstützte benutzerdefinierte Inhalte hinzufügen, ohne den Theme-Code direkt zu bearbeiten. Dadurch bleibt Ihr Theme möglicherweise für Updates berechtigt.

Prüfen Sie die Align-Dokumentation, bevor Sie fortfahren, um zu bestätigen, ob Ihr Theme eine Option für benutzerdefiniertes HTML oder Liquid enthält. Sie können einen Custom Liquid-Abschnitt verwenden, um:

1. Liquid-Variablen an Stellen einzufügen, an denen sie Ihr Geschäft unterstützen, beispielsweise um Ihre Versandrichtlinie auf einer Produktseite anzuzeigen.
2. Den für die Integration einer App in Ihr Theme erforderlichen Code hinzuzufügen.

Liquid-Einstellungen bieten Zugriff auf eine begrenzte Auswahl an Liquid-Objekten und -Tags. Unterstützte Optionen finden Sie in der Dokumentation zu Liquid-Einstellungen

Benutzerdefiniertes CSS hinzufügen

CSS steuert, wie Elemente in Ihrem Theme dargestellt werden. Verwenden Sie Shopifys Funktion für benutzerdefiniertes CSS, wenn Sie Änderungen an der Gestaltung benötigen, die über die verfügbaren Align-Einstellungen hinausgehen.

Sie können benutzerdefiniertes CSS im gesamten Theme oder auf einen bestimmten Abschnitt innerhalb einer Vorlage anwenden. Dafür benötigen Sie Kenntnisse in CSS und HTML. Lesen Sie vor dem Ändern die Align-Dokumentation von Company XYZ und die Support-Ressourcen unter Company XYZ Support sowie die Shopify-Anleitung zum verfügbaren Theme-Support

Eine App installieren

Apps können auf verschiedene Weise in Ihr Align-Theme integriert werden:

1. App blocks

   Fügen Sie die App-Funktionalität dort hinzu, wo Sie sie benötigen, und passen Sie sie anschließend im Theme-Editor an oder entfernen Sie sie. App blocks sind nur mit Online Store 2.0-Themes verfügbar. Prüfen Sie bei älteren Themes die App-Auflistung und -Dokumentation auf Kompatibilität.

2. App embeds

   Aktivieren, deaktivieren und konfigurieren Sie von Apps bereitgestellte Overlays, schwebende Elemente oder Hintergrundfunktionen über den Theme-Editor.

3. Apps added to theme code

   Einige Apps fügen Code direkt zum Theme hinzu. Je nach App können Sie ihn über die App-Einstellungen oder den Theme-Editor verwalten. Wenn Ihr Theme einen Custom Liquid-Abschnitt enthält, können Sie den App-Code möglicherweise dort hinzufügen, anstatt den Theme-Code direkt zu bearbeiten.

Wenn Sie ein anderes Theme veröffentlichen, aktivieren Sie Ihre Apps im neuen Theme erneut. Sie sind standardmäßig nicht aktiv.

Theme-Code bearbeiten

Direkte Codeänderungen ermöglichen detaillierte Anpassungen, wenn der Theme-Editor, benutzerdefiniertes CSS, Custom Liquid und Apps Ihren Anforderungen nicht entsprechen.

Achtung

Durch das Bearbeiten des Theme-Codes kann Ihr Align-Theme die Berechtigung für Updates verlieren. Verwenden Sie diese Option nur, wenn Sie die erforderliche Änderung nicht über den Theme-Editor vornehmen können.

Informationen zu Überlegungen und Schutzmaßnahmen beim Bearbeiten finden Sie in der Shopify-Dokumentation zum Bearbeiten Ihres Themes mit Code

Bearbeiten Sie den Theme-Code nur, wenn Sie sicher mit HTML und CSS arbeiten und über grundlegende Kenntnisse in Liquid verfügen. Für Align-spezifische Hinweise beginnen Sie mit Company XYZ Support. Der Shopify Support kann bei bestimmten Codeanpassungen für berechtigte kostenlose Shopify-eigene Themes helfen. Informationen zu den entsprechenden Plattformrichtlinien finden Sie in der Shopify-Anleitung zum Theme-Support

Sie können den Theme-Code auf zwei Arten bearbeiten:

1. Bearbeiten Sie den Code direkt im Shopify-Admin
2. Arbeiten Sie lokal mit Entwicklungstools wie Shopify CLI und der Shopify GitHub-Integration

Nutzungshinweise

1. Beginnen Sie mit den Theme-Einstellungen. Verwenden Sie die integrierten Align-Optionen, bevor Sie zu benutzerdefiniertem Code oder einer App wechseln.
2. Verwenden Sie Custom Liquid mit Bedacht. Bestätigen Sie vor dem Hinzufügen von Inhalten, dass die erforderlichen Liquid-Objekte und -Tags unterstützt werden.
3. Prüfen Sie die App-Kompatibilität. Lesen Sie die App-Dokumentation, insbesondere bei der Verwendung eines älteren Themes.
4. Planen Sie Theme-Änderungen. Aktivieren Sie Apps nach der Veröffentlichung eines neuen Themes erneut.
5. Schützen Sie die Update-Berechtigung. Verwenden Sie direkte Codeänderungen nur, wenn andere Anpassungsoptionen nicht zum erforderlichen Ergebnis führen können.