Shopify

Unter Einstellungen → Shopify → Verbindung verbindest du deinen Shopify-Shop und steuerst den Abgleich (Adresse /settings/integrations/shopify). Daneben stehen Collections (Artikel in Shopify-Collections gruppieren) und Collection-Metafelder.

Welche Eigenschaften Shopify bekommt und wie die Produktseite sie zeigt, legst du nicht hier fest, sondern unter Einstellungen → Artikel → Artikelaufbau → Eigenschaften in der Ansicht Shopify — sie zeigt die Produktseite in Shopify als Vorschau. Diese Seite erklärt, was der Abgleich daraus macht, wie du den Block „FlowAgents Eigenschaften" in dein Theme einbaust und unter welchen Namen die Eigenschaften im Shop ankommen.

Verbindung und Einstellungen

• Mit Shopify verbinden — die Verbindung läuft über die Shopify-App-Autorisierung; du gibst die Store-URL (mein-shop.myshopify.com) ein und bestätigst im Shopify-Admin. Die Karte nennt danach den verbundenen Shop und seine Berechtigungen. Verlangt eine neue Version mehr Berechtigungen, steht dort Berechtigungen aktualisieren.
• Jede Farbe ein eigener Shopify-Artikel — jede Farbe eines Artikels kommt als eigener Shopify-Artikel in den Shop, mit den Größen als Varianten. Die übrigen Farben zeigt der Shop mit Farben im Shop als Punkte, ein Klick öffnet die Seite dieser Farbe.
• Farben im Shop — Farbpunkte auf Produktseite und Kacheln und ein Filter nach Grundfarbe. Einrichten: Farben im Shop.
• Lagerort, Bestandssynchronisierung, Verkaufskanäle, Bestellimport und Versandmeldung — je eine Karte; der Abschnitt Sync-Verlauf zeigt die letzten Abgleiche mit Stand und Fehlermeldung.

Am Artikel schaltest du unter B2C / Shopify je Farbe ein, ob sie nach Shopify geht. Was Shopify verlangt, zählt die Seite Vervollständigen des Artikels mit; eine Farbe, der etwas fehlt, wartet mit Grund, bis die Angabe da ist.

Was der Abgleich überträgt

Jede Änderung an einem Artikel merkt sich das System; alle zehn Minuten geht, was sich geändert hat, in den Shop. Jetzt synchronisieren auf der Verbindungsseite stößt einen vollen Abgleich an. In Shopify kommt an:

Für den Shopify-Admin heißt das: Was flowagents überträgt, führt flowagents. Änderst du einen dieser Werte im Shopify-Admin, stellt der nächste Abgleich dieses Artikels den Wert aus flowagents wieder her — pflege ihn deshalb bei uns.

Versand- und Zollfelder

Gewicht, Herkunftsland und Zolltarifnummer gehen immer in Shopifys eigene Felder an der Variante, sobald ein Wert gepflegt ist — Versand und Zoll brauchen sie. Sie lösen dort keine Pflicht aus: Fehlt ein Wert, bleibt das Feld leer, der Artikel geht trotzdem raus. Leerst du einen Wert bei uns, wird er auch in Shopify geleert. Es gilt der Wert der Größe (Ausnahme je Variante), sonst der Wert der Farbe, sonst der des Styles.

Lehnt Shopify einen Wert ab — etwa ein Herkunftsland ohne Ländercode oder eine Zolltarifnummer in falscher Länge —, zeigt der Artikel den Stand Fehler mit Shopifys Meldung; nach der Korrektur läuft der nächste Abgleich von selbst durch.

Zusätzlich werden die vier Stammdaten (Herkunftsland, Zolltarifnummer, Gewicht, Zertifikat) ein Metafeld, wenn sie auf der Shopify-Produktseite stehen — und erst dann sind sie am Artikel Pflicht für Shopify.

Eigenschaften als Metafelder

