Shopify Dokumentation

Wer hat was gebaut?

Ohne Git-Historie lässt sich die Zuordnung nur aus Dateinamen ableiten — Ergebnis ist daher eine Einschätzung, keine Gewissheit.

Was funktioniert gut

Bevor wir zu den Problemen kommen: Das Theme hat eine solide Grundlage.

• ✅ CSS Custom Properties werden genutzt (--custom-product-primary) — guter Ansatz für produktspezifische Farben via Metafields
• ✅ Tracking-Integration (Hotjar, Microsoft Clarity) ist technisch korrekt eingebunden
• ✅ Font-Integration (Comfortaa, Cardo, OpenSans) mit @font-face — korrekte Implementierung
• ✅ Metafields werden sinnvoll genutzt (custom.primary für Produktfarben, custom.literpreis)
• ✅ Responsive Grundstruktur von Dawn funktioniert auf allen Geräten
• ✅ Sections-Architektur erlaubt flexibles Layout ohne Code — gut für Content-Editing

Probleme & Bewertung

Was das konkret bedeutet: Wer einen Style für Produkt A ändert, kann versehentlich Produkt B brechen — weil alles in einer Datei steht. Es gibt keine klare Trennung zwischen globalem und seitenspezifischem Code.

Gesamtbewertung

Empfehlungen

Sofort (diese Woche)

• Leere JS-Datei entfernen: thre3-custom-scripts.js aus dem Include in theme.liquid (Zeile 332) entfernen.
• Alte Produkt-Templates prüfen: Die "alten" Versionen (product.abwehrkraft.json etc.) wenn nicht mehr aktiv aus dem Theme entfernen.
• Bitbucket-Workflow einrichten: Bitbucket-Repository anlegen → Theme-Dateien einchecken → Änderungen über Shopify CLI + git commit & push versionieren. Schafft sofortigen Schutz vor versehentlichen Änderungen.

Kurzfristig (nächste 4 Wochen)

• Shopify CLI einrichten für sicheren Entwicklungs-Workflow (siehe Workflow-Anleitung)
• Naming-Konvention festlegen: Einheitlich custom- (Bindestrich) für alle neuen Custom Sections
• Kommentare in CSS: Jede Section in thre3-custom-productpage.css bekommt einen Header-Kommentar

Mittelfristig (1–3 Monate)

• CSS-Datei aufteilen: Globale Styles vs. produktspezifische Styles in separate Dateien
• Hardcoded IDs ersetzen: 77 Section-IDs durch semantische CSS-Klassen ersetzen
• JavaScript auslagern: Inline-JS aus JSON-Templates in eigene .js-Dateien verschieben

Strategisch

Grundprinzip: Sicher arbeiten

Es gibt zwei Sicherheitsstufen:

Warum das so wichtig ist

In der Vergangenheit wurden Änderungen direkt am aktiven Theme gemacht — das erklärt viele der strukturellen Probleme. Jede "schnelle Fix"-Änderung hat sich aufgestapelt ohne dass jemand einen Überblick über die Gesamtwirkung hatte.

Option A: Theme-Duplikat

Geeignet für: Kleine Textänderungen, Farbanpassungen, einfache Section-Edits

1. Shopify Admin → Online Store → Themes
2. Neben dem aktiven Theme auf "···" klicken → "Duplicate"
3. Am Duplikat arbeiten (erscheint als "Copy of [Theme-Name]")
4. Über "Preview" das Ergebnis überprüfen
5. Erst dann: "Publish" — das macht das Duplikat zum Live-Theme

Wann reicht das Duplikat nicht?

• Bei größeren Änderungen die mehrere Dateien betreffen
• Wenn mehrere Personen gleichzeitig arbeiten
• Wenn man sehen will wie Änderungen mit bestimmten Produkten/Varianten interagieren

→ In diesen Fällen: Shopify CLI verwenden

Option B: Shopify CLI (empfohlen)

Einmalig einrichten

1. Node.js installieren

→ nodejs.org → LTS-Version herunterladen und installieren

2. Shopify CLI installieren

npm install -g @shopify/cli

3. Mit Shopify verbinden

shopify auth login

→ Öffnet Browser → mit Shopify-Account einloggen → fertig

4. Theme-Dateien herunterladen

