Color Swatch in Produktübersicht / Kollektion und Produktseite (kostenlos)

Hallo an alle,

ich bin ein relativ neuer Shopify-Nutzer und aktuell auf der Suche wie ich bei mir Color Swatches integrieren kann.

Ich habe einen sehr kleinen Shop für meine eigenen Merchandise Produkte. Ich möchte gerne auf der Produktübersichtsseite, auf der Kollektionsseite sowie auf der Produkteinzelseite Color Swatches integrieren.

Gibt es hierzu eine simple Möglichkeit? Ich hab schon im Netz gesucht - finde aber nur Möglichkeiten wo der Code bearbeitet werden muss. Und soweit ich es richtig verstehe bekomme ich da Probleme bei Updates meines Themes, da der Code dann wieder weg ist. PS: als Theme verwende ich Spotlight

Des Weiteren habe ich gefunden, dass es anscheinend jetzt in Shopify eine Möglichkeit geben soll ohne zusätzliche Modifikationen Color Swatches zu verwenden. Werde aber dazu in den Einstellungen nicht fündig.

Vielen Dank schon mal für eure Hilfe :slightly_smiling_face:

Hey @msshop

Danke für die Fragen und um Color Swatches in deinem Shopify-Shop mit dem Spotlight-Theme zu integrieren, ohne dass Code-Änderungen nötig sind, kannst du die integrierten Funktionen von Shopify nutzen. Beachte aber, dass das Spotlight Theme möglicherweise nicht damit kompatibel ist wie beispielsweise das Dawn Theme (mehr dazu hier).

Shopify bietet neuerdings eine eingebaute Unterstützung für Color Swatches, die du über die Theme-Einstellungen aktivieren kannst. Hier sind die Schritte, die du folgen kannst:

  1. Gehe zu deinem Shopify-Adminbereich: Klicke auf Online Store und dann auf Themes.

  2. Öffne den Theme-Editor: Klicke bei deinem aktiven Theme auf Customize.

  3. Navigiere zu den Theme-Einstellungen: Sobald du im Theme-Editor bist, suche und öffne die Theme Settings (Themen-Einstellungen).

  4. Ändere die Produktvarianten-Einstellungen: In den Theme-Einstellungen solltest du einen Abschnitt für Products (Produkte) finden. Hier kannst du die Art der Produktvarianten von Buttons auf Swatches ändern und Show custom swatch images auswählen, falls verfügbar .

  5. Farbnamen festlegen: Die Farbnamen müssen den Namen entsprechen, die in deinen Produktvarianten verwendet werden. Stelle sicher, dass die Farbnamen mit den Farboptionen deiner Produkte übereinstimmen.

  6. Vorschau und Speichern: Überprüfe die Änderungen im Vorschau-Modus und speichere sie, wenn alles korrekt aussieht.

Diese Schritte ermöglichen es dir, Color Swatches auf deiner Produktseite zu verwenden, ohne dass zusätzliche Apps oder Plugins erforderlich sind. Dadurch bleibt dein Shop auch nach Theme-Updates konsistent und du vermeidest Probleme mit nicht mehr funktionierendem benutzerdefinierten Code.

Wenn du dennoch Schwierigkeiten hast oder die Einstellungen nicht wie beschrieben auffindbar sind, kann es hilfreich sein, die Dokumentation deines Themes zu konsultieren oder den Shopify-Support für spezifische Anleitungen bezüglich deines Themes zu kontaktieren.

Hoffe das hilft dir weiter - lass wissen falls nicht! :wink:


Warum nicht etwas Gamification in das Shop einbauen, um deinen Kunden etwas Fun im Shop anzubieten? Gerne kann ich bei Interesse Tipps dazu geben!

Hast du weitere Fragen zum Shop? Gebe einfach ein Suchbegriff oben in der Suchleiste der Community Landingpage ein, denn das Thema haben wir sehr wahrscheinlich schon besprochen. Halte bitte Ausschau in deiner E-Mail auf Notifications zu Antworten auf deine Fragen in der Community.

Ich habe nun auf das Dawn-Theme gewechselt und versuche deine beschriebenen Schritte zu befolgen.

In den Theme-Einstellungen gibt es die Kategorie Produkte nicht (siehe Bild):

