Weitere Blogposts in der Kategorie Shopify

Shopify Plus Vorteile 6 November 2018
Shopify Checkliste 23 Oktober 2017

Professionelle Shopify Theme Entwicklung mit Theme Kit und Git

Professionelle Shopify Theme Entwicklung mit Theme Kit und Git

Um individuelle Händlerbedü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 Entwicklungsumgebung einrichten

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

  • Theme 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 Hostinganbieters 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://raw.githubusercontent.com/Shopify/themekit/master/scripts/install |
    sudo python
  

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

Homebrew (für Mac und Linux)

brew tap shopify/shopifybrew 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 Projektorder 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 Projektorder in Ihrem lokalen Code-Editor. Da jedes Shopify Theme auf der gleichen Ordner-Struktur basiert, muss diese nun im Projektorder erzeugt werden. Folgenden Aufbau muss der Theme-Projekt-Ordner zwingend haben: Um dies zu erreichen, geben Sie folgende Befehle nacheinander in Ihre Konsole ein:

    touch .gitignore code .gitignoreconfig.yml 
  

Nach dem 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:

Shopify private Apps verwalten

Ü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“:

Shopify private Apps Zugriff gewähren

Nachdem Sie die App erstellt haben, finden Sie im Abschnitt Admin API ein Passwort, das Sie für den nächsten Schritt benötigen. Über dieses Passwort erhalten Sie Zugriff auf die Theme-Datei des Shops.

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: [you-store.myshopify.com]
      directory: ./dist
      timeout: 60s
      ignore_files:
      - config/settings_data.json
    production:
      password: [your-password]
      theme_id: [your-theme-id-LIVE]
      store: [you-store.myshopify.com]
      directory: ./dist
      timeout: 60s
      ignore_files:
        - config/settings_data.json
    settings:
      password: [your-password]
      theme_id: [your-theme-id-LIVE]
      store: [you-store.myshopify.com]
      directory: ./dist
      timeout: 60s
      ignore_files:
        - assets/*
        - layout/*
        - sections/*
        - snippets/*
        - templates/*
  

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.

Shopify Theme Development

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 Projektorders enthält nun folgende Elemente:

    .gitignore dist assets config 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 übertragt diese direkt an das Developement-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 vorgenommen Ä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

Sie benötigen Hilfe bei der Entwicklung Ihres Shopify Themes? Sprechen Sie uns einfach an.

;

Shopify 23
Teilen: