Magento 2 Swatches mit Hover-Vorschau in Liste und Detail
SKU: COLORSWATCHESPRO1
- Farb-, Bild- und Text-Swatches direkt in der Kategorieliste
- Bildwechsel beim Hover auf die passende Variante
- ausverkaufte Varianten abgeblendet statt versteckt
- Anzahl begrenzen, zweifarbig darstellen, je Store View
Einmaliger Kauf · inkl. 12 Monate Updates · zzgl. MwSt.
Magento 2 Swatches: Farben und Muster direkt in Kategorie und Produktseite
Mit Mironsoft Color Swatches Pro zeigen Sie Magento 2 Swatches überall dort, wo Kunden eine Variante auswählen: in der Produktliste, auf der Produktseite und im Filter. Statt einer Auswahlliste sehen Besucher echte Farbflächen, Musterbilder oder Texte, und ein Hover tauscht das Produktbild gegen die passende Variante aus. Die Oberfläche ist mit Alpine.js für Hyvä gebaut und lädt kein jQuery und kein Knockout.
Farb- und Bild-Swatches
Hinterlegen Sie je Attributwert einen Farbcode, ein Musterbild oder einen Text als Swatch.
Swatches in der Liste
Kleine Varianten-Punkte unter jeder Produktkachel zeigen die verfügbaren Farben schon in der Kategorie.
Bildwechsel beim Hover
Fährt der Besucher über einen Swatch, wechselt das Kachelbild zur passenden Variante.
Ausverkauft sichtbar
Nicht lieferbare Varianten erscheinen durchgestrichen oder abgeblendet, nicht verschwunden.
Mehrfarbige Swatches
Zweifarbige Varianten werden als geteilter Kreis dargestellt, etwa für Gestelle mit Bezug.
Anzahl begrenzen
Ab einer Obergrenze zeigt die Kachel einen Zähler wie plus 4 und hält das Raster ruhig.
Warum Magento 2 Swatches mehr Varianten sichtbar machen
Bei Mode, Möbeln, Textilien oder Farben ist die Variante oft die eigentliche Kaufentscheidung. Der Standard von Magento zeigt Swatches nur auf der Produktseite, und in der Kategorie sieht der Kunde nur ein Foto. Wer wissen will, ob es den Stuhl auch in Anthrazit gibt, muss jede Kachel öffnen. Händler suchen deshalb nach Magento 2 Swatches in der Kategorie, nach Magento 2 Farbauswahl oder nach einer Magento 2 Color Swatches Extension.
Mit Magento 2 Swatches in Liste und Detail beantwortet die Kachel diese Frage sofort. Der Besucher erkennt die Auswahl, sieht per Hover das passende Bild und springt gezielt auf die Variante, die ihn interessiert. Das spart Klicks und senkt die Zahl der Seitenaufrufe, die ohne Treffer enden.
Magento 2 Swatches in der Kategorie: Varianten direkt unter der Kachel
Unter Name und Preis jeder Produktkachel erscheint eine Reihe kleiner Swatches. Sie legen fest, welches Attribut gezeigt wird, zum Beispiel Farbe oder Material, und wie viele Swatches pro Kachel sichtbar sind. Überzählige Werte fasst ein Zähler zusammen. Ein Klick auf einen Swatch öffnet das Produkt mit vorausgewählter Variante, sodass der Kunde nicht noch einmal wählen muss.
- Attribut und Anzahl sichtbarer Swatches pro Kachel einstellbar
- Zähler für weitere Varianten statt überlaufender Zeilen
- Klick öffnet die Produktseite mit gewählter Variante
Bildwechsel beim Hover: das passende Foto je Farbvariante
Bewegt der Besucher die Maus über einen Swatch, tauscht die Kachel ihr Bild gegen das Foto der Variante aus. Auf Touchgeräten übernimmt der Tipp auf den Swatch diese Rolle. Das Bild stammt aus der konfigurierbaren Variante, Sie pflegen keine zusätzlichen Dateien. Fehlt für eine Variante ein eigenes Foto, bleibt das Basisbild stehen, und der Swatch markiert nur die Auswahl. Vorgeladen wird erst beim ersten Hover, damit die Kategorie schnell bleibt.
- Bild der Variante wird per Hover oder Tipp eingeblendet
- Fehlt das Variantenbild, bleibt das Basisbild stehen
- Nachladen erst beim ersten Hover für kurze Ladezeiten
Magento 2 Swatches als Farbe, Bild oder Text für jedes Sortiment pflegen
Im Admin hinterlegen Sie je Attributwert den Typ des Swatches. Farbcodes eignen sich für Standardfarben, Musterbilder für Stoffe, Hölzer und Fliesen, Texte für Größen wie M oder 42. Zweifarbige Werte erhalten einen geteilten Kreis. Sie können Swatches rund oder eckig darstellen, die Größe festlegen und für helle Farben einen dünnen Rand aktivieren, damit Weiß auf weißem Grund erkennbar bleibt. Alle Einstellungen gelten je Store View.
- Farbcode, Musterbild oder Text je Attributwert
- Zweifarbige Swatches als geteilter Kreis
- Form, Größe und Rand für helle Farben einstellbar
Ausverkaufte Varianten zeigen, statt sie zu verstecken
Ist eine Variante nicht lieferbar, bleibt ihr Swatch sichtbar, wird aber abgeblendet oder diagonal durchgestrichen. So erfährt der Kunde, dass es die Farbe gibt, und bleibt im Shop, statt anderswo zu suchen. Wahlweise blenden Sie ausverkaufte Swatches in der Liste aus, lassen sie auf der Produktseite aber stehen. Die Lagerinformation kommt aus dem Bestand Ihrer Simple-Produkte und braucht keine eigene Pflege.
- Nicht lieferbar: abgeblendet oder durchgestrichen
- Wahlweise in der Liste ausblenden, im Detail zeigen
- Bestand wird aus den Simple-Produkten übernommen
Wo Magento 2 Swatches im Shop-Alltag hilft
Branchen, in denen die Variante die Kaufentscheidung prägt.
Mode und Textilien
Kunden sehen alle Farben eines Pullovers schon in der Kategorie und springen direkt zur Wunschfarbe.
Möbel und Wohnen
Bezugsstoffe und Holzdekore erscheinen als Musterbild, das Hover-Foto zeigt das Möbel in dieser Ausführung.
Farben und Lacke
Tausende Töne lassen sich als Farbfläche suchen, Text-Swatches zeigen Gebindegrößen daneben.
Zubehör und Technik
Hüllen, Kabel oder Gehäuse in mehreren Farben bleiben übersichtlich, ausverkaufte Töne sind sofort erkennbar.
Magento 2 Swatches: ohne und mit Modul im Vergleich
Der Unterschied zur Standardauswahl von Magento.
| Thema | Ohne Modul | Mit Mironsoft Color Swatches Pro |
|---|---|---|
| Kategorie | Ein Foto, Varianten unsichtbar | Swatches unter jeder Kachel |
| Variantenbild | Erst nach Klick auf die Produktseite | Vorschau per Hover oder Tipp |
| Ausverkauft | Variante fehlt einfach | Swatch sichtbar, abgeblendet |
| Mehrfarbig | Nicht darstellbar | Geteilter Kreis |
| Pflege | Je Attributwert einzeln | Typ und Darstellung zentral im Admin |
So richten wir Magento 2 Swatches für Sie ein
Der Ablauf nach Ihrer Beauftragung.
Abstimmung
Sie nennen die Attribute, die als Swatch erscheinen sollen, und die gewünschte Optik von Größe bis Rand.
Installation
Wir installieren das Modul in Ihrem Hyvä Theme und aktivieren Magento 2 Swatches für die gewählten Kategorien.
Attributwerte
Wir hinterlegen Farbcodes, Musterbilder und Texte oder übernehmen vorhandene Swatch-Daten.
Test
Wir prüfen Magento 2 Swatches in Liste, Hover, Touchgeräte, ausverkaufte Varianten und Produkte ohne Variantenbild.
Übergabe
Ihr Team erhält eine Einweisung in die Pflege der Swatch-Typen und der Anzeige-Optionen.
Abgrenzung zu Produktbild-Hover, Produktlabels und Layered Navigation
Der Produktbild-Hover von Mironsoft wechselt das Bild beim Überfahren der Kachel, ohne Varianten zu kennen. Die Produktlabels setzen Aufkleber wie Neu oder Sale, und die Layered Navigation filtert das Sortiment. Magento 2 Swatches zeigt dagegen die Varianten selbst und verknüpft jeden Swatch mit dem passenden Bild.
Die Module lassen sich kombinieren. Das Swatch-Modul läuft mit Alpine.js im Hyvä Theme und bringt keine zusätzliche Bibliothek mit.
Kein Download, sondern persönliche Einrichtung
Color Swatches Pro ist hier nicht als fertige Download-Datei zum Selbst-Installieren gelistet. Der Kauf ist eine Beauftragung: Wir melden uns nach dem Kauf, installieren das Modul in Ihrem Shop und stimmen Attribute, Swatch-Typen und Darstellung gemeinsam mit Ihnen ab.
Häufige Fragen
Alles Wichtige zu Swatches, Hover, Lagerstatus und zum Ablauf des Kaufs.
Wie kann ich in Magento 2 Swatches in der Kategorieliste anzeigen?
Wie kann ich in Magento 2 ein Bild beim Hover über Farben wechseln?
Welche Swatch-Arten gibt es?
Was passiert, wenn für eine Variante kein Bild existiert?
Wie werden ausverkaufte Varianten dargestellt?
Wie kann ich in Magento 2 sehr viele Swatches begrenzen?
Lassen sich helle Farben auf weißem Grund erkennen?
Funktioniert Magento 2 Swatches mit Hyvä?
Was unterscheidet das von Produktbild-Hover und Layered Navigation?
Kann ich das Modul selbst herunterladen und installieren?
Zuletzt angesehene Artikel
Magento 2 Swatches – Mironsoft Color Swatches Pro