Blog-Inhalte
July 3, 2024

Shopify Theme Installation & Unterstützung

Shopify-Theme-Einrichtung mit Online Store 2.0: Section/Block-Struktur, fertiges oder individuelles Theme und Performance-Prüfung im Überblick.

Die Shopify Theme Installation beginnt mit der Wahl eines Themes, das mit Online Store 2.0 kompatibel ist: die kostenlose Horizon-Familie oder Dawn und seine Varianten, ein kostenpflichtiges Theme aus dem Theme Store oder eine individuelle Theme-Entwicklung. Nach der Installation erfolgt der Großteil der Anpassungen ohne Code über die Section-Einstellungen. Änderungen auf Liquid-Ebene werden per Versionskontrolle gesichert, und der Einfluss aktiver Apps auf die Ladegeschwindigkeit wird geprüft.

Shopify Theme Installation und Unterstützung: der richtige Aufbau mit der Online-Store-2.0-Architektur

Der häufigste Fehler bei der Shopify Theme Installation besteht darin, das Theme als „fertige Designvorlage“ zu betrachten und die Flexibilität der Online-Store-2.0-Architektur ungenutzt zu lassen. Diese Architektur, die Shopify ab 2021 zum Standard gemacht hat, hat grundlegend verändert, wie ein Theme installiert und angepasst wird. Eine korrekte Installation beginnt damit, diese Architektur zu verstehen.

Online Store 2.0: JSON-Templates und die Section/Block-Struktur

Ältere Shopify-Themes (Vintage bzw. 1.0) hielten das Seitenlayout als festen Code in `theme.liquid`; um die Position eines Abschnitts auf anderen Seiten als der Startseite zu ändern, musste ein Entwickler eingreifen. Mit Online Store 2.0 wurden Seiten auf JSON-Templates (`.json`) umgestellt, in denen sich Sections und Blocks per Drag-and-drop neu anordnen lassen. So können Shopbetreiber das Seitenlayout ohne Programmierkenntnisse ändern; das Theme muss diese Architektur allerdings vollständig unterstützen.

Dialog zum Hinzufügen eines App-Blocks ohne Code zum Abschnitt der Produktseite im Shopify-Theme-Editor
MerkmalAlte Architektur (Vintage)Online Store 2.0
SeitenlayoutFester Code in theme.liquidJSON-Template + Section/Block, Drag-and-drop
App-IntegrationEntwickler bindet per Code einWird als App Block ohne Code hinzugefügt
Sections auf beliebigen Seiten hinzufügenEingeschränkt, abhängig vom TemplateAuf allen Seitentypen möglich
Risiko, Anpassungen nach einem Theme-Update zu verlierenHochGering (Anpassungen werden in den Section-Einstellungen gespeichert)
Wichtiger Hinweis: Wenn Sie noch ein Theme mit Vintage-Architektur verwenden, funktionieren die meisten Apps der neuen Generation (vor allem Apps für Personalisierung und Produktempfehlungen, die App Blocks benötigen) nicht richtig oder erfordern zusätzliche Entwicklung. Bei der Theme-Auswahl sollte der erste Schritt deshalb sein, die Kompatibilität mit Online Store 2.0 zu prüfen.

Fertiges Theme oder individuelle Entwicklung?

Die Entscheidung hängt davon ab, wie komplex Ihr Katalog ist und wie eigenständig das Erlebnis sein muss, das Ihre Markenidentität verlangt. Für die meisten Shops genügt ein fertiges Theme; bei Shops mit hohem Traffic oder einem besonders wichtigen Markenerlebnis wird eine individuelle Entwicklung notwendig. Mit unserem Shopify Themen-Finder können Sie das passende fertige Theme für Ihre Branche in wenigen Fragen eingrenzen.

OptionWann geeignetGrenze
Kostenloses Theme (Dawn und Varianten)Neuer Shop, StandardkatalogBegrenzte Anpassungsmöglichkeiten
Kostenpflichtiges Theme aus dem Shopify Theme StoreShops, die fertige Komponenten für eine bestimmte Branche benötigenAbhängigkeit davon, wie oft der Entwickler Updates liefert
Individuelle (Custom) Theme-EntwicklungShops mit hohem Traffic, deren Markenidentität sich mit fertigen Themes nicht umsetzen lässtHöhere Entwicklungszeit und Kosten

Wenn Sie ein kostenpflichtiges Theme aus dem Theme Store wählen, sollten Sie auch prüfen, wie oft der Entwickler Updates veröffentlicht und wie gut sein Support ist. Ein nicht mehr gepflegtes Theme kann mit neuen Shopify-Funktionen (etwa Theme Blocks oder neuen Section-Typen) inkompatibel werden.

Anpassungen nach der Installation: Wie weit sollten Sie eingreifen?

In Online Store 2.0 lässt sich der Großteil der Anpassungen ohne Code über die Section-Einstellungen vornehmen. Wenn jedoch eine markenspezifische Bildsprache oder eine Funktion benötigt wird, die Standard-Sections nicht abdecken, ist individueller Code auf Liquid-Ebene erforderlich.

Shopify-Theme-Bibliothek: mit GitHub-Repository und Branch verbundenes Theme samt Commit-Verlauf

