Bilder machen deinen Konfigurator deutlich attraktiver und erhöhen die Kaufsicherheit. Mit der Bildvisualisierung siehst du bei jeder Auswahl sofort wie das konfigurierte Produkt aussieht.
Welche Methode ist die richtige für mich?
Ich habe Produktfotos in verschiedenen Varianten (z.B. Rolladen in Weiß, Anthrazit, Bronze) → Optionsbilder
Ich möchte Varianten kombinieren (z.B. Farbe + Blende sollen gleichzeitig sichtbar sein) → Layer-Technologie (Kombiniertes Bild)
Ich möchte eine drehbare Produktansicht → 360°
Optionsbilder
Das einfachste Prinzip: Jede Option bekommt ein eigenes Bild. Wählt der Kunde eine Option, wird das zugehörige Bild angezeigt.
Bild für eine Option hinterlegen:
- Tab Merkmale → Merkmal anklicken (z.B. „Farbe")
- Im rechten Panel den Abschnitt WERTE öffnen → Option anklicken
- Im Abschnitt BILD das Bild hochladen
- Empfohlenes Format: JPG oder WebP, 800×800 px, weißer oder transparenter Hintergrund
Typische Anwendung: Farbauswahl — jede Farbe zeigt das Produkt in der gewählten Farbe.
Layer-Technologie (Kombiniertes Bild)
Bei mehreren konfigurierbaren Merkmalen mit Bildeinfluss würde ein Foto pro Kombination schnell hunderte Bilder bedeuten. Die Layer-Technologie löst das:
Statt eines Gesamtbilds pro Kombination hinterlegst du transparente PNG-Ebenen pro Option. configento.app überlagert die Ebenen in Echtzeit zum fertigen Produktbild.
Beispiel Rollladen:
- Basis-Layer: Rahmen und Kasten (immer sichtbar)
- Layer Farbe Weiß: weißes Lamellenbild (transparent)
- Layer Farbe Anthrazit: anthrazitfarbenes Lamellenbild (transparent)
- Layer Antrieb Elektrisch: Motorkasten oben (transparent)
Layer aktivieren:
- Im Tab Einstellungen → Allgemein → BILDEINSTELLUNGEN: Kombiniertes Produktbild wählen
- Pro Option: im rechten Panel den Abschnitt BILD öffnen → Layer hochladen
- Transparentes PNG hochladen — alle Layer müssen exakt dieselbe Bildgröße haben
- Z-Index festlegen (höherer Wert = weiter vorne)
Wichtig: Alle Layer müssen dieselbe Auflösung haben (z.B. alle 1200×1200 px), sonst stimmt die Überlagerung nicht.
360°-Darstellung
Für eine drehbare Produktansicht lädst du Aufnahmen aus allen Winkeln hoch.
Voraussetzungen:
- 24 bis 48 Bilder (je mehr, desto flüssiger die Drehung)
- Gleiche Bildgröße und gleiche Beleuchtung für alle Aufnahmen
- Bilder in der richtigen Drehrichtung sortiert
Einrichten:
- Im Tab Einstellungen → Allgemein → BILDEINSTELLUNGEN: 360° kombiniertes Produktbild wählen
- Alle Bilder in der richtigen Reihenfolge hochladen
Die Layer-Technologie funktioniert auch im 360°-Modus.
Bildgröße und Performance
| Format | Empfehlung |
|---|---|
| Optionsbilder | 800×800 px, JPG oder WebP |
| Layer | 1200×1200 px, transparentes PNG |
| 360°-Bilder | 800×800 px, JPG |
Zu große Bilder verlangsamen den Konfigurator — besonders auf mobilen Geräten. WebP bietet die beste Kompression.
Bildposition
Unter Einstellungen → Allgemein → BILDEINSTELLUNGEN → Position Merkmalbilder stellst du ein ob das Produktbild links oder rechts von den Merkmalen erscheint.