Viele Entwickler und Designer nutzen und schätzen den Online-Theme-Editor von Shopify. Er ist einfach zu bedienen und befindet sich bequem innerhalb des Shopify-Adminbereichs. Wenn du aber regelmäßig Shopify Themes entwickeln möchtest, solltest du wissen, dass du nicht nur auf den Online-Theme-Editor beschränkt bist.
In diesem Artikel zeigen wir, wie du das Theme Kit installieren und verwenden kannst – ein plattformübergreifendes Werkzeug, das es dir ermöglicht, einfach mit der Shopify-Plattform zu interagieren und dabei all deine eigenen Entwicklungstools zu verwenden.
Sobald das Theme Kit eingerichtet ist, kannst du Workflow-Tools wie Git leichter in deine Theme-Entwicklung integrieren. Dies gibt dir die Möglichkeit, mit einem Team von Entwicklern an einem Shopify-Theme zu tüfteln, in deinem bevorzugten Texteditor zu arbeiten und eine lokale Erfahrung bei der Bearbeitung von Themes zu erzielen.
Shopify ist eine gehostete Plattform. Aus diesem Grund erfordert die Entwicklung eine Verbindung zu den Shopify-Servern, um Liquid in Kombination mit Shop-Daten zu kompilieren und zu rendern. Somit ist das Theme Kit nicht wirklich lokal.
Hinweis: Derzeit gibt es keine wirklich lokale Entwicklungsumgebung für die Arbeit mit Shopify (wie z. B. MAMP, WAMP usw.). Das Theme Kit ist damit die beste Option, um deine eigenen Tools lokal zu nutzen.
Wenn du nach einem reinen Offline-Tool für die lokale Entwicklung suchst, solltest du dir Motifmate (engl.) anschauen, das vor kurzem eine Offline-Option eingeführt hat. Beachte jedoch, dass diese Anwendung nicht von Shopify entwickelt oder gewartet wird.
Inhaltsverzeichnis
Schritt 1: Installation des Theme Kit
Theme Kit (engl.) ist ein plattformübergreifendes Tool mit Befehlszeilenfunktionalität zur Erstellung von Shopify-Themes, das von Shopify erstellt und gewartet wird. Sobald du das Theme Kit heruntergeladen hast, kannst du dich mit ein klein wenig Einrichtungsaufwand in die Theme-Entwicklung stürzen.
Einige der bemerkenswerten Funktionen des Theme Kit sind:
- Hochladen von Themes in mehrere Umgebungen
- Schnelle Uploads und Downloads
- Lokale Änderungen verfolgen und automatisch zu Shopify hochladen
- Funktioniert unter Windows, Linux und MacOS
Wenn du unter Linux oder Mac arbeitest, kannst du das folgende Skript im Terminal ausführen, um das Theme Kit global zu installieren und einzurichten:
curl -s https://shopify.github.io/themekit/scripts/install.py | sudo python
Alternativ kannst du das Theme-Kit auch manuell installieren (engl.), indem du eine ZIP-Datei von der Theme-Kit-Website herunterlädst. Zur Inbetriebnahme folgst du einfach den Installationsschritten, die auf der Theme-Kit-Website (engl.) beschrieben sind.
Fehlerbehebung bei älteren Versionen und Testen der Theme-Kit-Installation
Bevor du Theme-Kit-Befehle ausführst, solltest du dich vergewissern, dass du die aktuellste Version des Theme-Kits verwendest und dass du das Theme Gem deinstalliert hast, sofern du es zuvor verwendet hast. Wenn du das Theme Kit zum ersten Mal installierst, kannst du die folgenden Anweisungen ignorieren.
Deinstalliere vorhandene Instanzen des Shopify-Theme-Gem (sofern vorhanden) über den folgenden Befehl:
gem uninstall shopify-theme
Stelle sicher, dass du die aktuellste Version des Theme Kit (engl.) verwendest. Zum Aktualisieren des Theme Kit führst du Folgendes aus:
theme update --version=[version number]
Zum Beispiel:
theme update --version=v1.0.0
Gib dann Folgendes ein, um zu testen, ob das Theme Kit installiert ist und funktioniert.
theme --helpSchritt 2: Einrichtung der API-Anmeldeinformationen
Sobald das Themen-Kit installiert ist, benötigen wir ein paar Dinge, um unser lokales Theme mit deinem bestehenden Shopify-Shop zu verbinden: einen API-Schlüssel, ein Passwort und eine Theme-ID.
API-Schlüssel und Passwort
Wir müssen einen API-Schlüssel einrichten, den wir zu unserer Konfiguration hinzufügen und eine Verbindung zwischen unserem Shop und dem Theme Kit herstellen. Der API-Schlüssel ermöglicht es dem Theme Kit, mit deinem Shop zu kommunizieren und auf diesen sowie auf die Theme-Dateien zuzugreifen.
Dazu müssen wir uns in den Shopify-Shop einloggen und eine private App erstellen. Gehe im Shopify Adminbereich auf „Apps“ und klicke anschließend auf „Private Apps verwalten“. Klicke dort auf „Neue private App erstellen“. Dort musst du einen Titel angeben. Aus Gründen der Klarheit empfehlen wir den Namen des Kunden und die Umgebung zu verwenden.
Lesetipp: Mehr als Drag & Drop: Wie du den Code von Shopify-Themes anpasst.
Stelle sicher, dass die Berechtigungen von „Theme-Vorlagen und Theme-Assets“ auf „Lese- und Schreibzugriff“ eingestellt sind, um die entsprechenden API-Anmeldeinformationen zu generieren. Abschließend klickst du auf „Speichern.“
Shopify wird eine neue Seite laden, auf der dir ein eindeutiger API-Schlüssel und ein Passwort zur Verfügung gestellt wird.
Theme-ID
Um ein bestehendes Theme zu verbinden, benötigen wir die ID-Nummer des Themes. Es gibt ein paar Möglichkeiten, die ID-Nummer deines Themes abzurufen. Der schnellste Weg jedoch ist in den Theme-Editor zu gehen, auf „HTML/CSS bearbeiten“ zu klicken und die ID-Nummer des Themes von der URL zu kopieren. Dabei handelt es sich um die Ziffern nach „mystore.myshopify.com/admin/themes/.“ 
Alternativ kannst du auch den folgenden Befehl ausführen:
theme get --list -p=[dein-api-passwort] -s=[dein-shop.myshopify.com]
Dadurch erhältst du eine Liste von Themes und deren themeids, die in dem angegebenen Shop vorhanden sind.
Verknüpfung des Ganzen mit config.yaml
Jetzt können wir alle vorherigen Informationen nutzen, um eine config.yml -Datei in unserem Theme zu erstellen und dann das gesamte Theme lokal herunterzuladen. Die config.yml ist wichtig, da sie die Datei ist, die eine lokale Verbindung zum Theme deines Shopify Shops herstellt.
Erstelle ein Verzeichnis für dein Theme, indem du Folgendes ausführst:
mkdir [dein-theme-name]
Anschließend begibst du dich mit dem folgenden Befehl in dieses Verzeichnis:
cd [dein-theme-name]
Um ein bestimmtes Theme herunterzuladen und die Datei config.yml zu erstellen, die dieses Theme mit einer lokalen Version in dem gerade von dir erstellten Verzeichnis verbindet, führst du den folgenden Befehl in deinem Theme-Verzeichnis aus und ersetzt die [Platzhalter in eckigen Klammern] durch die Informationen deines Themes:
theme get --password=[dein-api-passwort] --store=[dein-shop.myshopify.com] --themeid=[your-theme-id]
Zum Beispiel:
theme get --password=01464d4e02a45f60a23193ffc3a8c1b3 --store=the-soap-store.myshopify.com --themeid=170199178
Dadurch wird automatisch eine config.yml-Datei für dich erstellt und das Theme aus deinem Shop heruntergeladen (basierend auf der von dir angegebenen themeid). Du kannst manuell eine config.yml-Datei im Verzeichnis mit einem Texteditor erstellen, die in etwa so aussehen würde:
Ein Theme von Grund auf neu erstellen
Wenn du ein Theme von Grund auf neu erstellen möchtest, kannst du dies tun, indem du Folgendes in deiner Befehlszeile ausführst:
theme new --password=[dein-passwortd] --store=[dein-shop.myshopify.com] --name="New Blank Theme"
Dadurch wird ein neues Theme in dem Verzeichnis, in dem du den Befehl ausführst, erstellt und eine Kopie dieses Themes mit dem von dir angegebenen Theme-Namen in deinen Shop hochgeladen. Außerdem werden dadurch beide mit der config.yml deines Themes verknüpft.
Du bekommst Fehlermeldungen?
Hast du die API-Berechtigungen bei der Generierung deines API-Schlüssels richtig eingestellt? Stelle sicher, dass die Berechtigungen von „Theme-Vorlagen und Theme-Assets“ auf „Lese- und Schreibzugriff“ eingestellt sind, um die entsprechenden API-Anmeldeinformationen zu generieren. Abschließend klickst du auf „Speichern.“
Schritt 3: Übertragung von Updates auf dein Theme
Nun, da die Verbindung zum Shopify-Theme hergestellt wurde, kannst du den folgenden Befehl in deinem Theme-Verzeichnis ausführen:
theme watch
Das Theme Kit überwacht nun alle Änderungen, die an deinen lokalen Dateien vorgenommen werden und überträgt sie automatisch in dein Theme. Um die Überwachungsverbindung zu schließen, gibst du einfach ctrl + c ein.
Das wars auch schon. Du hast das Theme Kit eingerichtet
Viel mehr gibt es jetzt nicht zu tun. Nun kannst du deinen Code mithilfe der Versionskontrolle leichter verfolgen, mit einem Entwicklerteam zusammenarbeiten, deinen bevorzugten Texteditor verwenden, Verknüpfungen einrichten, Shopify-Abschnitte nutzen und so ziemlich alles andere tun, was du normalerweise im Rahmen der lokalen Entwicklung machen würdest.
Möchtest du mehr über das Erstellen von Themes für Shopify oder für deine Kunden erfahren?
Dann schau dir diese zusätzlichen Ressourcen an:
- Unsere Informationen zu Themes im Shopify Help Center
- Eine umfangreiche Liste (engl.) von Beiträgen zur Theme-Entwicklung mit Shopify
- Tutorials (engl.) zum Erlernen von Liquid für Shopify
- Webinar: Erste Schritte mit Shopify Themes
