PrestaShop Design & Navigation

Varianten-Foto-Swatches & Bestand Modul PrestaShop 8/9

Ihre Varianten verdienen mehr als ein Dropdown.

Klickbare Foto-Swatches für Farben, Größen und Materialien, Galerie-Vorschau beim Überfahren und Bestandsanzeige pro Variante — direkt auf der Produktseite. Die Swatches werden automatisch aus den Fotos Ihrer Kombinationen abgeleitet: installieren, fertig.

Auf einen Blick
  • Foto-Swatches statt Kombinations-Dropdowns
  • Sofortige Galerie-Vorschau beim Überfahren einer Variante
  • Sichtbarer Bestand pro Variante: auf Lager, geringer Bestand, ausverkauft
  • Automatische Ableitung aus den Kombinationsfotos
  • Vollständige Tastaturnavigation (ARIA-Radiogroup-Pattern)
PrestaShop 8 & 9 Null Konfiguration Tastaturzugänglich 5 Sprachen Keine Abhängigkeiten
  • 30 Tage Rückgaberecht
  • 12 Monate Updates
  • 24-h-Support
www.datafirefly.com/de/
Module Swatches Variantes Photo & Stock PrestaShop 8/9
v1.1.0 · aktualisiert 2026-07-02
Was es leistet

Die Kurzfassung.

01

Automatische Foto-Swatches

Die Swatches werden aus den Fotos Ihrer bestehenden Kombinationen abgeleitet — kein Upload nötig, um zu starten. Verfeinern Sie später mit dedizierten Bildern oder Hex-Farbcodes pro Attribut.

02

Galerie-Vorschau beim Hover

Fahren Sie über einen Farb-Swatch: Das Hauptbild zeigt sofort das Foto dieser Variante, vorgeladen für sofortige Darstellung. Das Originalbild kehrt zurück, sobald der Cursor den Swatch verlässt.

03

Bestand pro Variante

Jeder Swatch zeigt seinen Status: auf Lager, geringer Bestand (konfigurierbarer Schwellenwert) oder ausverkauft. Ausverkaufte Varianten können durchgestrichen oder vollständig ausgeblendet werden.

04

Native Barrierefreiheit

Vollständiges WAI-ARIA-Radiogroup-Pattern: Pfeiltasten-Navigation, ein einziger Tab-Stopp pro Gruppe, Zustände werden Screenreadern angekündigt. Ein konkretes Argument für Barrierefreiheits-Compliance.

Die ausführliche Fassung

Alles, was Sie wissen sollten bevor Sie installieren.

Ein detaillierter Blick darauf, wie Varianten-Foto-Swatches & Bestand Modul PrestaShop 8/9 funktioniert, warum wir es so gebaut haben und der Gedanke hinter den Funktionen oben.

§ 01

Die visuelle Auswahl, die verkauft

In Mode, Deko oder Kosmetik kauft der Kunde mit den Augen. Ein Dropdown mit Weiß / Schwarz / Rot zeigt nichts; eine Reihe von Foto-Swatches zeigt alles. Das Modul ersetzt die nativen Varianten-Widgets durch klickbare visuelle Chips, und jedes Überfahren zeigt die Variante in der Hauptgalerie — der Kunde erkundet das Sortiment ohne ein einziges Neuladen der Seite.

§ 02

Funktioniert ab der Installation

Die meisten Swatch-Module verlangen den Upload eines Bildes pro Attribut, bevor überhaupt etwas angezeigt wird. Hier werden die Swatches automatisch aus den bereits mit Ihren Kombinationen verknüpften Fotos abgeleitet: Modul installieren, Produktseite öffnen, fertig. Eine intelligente Absicherung vermeidet Fehlanzeigen — eine Größengruppe, deren Werte alle dasselbe Foto teilen, bleibt als Text-Chips; nur wirklich durch Bilder differenzierte Gruppen wechseln zu Fotos.

§ 03

Bestand sichtbar vor dem Klick

Jeder Swatch zeigt seine Verfügbarkeit an: auf Lager, geringer Bestand unter einem von Ihnen definierten Schwellenwert, oder ausverkauft. Ausverkaufte Varianten können sichtbar bleiben, aber durchgestrichen — nützlich, um die Breite des Sortiments zu zeigen — oder vollständig verschwinden. Die Berechnung berücksichtigt sowohl das shopweite als auch das kombinationsspezifische Bestellverhalten bei Nichtverfügbarkeit.

§ 04

Barrierefrei und konform

Der Selektor implementiert das WAI-ARIA-Radiogroup-Pattern nach Vorschrift: ein einziger Tab-Stopp pro Attributgruppe, Pfeiltasten-Navigation mit Umlauf, Auswahl per Leertaste oder Enter, Zustände werden Hilfstechnologien angekündigt, sichtbarer Fokusring. Mit den europäischen Barrierefreiheitsanforderungen ist das ein konkreter Differenzierungsfaktor gegenüber rein visuellen Variantenwählern.

§ 05

Leicht und robust durch Architektur

Die Variantendaten werden beim Rendern direkt in die Seite eingebettet: kein AJAX-Aufruf beim Laden, keine Abhängigkeit von der Verfügbarkeit eines Endpoints, sofortige Anzeige. Das Modul erweitert die nativen PrestaShop-Widgets, statt Theme-Templates zu ersetzen — genau das macht es kompatibel mit Classic, Hummingbird und den meisten Premium-Themes ohne Overhead.