Bei Anpassungen auf Liquid-Ebene ist ein technischer Punkt zu beachten: Veröffentlicht der Theme-Entwickler eine neue Version, kann individueller Code, der direkt in die Theme-Dateien geschrieben wurde, durch dieses Update überschrieben werden. In Shopify gibt es keine Child Themes; ein Update aus dem Theme Store fügt Ihrer Theme-Bibliothek eine neue Kopie des Themes hinzu und übernimmt die Einstellungen, nicht aber die Änderungen am Code. Um das zu verhindern, sollten Sie individuellen Code möglichst in separaten Section-Dateien bündeln, App-Funktionen über App Blocks einbinden und das Theme mit der GitHub-Integration von Shopify unter Versionskontrolle stellen; so lassen sich die Codeänderungen nach einem Update erneut auf die neue Version anwenden.

Risiko, das Sie vermeiden sollten: Wer individuellen Code direkt in die Theme-Dateien schreibt, ohne die Versionen zu protokollieren, riskiert, dass diese Anpassungen beim nächsten Theme-Update unbemerkt verloren gehen. Die Arbeit mit Shopify CLI + GitHub-Integration bewahrt den Änderungsverlauf und macht sichtbar, welcher Code nach einem Update betroffen ist.

Theme-Performance und Core Web Vitals

Die Wahl des Themes wirkt sich direkt auf die Core-Web-Vitals-Metriken (LCP, CLS, INP) aus. Ein schweres Theme oder Skripte, die viele Apps einschleusen, verlangsamen das Laden der Seite; das beeinträchtigt sowohl das Nutzererlebnis als auch die SEO-Performance.

In der Praxis ist das häufigste Performance-Problem, dass sich im selben Theme viele Apps ansammeln, die jeweils eine eigene JavaScript-Datei laden. Wer bei der Installation prüft, welche Apps tatsächlich aktiv genutzt werden, verbessert die Performance direkt, unabhängig von der Wahl des Themes.

Theme Installation und Unterstützung mit Nodus Works

Bei Projekten zur Theme Installation gehen wir in folgenden Schritten vor:

  • Prüfung der Online-Store-2.0-Kompatibilität: Wir prüfen, ob das gewählte oder vorhandene Theme die Section/Block-Architektur vollständig unterstützt.
  • Installation und Markenanpassung: Anpassungen, die über die Section-Einstellungen möglich sind, setzen wir ohne Code um, alle übrigen auf Liquid-Ebene.
  • Versionskontrolle: Wir machen individuelle Codeänderungen über die GitHub-Integration nachvollziehbar.
  • Performance-Prüfung: Wir messen den Einfluss aktiver Apps auf die Ladegeschwindigkeit und reduzieren unnötige Skriptlast.

Die Installation ist eine einmalige Aufgabe. Für Updates, Fehlerbehebung und Performance-Überwachung nach der Installation steht unser Service für technischen Shopify-Support und Wartung mit einem monatlichen Plan bereit.

FAQ

Was ist Online Store 2.0 und worin unterscheidet es sich von älteren Themes? Online Store 2.0 ist die Architektur, die das Seitenlayout über JSON-Templates und die Section/Block-Struktur steuert; sie ermöglicht Anpassungen per Drag-and-drop ohne Code und unterstützt App Blocks. Ältere (Vintage-)Themes bieten diese Flexibilität nicht.

Sollte ich ein fertiges Theme oder eine individuelle Entwicklung wählen? Für Shops mit Standardkatalog und mittlerem Traffic reicht in der Regel ein fertiges Theme, das mit Online Store 2.0 kompatibel ist. Lässt sich die Markenidentität mit fertigen Themes nicht umsetzen oder ist der Traffic hoch, sollten Sie eine individuelle Entwicklung in Betracht ziehen.

Löscht ein Theme-Update meine Anpassungen? Individueller Code, der direkt in die Theme-Dateien geschrieben wurde, kann durch ein Update des Entwicklers überschrieben werden. Um dieses Risiko zu verringern, sollten Sie Anpassungen unter Versionskontrolle verwalten.

Beeinträchtigen zu viele Apps die Performance des Themes? Ja. Jede App lädt in der Regel eine eigene JavaScript-Datei; wenn Sie nicht aktiv genutzte Apps entfernen, verbessert sich die Ladegeschwindigkeit direkt.

Sind Theme Installation und technischer Support dieselbe Leistung? Nein. Die Installation ist ein einmaliges Projekt; Updates, Fehlerbehebung und Performance-Überwachung erfordern dagegen einen laufenden Service für technischen Support und Wartung.

Fazit

Die Grundlage einer Shopify Theme Installation ist der richtige Einsatz der Online-Store-2.0-Architektur: unterscheiden, welche Anpassungen sich über die Section/Block-Struktur ohne Code umsetzen lassen, Änderungen auf Liquid-Ebene per Versionskontrolle sichern und die App-Last im Hinblick auf die Performance prüfen. Wenn Sie gemeinsam mit uns die passende Theme-Strategie für Ihren Shop entwickeln möchten, nehmen Sie Kontakt mit Nodus Works auf.