Zuerst die gewünschte Änderung beschreiben
Formuliere, was Kunden auf welcher Seite sehen oder tun sollen. „Der Shop soll hochwertiger aussehen“ ist schwer prüfbar. „Auf der Produktseite sollen Lieferumfang und Material vor dem Kaufbutton stehen“ ist eine konkrete Anforderung.
Sammle Beispiele aus deinem Shop und benenne die betroffenen Seitentypen: Startseite, Produkt, Kollektion, Suche oder Warenkorb. Notiere, ob die Änderung für alle Produkte oder nur für eine Gruppe gelten soll. Das entscheidet mit darüber, ob eine globale Einstellung, eine Vorlage oder individuelle Daten sinnvoll sind.
Eine Theme-Kopie und einen Testumfang vorbereiten
Dupliziere das Theme vor Änderungen und gib der Kopie einen verständlichen Namen. Eine Vorschau ermöglicht die Prüfung, bevor du das Theme veröffentlichst. Halte den bisherigen Stand fest und dokumentiere, welche Dateien oder Einstellungen geändert wurden.
Eine Theme-Kopie ist keine vollständige Kopie des Shops: Produktdaten und andere globale Einstellungen bleiben gemeinsame Daten. Wenn du für einen Test echte Produkte veränderst, kann das den veröffentlichten Shop betreffen. Verwende sichere Beispieldaten und kläre bei größeren Eingriffen ein geeignetes Testsystem.
Was du im Theme-Editor anpassen kannst
Der Editor zeigt die Einstellungen, Abschnitte und Blöcke, die dein Theme bereitstellt. Dazu gehören je nach Theme Farben, Schriften, Header, Bilder, Produktinformationen und weitere Inhalte. Welche Funktionen verfügbar sind, hängt vom Theme und seiner Version ab.
Beginne mit den vorhandenen Möglichkeiten. Wenn ein Abschnitt deine Anforderung bereits erfüllt, muss er nicht neu programmiert werden. Prüfe längere Texte, mehrere Bilder und Produkte mit Varianten: Eine Gestaltung, die nur mit einem kurzen Beispiel funktioniert, ist noch keine gute Vorlage.
| Änderung | Erster sinnvoller Weg |
|---|---|
| Farben, Schrift, Logo | Globale Theme-Einstellungen prüfen |
| Reihenfolge von Inhalten | Abschnitte und Blöcke im Editor ordnen |
| Andere Produktseite für eine Gruppe | Separate Vorlage erstellen und zuordnen |
| Individuelle Produktinformationen | Metafelder mit passenden Inhaltselementen verbinden |
| Bewertungen oder Größenhilfe | Vorhandene Funktion oder kompatiblen App-Block prüfen |
| Besondere Interaktion | Anforderung für Theme-Code oder App klären |
Vorlagen und Metafelder richtig einsetzen
Eine Produktvorlage kann mehreren Produkten zugeordnet sein. Wenn du ihren Aufbau veränderst, sehen die zugeordneten Produkte denselben neuen Aufbau. Soll nur ein Teil des Sortiments anders dargestellt werden, erstelle eine eigene Vorlage und kontrolliere die Zuordnung.
Metafelder speichern zusätzliche Daten, beispielsweise Material, Pflegehinweise oder eine produktspezifische Größentabelle. In geeigneten Theme-Einstellungen lassen sich dynamische Quellen mit diesen Feldern verbinden. Lege Datentyp und Pflegeprozess fest, bevor du viele Produkte befüllst. Fehlende Inhalte sollten in der Darstellung sinnvoll behandelt werden.
Wann du Liquid, CSS oder JavaScript brauchst
Liquid verbindet Theme-Vorlagen mit Shopify-Daten. CSS steuert die Gestaltung; JavaScript kann Interaktionen ergänzen. Code ist sinnvoll, wenn eine definierte Anforderung über die vorhandenen Einstellungen hinausgeht, etwa ein individueller Abschnitt oder eine besondere Variantendarstellung.
Halte Änderungen möglichst begrenzt und dokumentiert. Prüfe Tastaturbedienung, Ladeverhalten und Fehlersituationen genauso wie das gewünschte Aussehen. Eine sichtbare Preisdarstellung im Theme allein verändert nicht die Preisberechnung im Checkout. Wenn eine Anforderung Geschäftslogik betrifft, muss sie am passenden Systempunkt umgesetzt werden.
Apps im Theme einbauen und ihre Grenzen beachten
Kompatible Apps können Blöcke in unterstützten Abschnitten bereitstellen. App-Embeds werden separat aktiviert und können etwa Overlays oder unsichtbare Funktionen einbinden. Prüfe nach einem Theme-Wechsel, ob die benötigten Einbindungen wieder aktiviert und richtig platziert sind.
Eine App für Verarbeitung im Hintergrund ist etwas anderes als ein Theme-Block. Für Datenabgleich mit ERP oder Buchhaltung brauchst du eine Integration. Checkout-Seiten werden ebenfalls nicht über normale Theme-App-Blöcke gestaltet; lies dazu Shopify Checkout anpassen.
So prüfst du eine Theme-Anpassung
Teste mit deinen echten Seitentypen und nicht nur der Startseite. Nutze eine Mobilansicht und einen Desktop, Produkte mit langen Titeln, mehrere Varianten und einen leeren Warenkorb. Prüfe auch die Darstellung ohne optionalen Inhalt.
Für größere Änderungen vereinbarst du vorab konkrete Abnahmekriterien. Beispielsweise muss ein Kunde die richtige Variante auswählen können, der Kaufbutton darf nicht verdeckt werden und die Größenhilfe muss sich per Tastatur öffnen und schließen lassen.
- Startseite, Produktseite, Kollektion, Suche und Warenkorb geprüft.
- Lange Texte, fehlende Bilder und ausverkaufte Varianten berücksichtigt.
- Menü, Formulare und interaktive Elemente mit Tastatur bedienbar.
- App-Blöcke und App-Embeds im neuen Theme kontrolliert.
- Testbestellung einschließlich Rabatt und Versand durchgeführt.
- Vorschau freigegeben und vorheriger Stand als Rückfallmöglichkeit dokumentiert.
Kosten und Theme-Updates mitdenken
Der Aufwand hängt von Seitentypen, gewünschten Interaktionen, Datenqualität und Testumfang ab. Ein neuer Abschnitt ist ein anderer Auftrag als der vollständige Neuaufbau eines Themes. Gib diese Unterschiede in einem Briefing an, wenn du das Theme anpassen lassen möchtest.
Theme-Updates müssen mit individuellen Änderungen abgeglichen werden. Prüfe zunächst, welche Anpassungen übernommen wurden, welche Konflikte entstehen und ob alle Apps funktionieren. Ein gekauftes Theme, individueller Code und laufende Betreuung haben unterschiedliche Lizenz- und Kostenbedingungen. Für die Projektplanung hilft Shopify Shop erstellen lassen.