Ich vermute du meinst “Produktkarten”.

Jedoch ist unter “Produktkarten”.

Hier finde ich jedoch keine Einstellung bzgl. der Swatches:

Hey @msshop

My bad, das war nicht super ausgedrückt da hast du recht. Siehe wie hier im Screenshot meiner Dawn Theme PDP (Produktdetailseite):

Wenn ich rechts auf “Farbfelder” klicke, dann werde ich zu folgendem Hilfeartikel geleitet:

https://help.shopify.com/de/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches

Die Seite besagt das Kategorie Metafelder benötigt werden. Was auf folgender Seite erklärt wird:

https://help.shopify.com/de/manual/products/details/product-category#category-metafields

Die Metafelder sollten ja laut nachfolgendem Bild für den Bereich “Bekleidung” verfügbar sein:

Gemäß folgenden Hinweisen habe ich nochmals die Kategorie sowie den Produkttyp überprüft:

Es werden jedoch keine “Metafelder” angzeigt (siehe Screenshot):

Hi @msshop ,

vielen Dank für die detaillierte Antwort.

Klappt die Anzeige der Metafelder mithilfe dieser Anleitung hier?

Hallo Kai,

ich hab die Anzeige der Metafelder mit deiner Anleitung getestet.

Die Erstellung des Metafelds “Pflegeguide” hat geklappt.

Hier die Screenshots für einen Testartikel den ich selbst angelegt habe

