Shopify-Entwickler in Münster

Ich bin Mariusz Szatkowski, freiberuflicher Shopify-Entwickler, und arbeite remote und schriftlich. Für Händler in Münster entwickle ich Themes so, dass der Live-Shop während der Arbeit unberührt bleibt und jede Änderung nachvollziehbar ist. Diese Seite beschreibt meinen Ablauf Schritt für Schritt, mit Verweisen auf die Dokumentation von Shopify. Das Layout kommt von Ihnen, zum Beispiel als Skizze oder Tabelle. Ich setze es um. Allgemeine Leistungen finden Sie unter Shopify-Entwickler.

Foto: Dietmar Rabich, CC BY-SA 4.0, Wikimedia Commons.

#Wie arbeite ich an einem Theme, ohne den Live-Shop zu berühren?

Mit der Shopify CLI. Der Befehl shopify theme dev lädt das lokale Theme als Entwicklungs-Theme in Ihren Shop hoch und zeigt Änderungen in der Vorschau. Laut Shopify lädt die Vorschau CSS- und Section-Änderungen per Hot Reload nach oder aktualisiert die Seite bei jeder Dateiänderung.

Was Sie dazu wissen sollten:

• Das Entwicklungs-Theme ist temporär und versteckt. Es kann die Daten Ihres Shops für Tests nutzen.
• Shopify löscht es nach sieben Tagen ohne Aktivität. Es zählt nicht zum Theme-Limit.
• Wer shopify auth logout ausführt, löscht sein Entwicklungs-Theme.
• Das Verzeichnis muss der Standardstruktur eines Themes entsprechen (assets, blocks, config, layout, locales, sections, snippets, templates). Sonst läuft der Befehl nicht.
• Dateien, die nicht hochgeladen werden sollen, trägt man in .shopifyignore ein.

Ein Aufruf sieht so aus:

shopify theme dev --store mein-shop.myshopify.com

Für alles, was über die Vorschau hinausgeht, nutze ich diese Befehle aus der Befehlsübersicht:

Der Live-Shop ändert sich erst mit publish oder mit dem Veröffentlichen im Admin, also in dem Moment, den Sie freigeben.

#Welchen Zugriff brauche ich auf Ihren Shop?

Die CLI akzeptiert laut Shopify drei Wege: ein Shopify-Konto (Collaborator, Mitarbeiter mit der Berechtigung für Themes oder Inhaber), ein Theme-Access-Passwort oder das Zugriffstoken einer eigenen App. Ich bevorzuge den Collaborator-Zugang, weil Sie ihn steuern:

1. Ich sende eine Zugriffsanfrage an Ihren Shop. Dafür gebe ich Ihnen vorher einen Anfragecode, den ich eintragen muss.
2. Sie erhalten eine E-Mail und eine Benachrichtigung in Shopify. Im Bereich Nutzer öffnen Sie die Anfrage, prüfen die automatisch erzeugte Rolle und nehmen sie an oder lehnen sie ab.
3. Sie vergeben nur die Rechte, die für das Theme nötig sind. Die Rolle können Sie ändern.
4. Sie können den Zugang jederzeit dauerhaft entfernen. Er läuft außerdem ab, wenn der Collaborator sich 90 Tage nicht anmeldet.

Collaborator sind Shopify Partner und müssen die Zwei-Faktor-Authentifizierung aktivieren, sonst können sie sich nicht in Ihrem Shop anmelden. Ein Entwicklungs-Theme kann Shop-Daten nutzen. Klären Sie deshalb vor dem Start, ob ein Vertrag zur Auftragsverarbeitung nötig ist. Die Landesbeauftragte für Datenschutz und Informationsfreiheit Nordrhein-Westfalen (LDI NRW) führt die Auftragsverarbeitung auf ihrer Seite Datenschutz im KMU als Thema mit Mustern und Informationen. Das ist keine Rechtsberatung: Den Vertrag prüft Ihre Juristin oder Ihr Jurist.

#Wie hilft die GitHub-Anbindung bei einem Theme?

Die GitHub-Integration verbindet einen Branch eines Repositorys mit einem Theme. Pushes auf den Branch aktualisieren das Theme im Admin. Änderungen im Admin schreibt Shopify als Commit zurück in den Branch. Das gilt auch für Änderungen im Theme-Editor, im Code-Editor und durch Theme-Apps.

Für meine Arbeit bedeutet das:

• Ein Branch pro Zweck. Ein Branch für das Live-Theme, ein weiterer für eine Kampagne oder neue Funktion, verbunden mit einem unveröffentlichten Theme. Shopify erlaubt verbundene Branches für veröffentlichte und unveröffentlichte Themes.
• Nachvollziehbare Änderungen. Shopify committet als Nutzer shopify. Im Commit steht der Shop und wer zuletzt bearbeitet hat. Speichern innerhalb von etwa zehn Sekunden fasst Shopify zu einem Commit zusammen.
• Überschreiben ist möglich. Der Code-Editor hat keine Konfliktwarnung, seine Version überschreibt die in GitHub. Der Theme-Editor warnt, wenn eine geöffnete Datei in GitHub geändert wurde. Bei Konflikten lässt sich in GitHub lösen oder per Force-Push überschreiben. Mit “Reset to last commit” synchronisiert man neu.
• Die Rückschreibung lässt sich nicht abschalten. Dateien werden bei jeder Theme-Änderung in GitHub aktualisiert. Wer Code von Shopify fernhalten will, nutzt mehrere Repositories.
• Grenzen bei Rechten. Nur Branches mit der Standard-Theme-Struktur lassen sich verbinden. Externe Collaborator einer GitHub-Organisation können keine Branches verbinden. Das können nur Organisationsmitglieder mit Schreibrecht. Ein getrennter Branch lässt sich nicht erneut mit seinem Theme verbinden, er wird als neues Theme angelegt.

Absprache: Ihr Team bearbeitet Texte im Theme-Editor, ich arbeite im Branch. Beides landet im Repository, und der Verlauf zeigt, was von wem kam. Bei Änderungen im Code-Editor durch Dritte weise ich Sie auf das Überschreiben hin.

#Was prüft Theme Check?

Theme Check ist ein Linter für Liquid und JSON im Theme und in Theme-App-Erweiterungen. Er findet laut Shopify Syntaxfehler, fehlende Templates, ungenutzte Variablen und Snippets, unbekannte und veraltete Tags sowie Performance-Probleme. Jede Meldung verweist auf die Dokumentation der fehlgeschlagenen Prüfung.

Ich lasse ihn bei jeder Lieferung laufen: über shopify theme check, im Editor über die Liquid-Erweiterung für VS Code oder in CI. Prüfungen lassen sich konfigurieren, abschalten oder durch eigene Prüfungen ergänzen. Eine saubere Ausgabe belegt nur, dass der Code den Regeln entspricht. Ob der Shop schnell lädt, messe ich getrennt. Offizielle Schwellen für Core Web Vitals stehen bei web.dev: LCP bis 2,5 s, INP bis 200 ms, CLS bis 0,1.

#Wie bauen Sections und Blöcke ein Theme für Händler um?

In Online Store 2.0 sind Sections Liquid-Dateien im Ordner sections, die Händler im Theme-Editor anpassen. Shopify empfiehlt JSON-Templates statt Liquid-Templates, weil sie mehr Anpassung erlauben und den Editor schneller machen.

Dazu gehören:

• Grenzen: JSON-Templates und Section-Gruppen rendern bis zu 25 Sections, jede Section hat bis zu 50 Blöcke.
• Section-Gruppen hängen an der Layout-Datei und machen zum Beispiel Kopf- und Fußbereich im Editor bearbeitbar.
• Statische Sections (per section-Tag) lassen sich im Editor weder entfernen noch verschieben. Eine statische Section gibt es nur einmal, Einstellungen wirken in jedem Template, das sie nutzt. Shopify rät davon ab.
• Presets im Schema braucht jede Section oder jeder Block, damit der Editor sie hinzufügen kann.
• enabled_on und disabled_on im Schema legen fest, wo eine Section erlaubt ist.

Praktisch heißt das: Ich liefere Sections, die Ihr Team im Editor verschiebt und befüllt, ohne dass jemand Code anfasst. Wo eine Section nur einmal vorkommen darf, begrenze ich das im Schema.

#Warum App-Blöcke statt geänderten Theme-Code?

Ein App-Block hat den Typ @app. Laut Shopify setzen Händler damit App-Inhalte im Theme ein, “without having to directly edit theme code”. Eine Section, die App-Blöcke annehmen soll, trägt im Schema einen generischen Block:

{% schema %}
{
  "name": "Produktinfos",
  "blocks": [{ "type": "@app" }],
  "presets": [{ "name": "Produktinfos" }]
}
{% endschema %}

Zur Ausgabe muss die Section oder der Theme-Block {% content_for 'blocks' %} verwenden. Hat die Section eigene Blöcke, prüft sie den Typ und ruft für @app-Blöcke {% render block %} auf.

Wichtig für die Planung:

• Statisch gerenderte Sections unterstützen keine @app-Blöcke.
• @app-Blöcke akzeptieren den Parameter limit nicht, er löst einen Fehler aus.
• Fügt ein Händler einen App-Block in eine neue Section ein, umschließt Shopify ihn mit der Section Apps. Ein Theme kann sie durch eine eigene apps.liquid ersetzen.

Welche App-Blöcke dabei herauskommen, entscheidet die jeweilige App. Mein Teil ist, dass das Theme sie aufnehmen kann. Kopiert eine App stattdessen Code in Theme-Dateien, wird jedes spätere Theme-Update zum Abgleich von Hand. Ich frage vor der Installation, ob die App App-Blöcke bietet.

