Professionelle Shopify Theme Entwicklung mit Theme Kit und Git

Um individuelle Händler Bedürfnisse zu erfüllen und noch attraktivere Einkaufserlebnisse für Kunden zu erzielen, arbeiten Entwickler auf Code-Ebene der Shopify Themes. Themes können hier gezielt angepasst oder sogar gänzlich neu erstellt werden. Neben dem Online-Theme-Editor stellt Shopify mit Theme Kit ein plattformübergreifendes Tool für die Theme-Entwicklung auf lokaler Ebene zur Verfügung. Die Anbindung von zusätzlicher Software für die Optimierung des Workflows wie Git ist ebenfalls möglich. Wie Sie Theme Kit installieren und wie Sie damit im Entwickler-Team arbeiten, erfahren Sie in diesem Beitrag.

Theme Kit: Was ist es und wieso sollten Sie es nutzen?

Das Shopify Theme Kit ist ein leistungsstarkes Tool, das von Shopify entwickelt wurde, um Entwicklern und Store-Betreibern das einfache und effiziente Verwalten von Shopify-Themes zu ermöglichen. Es ist ein Befehlszeilen-Tool, das es ermöglicht, Shopify-Themes lokal auf Ihrem Computer zu bearbeiten und Änderungen dann nahtlos auf den Live-Shop zu übertragen.

8 Gründe, die für die Nutzung des Theme Kits sprechen:

1. Lokale Entwicklung: Mit dem Theme Kit können Sie Themes lokal auf Ihrem Computer entwickeln, was Ihnen eine schnellere Bearbeitung und eine bessere Kontrolle über Ihre Änderungen ermöglicht. Sie können Änderungen testen, ohne dass diese direkt auf Ihrem Live-Shop erscheinen.

2. Versionierung und Zusammenarbeit: Das Theme Kit ermöglicht die Verwendung von Versionskontrollsystemen wie Git, was die Zusammenarbeit zwischen Entwicklern und Teams erleichtert. Sie können Änderungen verfolgen, Kommentare hinterlassen und sicherstellen, dass jeder im Team auf dem neuesten Stand ist.

3. Effiziente Bearbeitung: Das Tool ermöglicht es, schnell große Mengen an Dateien zu bearbeiten und zu aktualisieren. Dies ist besonders nützlich, wenn Sie Themes mit vielen Anpassungen verwalten.

4. Fehlerbehebung: Da Sie Änderungen lokal testen können, bevor Sie sie auf den Live-Shop übertragen, können Sie Fehler oder unerwünschte Effekte erkennen und beheben, bevor sie für Kunden sichtbar werden.

5. Automatisierung: Das Theme Kit ermöglicht es, verschiedene Prozesse und Aufgaben zu automatisieren, wie beispielsweise das Hochladen von Bildern oder das Aktualisieren von Theme-Dateien.

6. Sicherheit: Durch die Möglichkeit, Themes lokal zu bearbeiten, minimieren Sie das Risiko von unbeabsichtigten Änderungen oder Fehlern auf dem Live-Shop.

7. Schnelle Übertragung: Wenn Sie Änderungen abgeschlossen haben, können Sie das Theme Kit verwenden, um Ihre lokalen Änderungen schnell und reibungslos auf den Live-Shop zu übertragen.

8. Flexibilität: Das Theme Kit unterstützt verschiedene Theme-Dateiformate, was es Ihnen ermöglicht, die volle Kontrolle über die Gestaltung und Funktionen Ihres Shops zu haben.

Zusammengefasst ermöglicht das Shopify Theme Kit eine effiziente, sichere und kollaborative Entwicklungsumgebung für Shopify-Themes. Es ist ein wertvolles Werkzeug für Entwickler und Store-Betreiber, die ihre Shops optimieren und anpassen möchten, ohne dabei die Integrität des Live-Shops zu gefährden.

Warum ist eine Custom Theme Entwicklung sinnvoll?

Kunden sollten auf eine Custom Theme Entwicklung für ihren Shopify-Shop setzen, wenn sie nach einer einzigartigen, ansprechenden und maßgeschneiderten Online-Präsenz suchen. Hier sind einige Gründe, warum die Investition in ein individuelles Theme sinnvoll sein kann:

Einzigartige Markenidentität: Ein Custom Theme ermöglicht es Ihnen, Ihr Branding und Ihr visuelles Erscheinungsbild genau so umzusetzen, wie Sie es sich vorstellen. Sie können Farben, Schriften, Layouts und Designelemente genau auf Ihre Marke abstimmen, um eine einheitliche Markenidentität zu schaffen.

Differentiation: Ein maßgeschneidertes Theme hebt sich von den Standard-Themes ab, die von vielen anderen Shops verwendet werden. Dies hilft Ihnen, sich von der Konkurrenz abzuheben und einen bleibenden Eindruck bei Ihren Kunden zu hinterlassen.