shopify theme pull --store=cell-essentials.myshopify.com

Täglicher Workflow

1. Terminal öffnen im Theme-Ordner
2. shopify theme dev --store=cell-essentials.myshopify.com ausführen
3. Shopify erstellt ein Development Theme — nur du siehst es (solange eingeloggt)
4. Dateien bearbeiten → Browser refresht automatisch
5. Zufrieden? shopify theme push --unpublished → lädt als neues Theme in Shopify hoch
6. Im Shopify-Admin nochmals testen → dann veröffentlichen

Mit Bitbucket kombinieren (empfohlen)

Shopify bietet eine direkte GitHub-Integration — ihr nutzt jedoch Bitbucket, was ebenso gut funktioniert. Der Weg: Repository in Bitbucket anlegen, Theme-Dateien dort einchecken, und Shopify CLI zieht/pusht lokal via Git. Änderungen laufen dann über Branches und Pull Requests — niemand kann unbemerkt etwas am Live-Theme ändern.

Mit Claude zusammenarbeiten

Claude gibt es in zwei verschiedenen Modi — Cowork für den Alltag und Claude Code für technische Großprojekte. Beide nutzen dasselbe KI-Modell, unterscheiden sich aber stark darin, was sie können und wer sie bedienen kann.

🖥️ Claude Cowork — wann nutzen?

Cowork ist eine Desktop-App ohne technische Vorkenntnisse bedienbar. Claude hat Zugriff auf euren ausgewählten Ordner, kann Dateien lesen und direkt bearbeiten. Wann Cowork die richtige Wahl ist:

💻 Claude Code — wann wechseln?

Claude Code läuft im Terminal und hat vollen, direkten Zugriff auf das Betriebssystem. Es kann Befehle ausführen (shopify theme dev, git commit), hunderte Dateien auf einmal verarbeiten und Aufgaben vollständig selbstständig durchführen. Wann der Wechsel zu Claude Code sinnvoll ist:

🧰 Der CE-Shopify-Theme Skill

Für Cell Essentials wurde ein spezieller Cowork-Skill erstellt: shopify-theme-assistent.skill. Ein Skill ist wie ein einmaliges Briefing, das Claude dauerhaft über euer konkretes Theme informiert — sodass jede neue Sitzung direkt mit eurem Kontext startet, ohne erneut erklären zu müssen, wie euer Theme aufgebaut ist.

Was der Skill weiß und kann

Installation in 3 Schritten

1. Skill-Datei öffnen: shopify-theme-assistent.skill per Doppelklick öffnen — Claude Cowork installiert den Skill automatisch
2. Neue Sitzung starten: Claude Cowork schließen und neu öffnen — der Skill ist jetzt aktiv (erkennbar am Namen in der Sitzung)
3. Theme-Ordner verbinden: Den lokalen Theme-Ordner (nach shopify theme pull) als Arbeitsordner in Cowork auswählen — Claude kann dann die Dateien direkt lesen

Beispielgespräche mit dem Skill

Typischer Tagesworkflow

1. Cowork starten, Theme-Ordner als Arbeitsordner wählen (einmalige Einrichtung)
2. Aufgabe beschreiben: „Ich möchte auf der Produktseite den Abstand zwischen Bild und Titel verringern"
3. Claude nennt die genaue Datei, den CSS-Selector und zeigt das fertige Code-Snippet
4. Änderung im Shopify Code-Editor einfügen — im Development Theme testen
5. Code-Snippet zurück an Claude: „Schau mal, hab ich das richtig eingebaut?"
6. Wenn alles stimmt: Live schalten + git commit nach Bitbucket

Goldene Regeln & Checkliste

Die goldenen Regeln

• 🚫 Nie Dateien löschen die du nicht verstehst
• 🚫 Nie Dateien ohne "custom" im Namen bearbeiten (das sind Shopify's Original-Dateien)
• 🚫 Nie theme.liquid oder layout/-Dateien ohne Review anfassen
• ✅ Immer auf Mobil UND Desktop testen vor dem Veröffentlichen
• ✅ Immer notieren was geändert wurde (einfache Textnotiz reicht)
• ✅ Bei Unsicherheit erst Claude fragen, dann ändern — nicht umgekehrt

Checkliste vor jeder Änderung

• Ich arbeite an einem Duplikat oder Development Theme — NICHT am Live-Theme
• Ich weiß welche Datei ich anfassen muss (oder Claude hat es bestätigt)
• Ich verstehe was die Änderung bewirkt
• Ich habe auf Mobil UND Desktop getestet
• Ich habe notiert was ich geändert habe und warum
• Ich habe überprüft ob andere Seiten noch korrekt aussehen

Was ich anfassen darf vs. was tabu ist

Team-Aktionsplan

Priorisierte Maßnahmen mit Zeitschätzungen. Start mit den Sofort-Maßnahmen — sie haben das beste Aufwand/Nutzen-Verhältnis.

Welche Datei wofür?

Schnelle Referenz für die wichtigsten Dateien im Theme.

Woran erkenne ich welche Section eine Seite verwendet?

1. Im Shopify Theme-Editor die Seite aufrufen
2. Links in der Seitenleiste sind alle Sections aufgelistet
3. Der Name der Section = der Dateiname in sections/
4. Oder: In den Browser-Entwicklertools (F12) → Inspector → nach shopify-section- suchen

Liquid Schnellreferenz

Shopify verwendet "Liquid" als Template-Sprache. Hier die wichtigsten Konzepte.

Grundsyntax

Werte ausgeben

{{ product.title }}        — gibt den Produkttitel aus
{{ product.price }}        — gibt den Preis aus
{{ section.settings.image }} — gibt eine Section-Einstellung aus

Bedingungen

{% if product.available %}
  Auf Lager
{% else %}
  Ausverkauft
{% endif %}

Schleifen

{% for image in product.images %}
  <img src="{{ image | image_url: width: 800 }}">
{% endfor %}

Filter

{{ product.price | money }}              — Preis formatiert (z.B. "29,99 €")
{{ image | image_url: width: 800 }}    — Bild-URL mit Größe
{{ 'base.css' | asset_url }}           — URL zu einem Asset

Schema (Section-Einstellungen)

{% schema %}
{
  "name": "Meine Section",
  "settings": [
    {
      "type": "text",
      "id": "heading",
      "label": "Überschrift",
      "default": "Hallo!"
    }
  ]
}
{% endschema %}

→ Dieses Schema erzeugt ein Textfeld im Theme-Editor. Der Wert ist dann über {{ section.settings.heading }} verfügbar.

CSS in Sections

CSS das nur für eine bestimmte Section gilt, kommt in einen {% style %}-Block:

{% style %}
  .section-{{ section.id }} {
    background: {{ section.settings.bg_color }};
    padding: {{ section.settings.padding }}px;
  }
{% endstyle %}

section.id ist eine eindeutige ID — so gilt das CSS nur für genau diese Section-Instanz, nicht für alle.

Fehlerdiagnose

Wenn etwas nicht stimmt — strukturiert vorgehen statt raten.

Erst diese Fragen klären

• Wann ist das Problem aufgetaucht? Direkt nach einer Änderung? Dann die letzte Änderung rückgängig machen.
• Betrifft es alle Seiten oder nur bestimmte? Wenn alle → wahrscheinlich theme.liquid oder globales CSS. Wenn nur eine Seite → deren Section oder Template.
• Sieht es auf Mobil und Desktop gleich falsch aus? Wenn nur Mobil → ein @media (max-width: ...)-Block ist schuld.

Häufige Probleme und ihre Ursachen

Browser-Entwicklertools nutzen

1. F12 drücken (oder Rechtsklick → "Untersuchen")
2. Tab "Elements": Zeigt den HTML-Code. Rechtsklick auf ein Element → "Inspect" um es direkt zu finden.
3. Tab "Styles" (rechts): Zeigt welche CSS-Regeln auf das Element wirken — und welche durchgestrichen (= überschrieben) sind.
4. Tab "Console": Zeigt JavaScript-Fehler in Rot.

Wenn du nicht weiterkommst

Beschreibe das Problem so für Claude:

1. Was ist das Problem? (Screenshot wenn möglich)
2. Auf welcher Seite / welchem Produkt?
3. Was wurde zuletzt geändert?
4. Passiert es auf Mobil, Desktop, oder beiden?

Dann den relevanten CSS- oder Liquid-Code dazu kopieren.