#Wie läuft das Update eines gekauften Themes?

Der Ablauf laut Shopify-Hilfe:

1. Bei einem verfügbaren Update erscheint im Admin eine Meldung anstelle der Versionsnummer. Dort lassen sich die Versionshinweise ansehen.
2. “Add to draft themes” legt das Update als Kopie mit dem Namen “Updated copy of” an. Das aktuelle Theme bleibt unverändert.
3. “Review” zeigt, ob die neue Version wie erwartet funktioniert.
4. Erst “Publish” ersetzt das Live-Theme.

Was dabei erhalten bleibt, hängt davon ab, wo geändert wurde:

• Änderungen im Theme-Editor gehen in die Kopie über: Einstellungen, Seitenlayouts mit Sections und Blöcken, Einstellungen von Sections und Blöcken, neue Templates, App-Einstellungen und Textänderungen.
• Code-Änderungen bleiben nur erhalten, wenn sie nicht mit dem Update kollidieren. Ausgenommen sind der Ordner Templates und die Datei settings_data.json. Die Theme-Karte meldet danach, ob der Code enthalten ist. Wenn nicht, muss man ihn selbst in die neue Version übernehmen. Shopify rät, vor dem Update immer eine Kopie des angepassten Codes zu sichern.
• Eigenes CSS prüfe ich darauf, ob die Selektoren in der neuen Version noch existieren.

Weitere Hinweise von Shopify: Manche Apps sind mit der neuen Version nicht kompatibel. Änderungen am Schema, etwa ein höheres Block-Limit, “might result in an update failure”. Themes, die nicht im Theme Store stehen, hochgeladene und Vintage-Themes erhalten keine Updates. Fehlt “Add to draft themes”, bleibt nur eine frische Kopie aus dem Theme Store, auf die Einstellungen und Anpassungen von Hand übertragen werden. Dazu kommen automatische Updates für Fehler und Sicherheitslücken, die Aussehen, Inhalt und Einstellungen nicht ändern.

Für mich folgt daraus: Anpassungen gehören so weit wie möglich in Sections, Blöcke und Theme-Einstellungen, nicht in Dateien des Anbieter-Themes. Was als Code nötig ist, liegt in einem Branch mit Commit-Verlauf. Das Update prüfe ich als Kopie, bevor ich es zur Veröffentlichung freigebe.

#Checkliste für ein Theme-Projekt

#Wie läuft ein Projekt mit mir ab?

Sie schicken mir den Shop, das Ziel und Ihr Layout. Ich stelle Fragen schriftlich und beschreibe danach den Umfang und die Annahmen. Dann arbeite ich im Branch, stelle eine Vorschau bereit und gebe Änderungen zur Abnahme frei. Auf Wunsch betreue ich das Theme danach laufend, mit Updates, die zuerst als Kopie geprüft werden. Ich arbeite allein, remote und schriftlich, ohne Termine und Telefonate.

#Häufige Fragen

#Muss ich Ihnen Zugriff auf den Live-Shop geben?

Ja, aber begrenzt. Üblich ist ein Collaborator-Zugang: Ich sende eine Anfrage, Sie geben den Anfragecode weiter, prüfen die angefragten Rechte und nehmen die Anfrage an. Sie können den Zugang jederzeit entfernen.

#Arbeiten Sie direkt im Live-Theme?

Nein. Ich arbeite lokal mit shopify theme dev gegen ein verstecktes Entwicklungs-Theme. Das Live-Theme ändert sich erst, wenn Sie eine geprüfte Version veröffentlichen.

#Was passiert mit meinen Code-Änderungen, wenn der Theme-Anbieter ein Update liefert?

Shopify legt das Update als Kopie an. Änderungen aus dem Theme-Editor werden übernommen, Code-Änderungen nur, wenn sie nicht mit dem Update kollidieren. Die Theme-Karte zeigt, ob sie enthalten sind. Sichern Sie Ihren Code vorher.

#Warum App-Blöcke statt App-Code im Theme?

App-Blöcke setzt der Händler im Theme-Editor ein und entfernt sie dort wieder. Theme-Code bleibt unberührt und lässt sich später leichter aktualisieren.

#Wer liefert das Layout für mein Theme?

Nein. Layout und Gestaltung liefern Sie, zum Beispiel als Skizze oder Tabelle. Ich setze das in ein Theme um.

#Wie bekomme ich ein Angebot?

Schicken Sie mir die Shop-URL, Ihr Ziel und Ihren Termin. Die erste schriftliche Einschätzung ist kostenlos, das Angebot folgt individuell.

#Schreiben Sie mir zu Ihrem Theme

Schicken Sie mir über das Kontaktformular die Adresse Ihres Shops, das Ziel, Ihren Termin, das eingesetzte Theme und die installierten Apps. Ich antworte schriftlich an Werktagen mit einer ersten Einschätzung.