Optimierte Benutzererfahrung: Ein Custom Theme ermöglicht es, die Benutzererfahrung genau auf die Bedürfnisse Ihrer Zielgruppe abzustimmen. Sie können die Navigation, das Layout und die Funktionen so gestalten, dass sie die Conversion Rate erhöhen und das Einkaufserlebnis optimieren.

Flexibilität: Individuelle Themes bieten eine höhere Flexibilität, um Funktionen und Module zu integrieren, die speziell auf die Anforderungen Ihres Geschäfts zugeschnitten sind. Sie können sicherstellen, dass der Shop alle Funktionen hat, die Sie benötigen, ohne unnötigen Ballast.

Bessere Performance: Custom Themes können optimiert werden, um eine bessere Ladezeit und eine verbesserte Performance zu bieten. Dies trägt nicht nur zur Benutzerzufriedenheit bei, sondern kann auch das SEO-Ranking verbessern.

Zukunftssicherheit: Mit einem individuellen Theme haben Sie die Kontrolle über die Codebasis. Das bedeutet, dass Sie Änderungen und Anpassungen vornehmen können, um mit den sich ändernden Anforderungen Ihres Geschäfts Schritt zu halten.

Langfristige Kostenersparnis: Obwohl die anfänglichen Kosten für die Entwicklung eines Custom Themes höher sein können, können langfristig gesehen die Anpassungsfähigkeit, die Effizienz und die Reduzierung von Abhängigkeiten von Drittanbietern zu Kosteneinsparungen führen.

Technologische Innovation: Ein individuelles Theme erlaubt es Ihnen, neueste Technologien, Trends und Best Practices zu nutzen, um einen modernen und zukunftsorientierten Shop zu erstellen.

Skalierbarkeit: Ein Custom Theme kann auf Ihre Wachstumspläne zugeschnitten werden. Es lässt sich leicht anpassen und erweitern, wenn Ihr Geschäft wächst und sich entwickelt.

Insgesamt bietet eine Custom Theme Entwicklung die Möglichkeit, einen einzigartigen und leistungsfähigen Online-Shop zu schaffen, der perfekt auf die Ziele und Anforderungen Ihres Unternehmens abgestimmt ist.

Theme Kit Entwicklungsumgebung einrichten

Bevor Sie mit der lokalen Entwicklung Ihres Shopify Themes beginnen, müssen Sie die Entwicklungsumgebung vorbereiten. Neben ihrem bevorzugten Code-Editor benötigen Sie

• Themen-Kit

• Git

• Eine Software zur Git-Verwaltung, z.B. Sourcetree oder GitAhead

• einen Hostinganbieter für Projektdaten, z.B. Bitbucket oder SourceForge

Git installieren

Mit Git kontrollieren Sie die Versionen Ihrer Themes, durch die zusätzliche Git-Verwaltung erhalten Sie eine grafische Nutzeroberfläche, die die Bedienung von Git vereinfacht. Mithilfe eines Hosting-Anbieters stellen Sie schließlich Ihre Theme-Entwicklungsdaten online und ermöglichen damit dem gesamten Team Zugriff darauf. Die notwendigen Installationsdateien finden Sie auf den Websites der jeweiligen Anbieter.

Theme Kit installieren

Für die Installation von Theme Kit auf Mac oder Linux führen Sie folgendes Installationsskript im entsprechenden Terminal aus:

curl -s https://shopify.dev/themekit.py | sudo python3

Wenn Sie ein Paket-Verwaltungstool nutzen, können Sie die Installation alternativ mit folgenden Eingaben in dieser Reihenfolge auslösen:

Homebrew (für Mac und Linux)

brew tap shopify/shopify
brew install themekit

Chocolatey (für Windows)

choco install themekit

Falls Sie Theme Kit manuell installieren möchten, finden Sie die ausführbaren Dateien hier.

Ein neues Theme entwickeln

Den Projektordner vorbereiten

Die Entwicklung eines neuen Shopify Themes starten Sie mit dem Anlegen eines Projektes in Ihrem gewählten Hoster und eines zugehörigen digitalen Archivs, dem sogenannten Repository. Dafür empfehlen wir folgende Einstellungen:

• Projektname: Kundenname

• Name des Repository: URL des Kundenshops (yourshop.myshopify.com)

• Zugriffslevel des Repository: privat

• README einschließen: Ja, mit Vorlage

• Kontrollsystem: Git

Haben Sie alle Einstellungen vorgenommen, installieren Sie das Repository auf Ihrem Rechner und öffnen den leeren Projektordner in Ihrem lokalen Code-Editor. Da jedes Shopify Theme auf der gleichen Ordner-Struktur basiert, muss diese nun im Projektordner erzeugt werden. Folgenden Aufbau muss der Theme-Projekt-Ordner zwingend haben: Um dies zu erreichen, geben Sie folgende Befehle nacheinander in Ihre Konsole ein:

printf "config.yml" >> .gitignore

Nachdem Sie mit diesen Befehlen eine .gitignore-Datei erstellt, mit ihrem Code-Editor geöffnet und eine config.yml darin eingefügt haben, speichern Sie Ihren Fortschritt und führen die folgenden Schritte aus.

Ein Passwort für Zugriff zum Shopify-Backend generieren

Durch die Verwendung eines API-Schlüssels verknüpfen Sie Ihre lokale Entwicklungsumgebung mit den Themes im Shopify Shop. Dafür erstellen Sie eine neue Private App im Shopify Backend über den Link Private Apps verwalten im Menüpunkt Apps:

Über den Button erstellen Sie eine neue private App. Wichtig: An dieser Stelle müssen Sie der App Zugriff auf die Theme-Dateien gewähren. Setzen Sie dementsprechend den Zugriff unter Inaktive Admin-API-Berechtigungen anzeigen auf „Lesen und Schreiben“.

Die Config.yml anpassen

Über Ihre Konsole und Shopify Theme Kit passen Sie nun die config.yml mit folgender Eingabe an:

theme configure -p=[your-password] -s=[you-store.myshopify.com] -t=[your-themeid] 

Hier setzen Sie das eben erstellte Passwort, die URL des Shops und die Theme-ID in die entsprechenden Bereiche ein. Um die ID des Themes zu finden, öffnen Sie den Theme-Customizer unter Anpassen in der Theme-Bibliothek. Dort finden Sie die ID im der URL:

https://leos-ringschmiede.myshopify.com/admin/themes/80525590591/editor

Achten Sie unbedingt darauf die ID eines unveröffentlichten Themes (Ihr Developement-Theme) aus der Bibliothek zu nutzen, niemals das aktuelle Theme (Live-Theme).

Fügen Sie ein neues Theme hinzu oder duplizieren Sie ein vorhandenes, wenn nötig.

Öffnen Sie ihre config.yml und tragen Sie die ID des veröffentliches Themes an die gekennzeichneten Stellen (LIVE) ein. Nehmen Sie ggf. weitere Anpassungen vor, bis ihre Datei wie folgt aussieht:

development:
  password: [your-password]
  theme_id: [your-theme-id-DEVELOPMENT]
  store: [your-store.myshopify.com]
  directory: ./dist
  timeout: 60s
  ignore_files:
    - config/settings_data.json

production:
  password: [your-password]
  theme_id: [your-theme-id-LIVE]
  store: [your-store.myshopify.com]
  directory: ./dist
  timeout: 60s
  ignore_files:
    - config/settings_data.json

Laden Sie das Theme zur Bearbeitung nun über Ihre Konsole mit folgendem Befehl auf Ihren Rechner herunter:

theme download

Erstellen Sie ebenfalls eine README.md:

touch README.md

Ihr Projekt-Ordner sollte nun die oben aufgeführte Struktur aufweisen.

In die Entwicklung eines Themes einsteigen

Möchten Sie in eine bereits laufende Theme-Entwicklung einsteigen, laden Sie sich das bereits bestehende Respository über ihre Git-Verwaltung oder die Konsole auf Ihren eigenen Rechner herunter. Die Struktur Ihres lokalen Projektordners enthält nun folgende Elemente:

.gitignore dist assets configuration layout locales sections snippets templates
README.md

Im Vergleich zur Entwicklung eines neuen Themes muss die config.yml an dieser Stelle noch fehlen. Nun führen Sie die Erstellung und Anpassung der config.yml durch, wie bereits im vorherigen Abschnitt unter "Die Config.yml anpassen" beschrieben.

Schließlich laden Sie mit folgendem Konsolenbefehl die Theme-Datei herunter:

theme download

Im Team arbeiten

Den aktuellen Entwicklungsstand abrufen

Da Sie mit Ihrem Team zusammen an der Entwicklung arbeiten, ist es wichtig immer die aktuelle Version herunterzuladen, bevor Sie Ihre eigene Bearbeitung des Themes beginnen oder fortsetzen. Somit wird gewährleistet, dass Ihnen alle Änderungen, die durch andere Entwickler oder Entwicklerinnen vorgenommen wurden, vorliegen. Führen Sie dazu einen Git Pull mit folgendem Befehl aus:

git pull

Die Editierung des Themes vorbereiten

Bevor Sie Änderungen am Code vornehmen, führen Sie immer zuerst diesen Befehl aus:

theme open && theme watch

Dadurch wird die Vorschau des Themes direkt in Ihrem Browser geöffnet. Außerdem überwacht Theme Kit nun jede gespeicherte Änderung im Code und überträgt diese direkt an das Development-Theme im Shopify-Backend.

Die Editierung des Themes beenden

Wenn Sie mit Ihrer Bearbeitung des Themes für den Moment oder sogar abschließend fertig sind, müssen Sie die von Ihnen vorgenommenen Änderungen über ihre Git-Verwaltung in das Git pushen. Beschreiben Sie hier Ihre Änderungen genau, damit Ihr Team bei eventuellen weiteren Entwicklungsschritten weiß, welche Aufgaben Sie abgeschlossen haben.

Abschließend führen Sie folgenden Befehl aus, um über Theme Kit auch alle Daten im Live-Theme mit Ihren Änderungen zu überschreiben:

theme deploy{" "}--env=production