Jede Eigenschaft der Shopify-Produktseite wird ein eigenes Metafeld, das das Plugin selbst in Shopify anlegt: Namensraum flow, Schlüssel der Eigenschaft — flow.fit für die Passform, flow.material_composition für die Materialzusammensetzung. Der Namensraum ist fest und bleibt in jedem Theme gleich.

• Welche Werte gehen: Ein Artikel überträgt die Eigenschaften der Seite, die sein Produkttyp abfragt. Was sein Typ nicht hat, fehlt still — wie auf der Produktseite des B2B-Shops.
• Klartext in der Shop-Sprache: Aus einer Auswahl wird die Beschriftung („Regular", nicht regular), aus einer Mehrfachauswahl eine Textliste, aus Ja/Nein ein Wahrheitswert. Die Sprache ist die Hauptsprache deines Shops — Deutsch oder Englisch, jede andere Sprache bekommt Englisch. Ein Freitext, der in der Shop-Sprache nicht gepflegt ist, geht auf Deutsch; der Artikel sagt das unter B2C / Shopify in der Zeile Nur auf Deutsch.
• Angezeigt heißt Pflicht: Jede Eigenschaft der Seite muss am Artikel gefüllt sein. Eine Farbe ohne diese Angabe ist für Shopify „nicht bereit" und wartet sichtbar mit Grund; nach dem Füllen geht sie beim nächsten Abgleich raus.
• Ebene des Werts: Jede Farbe ist ein eigener Shopify-Artikel, alle Metafelder stehen an ihm; weicht eine Farbe vom Style ab, gewinnt ihr Wert. Eine Eigenschaft, die je Farbe gilt (etwa Muster & Farbeffekt), trägt nur den Wert ihrer Farbe — fehlt er, hat die Farbe weder Metafeld noch Zeile und wartet. Ändert sich der Wert an einer Farbe, wird nur das Shopify-Produkt dieser Farbe neu übertragen.
• Pflegekennzeichen gehen zweimal als eigene Metafelder: als Textliste der Pflegehinweise (flow.care_symbols, „Waschen bei 30 °C") und als Liste der Codes (flow.care_symbols_codes, wash_30), aus der ein Theme eigene Symbole zeichnen kann. Die Darstellung wählst du wie beim B2B-Shop — Symbole, Text oder Symbole mit Text —, und der Block „Eigenschaften flowagents" zeigt sie genau so: Die Symbole reisen mit der Anzeigeliste, in der Textfarbe deines Themes (auch im dunklen Farbschema lesbar) und so groß wie die Schrift. Eine neue Form erreicht die Artikel beim nächsten Abgleich.
• Geleert heißt weg: Leerst du einen Wert am Artikel, verschwindet sein Metafeld beim nächsten Abgleich aus dem Shop. Der Shop zeigt nie etwas, das bei uns niemand mehr pflegt.

Stand, Fehler und „Erneut übertragen"

Die Vorschau in der Ansicht Shopify nennt unter jeder Zeile ihren Stand: übertragen, wartet auf den nächsten Abgleich, wird nach dem Speichern übertragen (neu gesetzt, noch nicht gespeichert) oder Fehler mit der Meldung des Abgleichs und dem Griff Erneut übertragen. Über der Vorschau zählt eine Zeile die Stände zusammen („1 Fehler · 1 wartet · 2 übertragen"); hat Shopify die Anzeigeliste für den Block abgelehnt, steht dort „Die Produktseite ist nicht in Shopify angekommen." mit Erneut übertragen.

Ein Fehler ist ein Fehler: Lässt sich auch nur eines von mehreren Metafeldern eines Artikels nicht schreiben, gilt der Abgleich dieses Artikels als gescheitert. Der Artikel zeigt Fehler mit „x von n", die Zeile in der Vorschau ebenso; nichts davon wird als erledigt abgehakt. Nach der Behebung — ein korrigierter Wert, ein wieder erreichbarer Shop — läuft der nächste Abgleich von selbst durch. Erneut übertragen merkt die betroffenen Artikel sofort vor; der nächste Abgleich schreibt die Werte, der Stand steht bis dahin auf „wartet".

Herausnehmen und Umbenennen

• Herausnehmen räumt auf. Nimmst du eine Eigenschaft von der Seite, nennt die Zeile vor dem Speichern, bei wie vielen Artikeln sie aus dem Shop verschwindet; die Speicherleiste wiederholt die Zahl. Nach dem Speichern löscht das Plugin das Metafeld samt allen Werten in Shopify. Nimmst du die Eigenschaft später wieder auf, legt der nächste Abgleich das Metafeld neu an und schreibt die Werte zurück.
• Umbenennen führt nach. Benennst du eine Eigenschaft um, bekommt das Metafeld in Shopify den neuen Namen; sein Schlüssel (flow.fit) bleibt. Benennst du einen Wert um („Regular" → „Normal"), gehen die betroffenen Artikel beim nächsten Abgleich mit dem neuen Text raus.
• Produkttyp oder Feldsatz geändert: Fragt der Typ eines Artikels eine Eigenschaft nicht mehr ab, entfernt der nächste Abgleich ihr Metafeld an genau diesem Artikel.
• In Shopify gelöscht kommt zurück. flowagents bestimmt, welche flow-Felder es im Shop gibt. Löscht jemand im Shopify-Admin oder eine andere App eine solche Definition, legt der Abgleich sie spätestens nach einer Stunde neu an und schreibt die Werte aller betroffenen Artikel zurück. Willst du eine Eigenschaft im Shop nicht mehr haben, nimm sie in flowagents heraus, nicht in Shopify. Ein einzelner, von Hand an einem Produkt gelöschter Wert kommt erst mit der nächsten Änderung an diesem Artikel zurück.

Block „FlowAgents Eigenschaften" einbauen

Der App-Block „FlowAgents Eigenschaften" zeichnet die Eigenschaften eines Artikels auf der Produktseite deines Shops — genau so, wie die Vorschau in der Ansicht Shopify sie zeigt:

• Was er zeigt: die Gruppen mit ihren Überschriften, darin je Zeile Bezeichnung und Wert in der Sprache deines Shops. Leere Angaben lässt er weg. Die Pflegekennzeichen zeigt er in der Form, die du gewählt hast — Symbole, Text oder Symbole mit Text; die Symbole bringt er selbst mit, in der Textfarbe deines Themes und so groß wie die Schrift. Hat ein Artikel noch nichts übertragen bekommen, zeigt der Block nichts.
• Woher Reihenfolge und Bezeichnungen kommen: aus Einstellungen → Artikel → Artikelaufbau → Eigenschaften, Ansicht Shopify — Reihenfolge der Gruppen und Zeilen, Namen der Eigenschaften und Gruppen, die Gruppen selbst und die Form der Pflegekennzeichen. Im Theme stellst du je Eigenschaft nichts ein. Nach dem Speichern erreicht eine Änderung die betroffenen Artikel mit dem nächsten Abgleich (alle zehn Minuten).
• Nur dieser eine Block: Er ersetzt einzelne Blöcke je Eigenschaft. Hast du bisher je Eigenschaft einen Text-Block mit einem flow-Metafeld als dynamischer Quelle gesetzt, entferne diese Blöcke — sonst stehen die Angaben doppelt auf der Seite.
• Die einzelnen Felder bleiben: flow.fit, flow.material_composition und alle anderen flow.<schlüssel> gehen weiter mit — für eigene Theme-Bauten (etwa die Passform neben dem Titel) und für Shopifys Filter. Ihre Namen stehen unten.

Wo der Block herkommt

Der Block gehört zur flowagents-App: Ist dein Shop mit flowagents verbunden, steht er im Theme-Editor unter Apps bereit — ohne Datei und ohne Support. Er läuft in jedem Online-Store-2.0-Theme (etwa Horizon oder Dawn), kommt mit jeder neuen App-Version von selbst auf den neuen Stand und verschwindet, wenn du die App deinstallierst.

Block im Theme-Editor einsetzen

Am schnellsten geht es aus flowagents: Unter Einstellungen → Artikel → Artikelaufbau → Eigenschaften, Ansicht Shopify, steht unter der Vorschau Block im Theme-Editor einfügen. Der Link öffnet den Theme-Editor deines veröffentlichten Themes auf der Produktvorlage und setzt den Block in den Produktabschnitt. Zieh ihn an die gewünschte Stelle und speichere — in Horizon landet er zunächst unter der Gruppe Produktdetails; zieh ihn in die Gruppe, damit er neben Preis und Beschreibung steht.

Von Hand:

1. Im Shopify-Admin Onlineshop → Themes → Anpassen öffnen.
2. Oben die Vorlage Produkte → Standardprodukt wählen (oder die Produktvorlage, die deine Artikel nutzen).
3. Im Produktabschnitt Block hinzufügen wählen, in der Liste den Reiter Apps öffnen und FlowAgents Eigenschaften auswählen. In Horizon geht das auch in der Gruppe Produktdetails („Product details") — dort steht der Block neben Preis und Beschreibung.
4. Den Block an die gewünschte Stelle ziehen — zum Beispiel unter die Beschreibung.
5. Optional: Überschrift zeigen aus- oder einschalten, die Überschrift ändern (leer = „Eigenschaften" in der Sprache deines Shops) und den Abstand oben und unten einstellen. Speichern.

Hast du den Block früher als Theme-Datei (blocks/flow-properties.liquid) bekommen, setz den App-Block an seine Stelle und entferne danach den alten Block und die Datei — sonst steht die Liste doppelt auf der Seite. Am sichersten arbeitest du in einer Kopie des Themes (⋯ → Duplizieren) und veröffentlichst sie, wenn alles passt.

Kein Reiter „Apps"? Eigenes oder älteres Theme

Themes aus dem Shopify Theme Store nehmen App-Blöcke im Produktabschnitt auf. Fehlt bei Block hinzufügen der Reiter Apps, erlaubt dein Theme dort keine App-Blöcke — das kommt bei individuell entwickelten Themes vor. Gib deinem Theme-Entwickler diesen Hinweis:

• Im Schema des Produktabschnitts (meist sections/main-product.liquid, in Horizon sections/product-information.liquid) gehört in die Liste blocks der Eintrag { "type": "@app" }. Danach steht der Reiter Apps bereit, und du setzt den Block ein wie oben beschrieben.
• Ein sehr altes Theme (vor Online Store 2.0, also vor 2021) kennt keine App-Blöcke. Dort baut der Entwickler die Angaben selbst aus den einzelnen Feldern flow.<schlüssel> ins Theme — siehe unten.

flowagents liest dein Theme nicht und prüft nicht, ob der Block eingebaut ist: Die Vorschau zeigt die Seite immer so, wie der Block sie zeichnet. Ob sie im Shop so erscheint, siehst du an einer Artikelseite deines Shops.

Farben im Shop einrichten

Mit Farben im Shop (Einstellungen → Shopify → Verbindung) zeigt dein Shop die Farben eines Artikels als Punkte — auf der Produktseite alle Farben, die eigene markiert, und in jeder Kachel (Kollektion, Suche, Startseite, „Ähnliche Produkte") drei Punkte und „+n". Ein Klick auf einen Punkt öffnet die Seite dieser Farbe. Ausverkaufte Farben fehlen, die eigene bleibt immer stehen. Dazu kommt ein Filter Farbe mit deinen Grundfarben.

Voraussetzungen

• Grundfarbe ist Pflicht: Ist der Schalter an, braucht jede Farbe für Shopify eine Grundfarbe (an der Stammfarbe oder, bei einer frei eingetragenen Farbe, am Artikel). Eine Farbe ohne Grundfarbe geht nicht nach Shopify und wartet mit dem Grund „Grundfarbe" auf der Seite Vervollständigen des Artikels; schon ausgespielte Farben bleiben im Shop. Ein eigener Farbwert (Hex) ist keine Pflicht — fehlt er, nimmt der Punkt den Wert der Stammfarbe, sonst den Punkt der Grundfarbe; Mehrfarbig erscheint als Farbkreis. Fehlt jeder Punkt — etwa bei einer schon ausgespielten Farbe ohne Grundfarbe —, zeigt der Shop einen schraffierten Punkt.
• Berechtigungen: Steht in der Karte Verbindung oder unter Farben im Shop Berechtigungen aktualisieren, braucht die App noch eine Freigabe in Shopify — für die Grundfarben (Filter) oder für die Kacheln. Ohne sie bleiben Filter bzw. Kacheln leer.

In Shopify einrichten — nach dem Einschalten nennt Farben im Shop drei Schritte; die ersten beiden sind je ein Link.

1. Produktseite: Block einsetzen — der Link öffnet den Theme-Editor auf der Produktvorlage und setzt den App-Block FlowAgents Farben in den Produktabschnitt. Zieh ihn an die gewünschte Stelle (etwa unter den Preis) und speichere. Den Artikel der Seite findet der Block selbst.

2. Kacheln: im Theme einschalten — der Link öffnet den Theme-Editor bei App-Einbettungen, FlowAgents Farben ist dort schon eingeschaltet. Nur noch speichern. Danach zeigt jede Produktkarte die Punkte; Kacheln, die nachladen (Filter, Weiterblättern), bekommen sie ebenfalls. Gebaut und geprüft ist das für die Themes Horizon und Dawn. In einem anderen Theme bleiben die Kacheln womöglich ohne Punkte — Farben im Shop sagt es dir dann; die Produktseite zeigt die Punkte in jedem Theme, das App-Blöcke annimmt.

3. Filter „Farbe" anlegen — mit der App Search & Discovery von Shopify (kostenlos). Ist sie noch nicht im Shop, installiere sie zuerst aus dem Shopify App Store; der Link unter Farben im Shop führt danach direkt zu ihren Filtern. Dort:

   1. Filter hinzufügen, Quelle Produkt-Metafeld → „Base color (FlowAgents)".
   2. Bezeichnung frei wählen, etwa „Farbe".
   3. Visuelles Element einbeziehen, Darstellung Farbfelder: als Farbe das Feld Color dot, als Bild das Feld Pattern. Mehrfarbig hat keinen Farbwert, sein Farbkreis kommt aus dem Bild — ohne Bildfeld bleibt sein Feld im Filter leer.
   4. Speichern und den Filter in der Liste an die gewünschte Stelle ziehen.

   flowagents kann Filter in Shopify nicht lesen — hake den Schritt unter Farben im Shop mit Erledigt selbst ab. Der Filter zeigt nur Grundfarben, die in der jeweiligen Kollektion vorkommen.

Die Schritte 1 und 2 haken sich selbst ab: flowagents liest dein veröffentlichtes Theme, sobald du zurück in flowagents bist. Wie der Filter aussieht, bestimmt dein Theme — Horizon zeigt die Grundfarben als Farbfelder ohne Namen daneben.

Was Shopify je Farbe bekommt: den Farbpunkt und die Geschwisterfarben (flow.color-dots, flow.color-siblings) und den Verweis auf die Grundfarbe (flow.base-color) — die Grundfarben selbst legt flowagents als Einträge Base color (FlowAgents) in der Sprache deines Shops an und führt sie nach, wenn du eine Grundfarbe umbenennst, ihr einen neuen Punkt gibst, sie anlegst oder deaktivierst. Kommt eine Farbe zu einem Artikel hinzu oder fällt eine weg, bekommen alle Farben dieses Artikels mit dem nächsten Abgleich die neuen Geschwister.

Für Theme-Entwickler: die Shopify-Namen

Das Plugin legt die Metafeld-Definitionen selbst an (Kategorie Produkt). Im Theme-Editor lassen sie sich wie jedes Metafeld als dynamische Quelle einem Block zuweisen; in Liquid liest du sie über den Namensraum flow.

Der <schlüssel> ist der Schlüssel der Eigenschaft — er steht zum Kopieren unter jeder Zeile der Vorschau in der Ansicht Shopify. Die vier Stammdaten erscheinen nur, wenn sie auf der Seite stehen; Gewicht, Herkunftsland und Zolltarifnummer stehen davon unabhängig immer in den Versand- und Zollfeldern der Variante (variant.weight, Herkunftsland und HS-Code am Inventory-Item).

Alles am Produkt. Jede Farbe ist ein eigener Shopify-Artikel, ein Theme liest die Metafelder am Produkt:

{%- assign fit = product.metafields.flow.fit.value -%}
{%- if fit != blank -%}<dt>Passform</dt><dd>{{ fit }}</dd>{%- endif -%}

{%- assign care = product.metafields.flow.care_symbols_codes.value -%}
{%- for code in care -%}
  {{ 'care-' | append: code | append: '.svg' | asset_url | img_tag }}
{%- endfor -%}

{%- assign weight = product.metafields.flow.weight_grams.value -%}
{%- if weight -%}{{ weight.value }} {{ weight.unit }}{%- endif -%}

Eigener Bau statt Block. Ein Theme muss den Block nicht nutzen; die Felder gehen in jedem Fall an Shopify. Zwei Dinge sollte der Theme-Entwickler dann wissen:

• Die Seite pflegt er selbst. Reihenfolge, Gruppen und Bezeichnungen aus Eigenschaften → Shopify zeichnet nur der Block. Baut das Theme die Angaben aus den einzelnen Feldern, ändert ein Umsortieren oder Umbenennen in flowagents dort nichts — das legt das Theme fest.
• Die Liste in flowagents bestimmt, welche Felder es gibt. Nimmst du eine Eigenschaft aus der Ansicht Shopify, löscht der nächste Abgleich ihr Feld samt Werten in Shopify. Ein Theme, das genau dieses Feld zeigt, zeigt dann nichts mehr — sprich solche Änderungen mit deinem Theme-Entwickler ab.

Hinweise für das Theme:

• Listen (list.*) liefern über .value ein Array; multi_line_text_field enthält Zeilenumbrüche (| newline_to_br); boolean liefert über .value true oder false.
• Filter: Shopifys Search & Discovery nimmt einzeiligen Text, Textlisten und Ja/Nein als Filter an — also Auswahl, Mehrfachauswahl, Textliste, kurzen Freitext, Herkunftsland, Zolltarifnummer und Zertifikat. Mehrzeiliger Text (langer Freitext, Materialzusammensetzung) und das Gewicht sind Anzeigefelder. Die Filter selbst richtest du in Shopify ein.
• Die Definitionen sind nicht angeheftet und haben keinen Zugriff für die Storefront-API gesetzt. Liquid braucht das nicht; für Hydrogen oder die Storefront-API schaltest du den Zugriff in den Shopify-Einstellungen der Definition frei.
• flow.display-list ist das Eingabeformat des Blocks „FlowAgents Eigenschaften" und folgt ihm. Für eigene Bauten und Filter nimm die einzelnen Felder flow.<schlüssel>.
• Wo das Theme ein einzelnes Metafeld zeigt, entscheidet das Theme — flowagents richtet dafür keine Blöcke ein; der eine Block für die ganze Seite ist „FlowAgents Eigenschaften".