Shopify Theme-Entwicklung: ein praktischer Einstieg
Shopify Theme-Entwicklung
Shopify Theme-Entwicklung: CLI, Ordner und Liquid-Grundlagen | We.Inc
Starte mit einem Shopify Theme: Theme-Befehle der Shopify CLI, was jeder Theme-Ordner enthält, Liquid-Grundlagen und JSON-Templates, mit Befehlen zum Kopieren.
Installiere die Shopify CLI, führe shopify theme init aus, um das Starter-Theme Skeleton zu klonen, und dann shopify theme dev --store your-store, um es unter http://127.0.0.1:9292 mit Hot Reload in Chrome anzusehen. Bearbeite Liquid, CSS und JSON-Templates lokal, prüfe mit shopify theme check auf Fehler und lade mit shopify theme push hoch.
Die Theme-Befehle der Shopify CLI, die du am häufigsten nutzt
Befehl
Was er laut Shopify macht
shopify theme init
Klont ein Git-Repository als Ausgangspunkt für die Entwicklung eines Themes
shopify theme dev
Lädt das Theme als Entwicklungs-Theme hoch, damit du eine Vorschau sehen kannst
shopify theme pull
Ruft Theme-Dateien von Shopify ab
shopify theme push
Lädt deine lokalen Theme-Dateien zu Shopify hoch
shopify theme check
Führt Theme Check aus, um deinen Theme-Code auf Fehler zu analysieren
shopify theme share
Lädt dein Theme als neues, unveröffentlichtes Theme hoch
shopify theme publish
Veröffentlicht ein unveröffentlichtes Theme aus deiner Bibliothek
Theme-Entwicklung heißt, das Design eines Shops als echte Dateien auf deinem Computer zu bearbeiten, mit deinem eigenen Editor und Versionskontrolle, statt im Admin. Klick dich durch den Ordner-Explorer unten, um zu lernen, was wo liegt, und kopiere dann die Befehle, um eine Vorschau zu starten.
Installiere die Shopify CLI und melde dich bei einem Entwicklungsshop oder einem Shop an, auf den du Mitarbeiterzugriff hast.
Führe shopify theme init aus, um ein Starter-Theme zu bekommen, oder shopify theme pull, um ein bestehendes herunterzuladen.
Führe shopify theme dev aus und öffne die lokale Adresse in Chrome; Änderungen an CSS und Sections werden beim Speichern neu geladen.
Führe shopify theme check aus und push oder teile das Theme dann, wenn es zur Prüfung bereit ist.
Halte das Theme ab dem ersten Commit in Git. Der Datei-Verlauf im Admin ist begrenzt, dein Repository nicht.
Arbeite mit einem Entwicklungs-Theme, nie direkt am Live-Theme. Push nur bewusst auf das Live-Theme.
Denk an die Template-Limits: bis zu 25 Sections pro JSON-Template und bis zu 50 Blocks pro Section.
Shopify kennzeichnet das Liquid-Objekt theme als veraltet, bau also keine Logik auf dem Namen oder der ID eines Themes auf.
Häufige Fragen
Was ist Liquid?
Liquid ist die Template-Sprache von Shopify. Doppelte geschweifte Klammern geben einen Wert aus, etwa einen Produkttitel, und Tags aus geschweifter Klammer mit Prozentzeichen enthalten Logik wie if-Anweisungen und Schleifen. Filter ändern, wie ein Wert angezeigt wird.
Brauche ich einen kostenpflichtigen Tarif, um Themes zu entwickeln?
Entwickler bauen meist auf einem Entwicklungsshop, der über ein Shopify-Partner-Konto erstellt wird. Prüfe die aktuellen Bedingungen im Partner-Dashboard, da sie sich ändern können.
Was ist ein JSON-Template?
Eine Datendatei, die die Sections auflistet, die eine Seite rendert, samt ihren Einstellungen. Sie braucht ein sections-Objekt mit mindestens einer Section und ein order-Array mit Section-IDs.
Warum lädt meine Vorschau nur in Chrome neu?
Laut Shopifys Einstiegsleitfaden funktioniert die Hot-Reload-Vorschau nur in Google Chrome. In anderen Browsern aktualisierst du von Hand.
Soll ich mit Dawn, Horizon oder Skeleton starten?
Der init-Befehl der CLI klont Skeleton, eine minimale Basis für ein Theme, das von Grund auf gebaut wird. Starte mit einem vollständigen kostenlosen Theme, wenn du vor allem ein bestehendes Design anpassen willst.
Wie eine Seite zusammengesetzt wird
Eine Layout-Datei umschließt jede Seite mit dem gemeinsamen Rahmen, etwa dem head-Tag und dem Header. Ein JSON-Template legt dann fest, welche Sections die Seite füllen, und jede Section ist eine Liquid-Datei, die Blocks und Snippets enthalten kann.
Shop-Betreiber ordnen diese Sections im Theme-Editor neu an. Deine Aufgabe als Entwickler ist es, Sections mit Einstellungen flexibel zu machen, damit der Betreiber dich für eine kleine Änderung nie anrufen muss.
Arbeit zwischen deinem Computer und dem Shop verschieben
Pulle vor dem Start, falls jemand das Theme im Admin bearbeitet hat, sonst kann dein Push dessen Änderungen überschreiben. Der push-Befehl überschreibt die Remote-Version, wenn du ein bestehendes Theme als Ziel angibst.
Nutze share, um einem Kunden eine Vorschau zu geben: Es lädt das Theme als neue, unveröffentlichte Kopie in seine Bibliothek hoch, die er ansehen kann, bevor irgendetwas live geht.
Befehle, um eine Vorschau zu starten
Ersetze my-store durch den myshopify-Namen deines Shops. Führe sie in einem leeren Ordner aus.
Ein Theme starten und ansehen
init klont das Starter-Theme Skeleton; dev gibt eine lokale Adresse aus, die deine Änderungen an CSS und Sections neu lädt.
Prüfen und hochladen
Führe check vor jedem Upload aus. share erstellt eine neue unveröffentlichte Kopie, das ist für die Prüfung durch Kunden am sichersten.
Liquid in einem Snippet
Output-Tags geben Werte aus, Logik-Tags entscheiden, was gerendert wird, und Filter formen einen Wert um.
Ein Produkttitel und Preis
Das if-Tag blendet die Zeile mit dem Vergleichspreis aus, wenn es keinen Sale gibt; der money-Filter formatiert den Preis für die Währung des Shops.
Theme-Ordner-Explorer
Jeder Ordner eines Standard-Themes und was er enthält. Wähle einen aus, um ihn hervorzuheben.
Bilder, CSS- und JavaScript-Dateien, die das Theme nutzt.
Theme Blocks, die neuere Art von Blocks, um die Themes wie Horizon herum gebaut sind.
Konfigurationsdateien des Themes, darunter settings_schema.json.
Übersetzungsdateien, damit die Texte des Themes in anderen Sprachen erscheinen können.