Erweitere dein Theme

Diese Seite wurde gedruckt um Apr 20, 2024. Die neueste Version findest du unter https://help.shopify.com/de//manual/online-store/themes/theme-structure/extend.

Shopify-Themes bieten viele Einstellungen und Anpassungsoptionen. Möglicherweise möchtest du dein Theme jedoch weiter anpassen. Beispielsweise möchtest du möglicherweise Produktbewertungen in deinem Shop anzeigen, was du durch die Installation einer App erreichen kannst. Wenn du die Funktionalität deines Themes erweitern möchtest, kannst du dies mithilfe von benutzerdefiniertem Code oder einer App tun.

Auf dieser Seite

Benutzerdefiniertes HTML oder Liquid hinzufügen

Einige Themes bieten Einstellungen, mit denen du Snippets von HTML- oder Liquid-Code hinzufügen kannst, die in der Vorlage, dem Abschnitt oder dem Block, der die Einstellung enthält, gerendert werden können. Mit diesen Einstellungen kannst du deinem Onlineshop sicher benutzerdefinierten Code hinzufügen, ohne den Code deines Themes direkt zu bearbeiten. So wird sichergestellt, dass dein Theme für automatische Upgrades berechtigt ist.

Du kannst diese Einstellungen für die folgenden Aufgaben verwenden:

  • Verwende einen Abschnitt mit benutzerdefiniertem Liquid, um Liquid-Variablen dort einzufügen, wo sie für dein Unternehmen sinnvoll sind. Du kannst beispielsweise deine Versandbedingungen zu deiner Produktseite hinzufügen.
  • Verwende einen Abschnitt mit benutzerdefiniertem Liquid, um den Code hinzuzufügen, der zur Integration einer App in dein Theme erforderlich ist.

Um zu erfahren, ob dein Theme über eine benutzerdefinierte HTML- oder Liquid-Option verfügt, lies deine Theme-Dokumentation.

Mit den Liquid-Einstellungen kannst du nur auf eingeschränkte Liquid-Objekte und Tags zugreifen. Weitere Informationen zu den Objekten und Tags, die du in einer Liquid-Einstellung verwenden kannst, findest du in der Dokumentation zu den Liquid-Einstellungen auf Shopify.dev.

Benutzerdefiniertes CSS hinzufügen

CSS (Cascading Style Sheet) ändert die Darstellung von Elementen in deinem Theme und kann das Aussehen mehrerer Seiten gleichzeitig steuern. Mit der Funktion "Benutzerdefiniertes CSS" kannst du dein Theme über die integrierten Einstellungen hinaus anpassen. Du kannst benutzerdefiniertes CSS zu deinem gesamten Theme hinzufügen oder zu einem bestimmten Abschnitt einer Vorlage in deinem Theme.

Es erfordert einige Kenntnisse von CSS und HTML, dein CSS anzupassen. Bevor du dein Theme anpasst, solltest du dich darüber informieren, welche Unterstützung dafür verfügbar ist.

Eine App installieren

Du kannst Apps installieren, um Funktionen und Integrationen zu deinem Theme hinzuzufügen. Apps findest du im Shopify App Store.

Onlineshop-Apps können auf folgende Weise in dein Theme integriert werden:

  • Als App-Block: Mit App-Blöcken kannst du App-Funktionen genau dort hinzufügen, wo du sie in deinem Theme verwenden möchtest. App-Blöcke können über den Theme-Editor hinzugefügt, entfernt und angepasst werden.

  • Als App-Einbettung: App-Einbettungen sind von Apps bereitgestellte Elemente, die als Überlagerung in deinem Theme auftauchen, oder sie fügen Code zu deinem Onlineshop hinzu, ohne für deine Kunden sichtbar zu sein. App-Blöcke können über den Theme-Editor aktiviert, deaktiviert und angepasst werden.

  • Durch Änderung deines Theme-Codes: Manche Apps fügen den Code direkt in deinen Theme-Code ein, um deinem Theme Funktionen hinzuzufügen. Du kannst die App anhand der App-Einstellungen anpassen oder den Theme-Editor dazu verwenden.

Bearbeite deinen Theme-Code

Du kannst deinen Theme-Code bearbeiten, um detaillierte Änderungen an deinem Onlineshop vorzunehmen. Theme-Dateien enthalten Liquid, die Vorlagensprache von Shopify, sowie HTML, CSS, JSON und JavaScript. Bearbeite den Code für ein Theme nur, wenn du dich mit HTML und CSS auskennst und über ein grundlegendes Verständnis von Liquid verfügst.

Wenn du ein kostenloses Theme von Shopify verwendest, kann der Shopify Support dir dabei helfen, bestimmte Anpassungen an deinem Theme-Code vorzunehmen. Eine Liste der verfügbaren Anpassungen findest du in deiner Theme-Dokumentation. Erhalte mehr Informationen über den Support für Themes.

Du kannst deinen Theme-Code folgendermaßen bearbeiten:

In diesem Abschnitt

Bereit, mit Shopify zu verkaufen?

Kostenlos testen