Bei einem Testartikel (den ich selbst erstellt sieht man unten das Metafeld “Pflegeguide”.

Hier die Screenshots für einen über die API Schnittstelle importierten Artikel mit der Shirtigo App.

Auch hier wird das Metafeld angezeigt

Wie soll ich weiter machen?

Hey @msshop

Um Farbfelder in deinem Shopify-Shop ohne zusätzliche Apps zu integrieren, kannst du die eingebauten Funktionen von Shopify nutzen. Hier ein paar Schritte, wie du vorgehen kannst:

Produktvarianten-Einstellungen ändern:

  • In den Theme-Einstellungen solltest du einen Abschnitt für „Products“ (Produkte) finden. Hier kannst du die Darstellung der Produktvarianten von Dropdown-Menüs auf Farbfelder ändern.
  • Stelle sicher, dass die Produkte korrekt kategorisiert sind und dass die Produkttypen richtig eingestellt sind. Überprüfe dies nochmals, um Fehler zu vermeiden.

Farbnamen festlegen:

  • Die Farbnamen müssen genau mit den Namen in deinen Produktvarianten übereinstimmen. Stelle sicher, dass die Farbnamen in deinen Produkten den definierten Farben entsprechen.

Stelle sicher, dass die Metafelder für deine Produktkategorien korrekt konfiguriert sind. Gehe folgendermaßen vor:

Navigiere zur Metafelder-Konfiguration:

  • Gehe in deinem Shopify Admin zu „Einstellungen“ unten links.
  • Klicke auf „Metafelder“.

Metafelder für Kategorien hinzufügen:

  • Unter dem Abschnitt „Produkte“ klicke auf „Definition hinzufügen“.
  • Erstelle Metafelder für die notwendigen Attribute wie Farbe.
  • Stelle sicher, dass diese Metafelder korrekt mit deinen Produktkategorien verknüpft sind.

Da du die Shirtigo App verwendest, könnte es sein, dass die App die Handhabung der Metafelder und Farbfelder beeinflusst. Um dies zu überprüfen:

Teste mit einem manuell erstellten Produkt:

  • Erstelle ein neues Produkt manuell in Shopify.
  • Weise die richtige Kategorie und den Produkttyp zu.
  • Konfiguriere die Metafelder und Farbfelder.
  • Überprüfe, ob die Farbfelder und Metafelder korrekt angezeigt werden.

Vergleiche mit importierten Produkten:

  • Vergleiche die Einstellungen der manuell erstellten Produkte mit denen, die über die Shirtigo App importiert wurden.
  • Prüfe, ob es Unterschiede in der Zuordnung von Kategorien und Metafeldern gibt.
  • Bei weiteren Fragen dazu bitte die Entwickler von Shirtigo sprechen. Der Michael von @Shirtigo ist sogar hier Mitglied in der Community.

Metafelder für Kategorien einrichten

Falls die neuen Funktionen für die Kategorie-Metafelder in deinem Shopify-Shop noch nicht verfügbar sind, kannst du dich für den frühen Zugriff registrieren: Besuche die Winter 2024 Edition von Shopify und klicke auf „REGISTRIEREN“ im Abschnitt mit den Rich-Attributen für die einzelnen Produktkategorien.

Kategorie-Metafelder konfigurieren:

  • Gehe in deinem Shopify-Adminbereich zu „Produkte“.
  • Wähle ein Produkt und gib im Abschnitt „Produktorganisation“ die Kategorie deines Produkts ein.
  • Klicke im Abschnitt „Varianten“ auf „Optionen wie Größe oder Farbe hinzufügen“ und füge Farben hinzu.

Anpassen der Farbfelder in Dawn:

  • Vergewissere dich, dass du die neueste Version des Dawn-Themes installiert hast.
  • Gehe zu „Anpassen“ und navigiere zu dem Produkt, dem du Farboptionen hinzugefügt hast.
  • Optional: Um Farbfelder anzupassen, klicke auf den Variantenauswahl-Block und ändere die Anzeige der Farbfelder zwischen Kreis, Quadrat oder Keine.
  • Speichere das Theme.
  • Apps wie „Smart Product Filter & Search“ können auch nützlich sein, um Produktvarianten und Filteroptionen anzupassen​ (Shopify App Store)​.

Mit diesen Schritten solltest du in der Lage sein, Farbfelder in deinem Shopify-Shop korrekt zu integrieren. Falls du weiterhin Probleme hast, könnte es hilfreich sein, den Shopify-Support oder das Support-Team der Shirtigo App zu kontaktieren.

Hoffe das hilft dir weiter - lass wissen falls nicht! :wink:


Warum nicht etwas Gamification in das Shop einbauen, um deinen Kunden etwas Fun im Shop anzubieten? Gerne kann ich bei Interesse Tipps dazu geben!

Hast du weitere Fragen zum Shop? Gebe einfach ein Suchbegriff oben in der Suchleiste der Community Landingpage ein, denn das Thema haben wir sehr wahrscheinlich schon besprochen. Halte bitte Ausschau in deiner E-Mail auf Notifications zu Antworten auf deine Fragen in der Community.

Hallo Gabe,

mittlerweile gibts ja die Sommer-Edition und wie ich sehen kann hat sich auch bzgl. der Color Swatches etwas getan.

Ich habe meine Kommentare mit blauer Schrift hinzugefügt.

Dennoch bräuchte ich nochmal deine Hilfe, da es irgendwie nicht wirklich klappt.

Weder auf der Produktseite, der Kollektionenseite und der Produktübersichtsseite sind Farbfelder für das Jacket zu sehen.

Hey @msshop

Um dir dabei behilflich zu sein, wird unser Team das :eyes: müssen. Hast du bereits ein Ticket bei unserem Support-Team geöffnet?

Falls nicht, sende bitte eine E-Mail an unseren Support wie hier demonstriert von der E-Mail-Adresse, die du zur Anmeldung in deinem Shopify-Shop verwendest, und gib deine myshopify.com-URL da auch ein. Sobald die dein Konto authentifiziert haben, können sie dir weiterhelfen.

Hi Gabe,

ich bin gerade auf deinen Beitrag zum Thema Farbfelder aufmerksam geworden. Ich verwende das Thema Dawn 15.0.0 und kann zwar Farbfelder auf meinen Produktseiten anzeigen lassen, leider finde ich jedoch keine Option, diese auch auf den Kollektionsseiten, wie du es beschrieben hast, einzubauen. Hättest du da vielleicht noch einen Tipp zu?

Liebe Grüße

Vanessa

Hey Vanessa! @franzship_19

My bad - derzeit sind die Colour Swatches in Dawn nur auf der PDP integrierbar. Aufgrund des fehlenden Platzes im Produktraster auf der Collection Page, ist dies derzeit nicht möglich und man muss entweder mit einer 3P App wie Globo gemacht werden, oder über eine Programmierung eines Frontend Entwicklers mit Metafelder. Gerne kann ich welche empfehlen! :wink: