Bilder zeigen deinen Kunden, was sie gerade konfigurieren. configento.app kennt drei Arten: ein Bild am Merkmal, ein Vorschaubild am Wert für die Auswahl und das kombinierte Produktbild, das aus den Bildern der gewählten Werte Ebene für Ebene zusammengesetzt wird – auf Wunsch auch als drehbare 360°-Ansicht.
Welche Bildart brauchst du?
| Du willst … | Dann nimm … |
|---|---|
| neben einem Merkmal ein erklärendes Bild zeigen, z. B. eine Skizze „So misst du die Breite“ | das Bild am Merkmal |
| dass deine Kunden Werte über kleine Bilder auswählen, z. B. Farbmuster | das Vorschaubild am Wert |
| das fertige Produkt aus den gewählten Werten zusammensetzen, z. B. Gestell + Stoff + Antrieb | das kombinierte Produktbild |
| das zusammengesetzte Produkt drehbar zeigen | das 360° kombinierte Produktbild (nur Legacy) |
Bild am Merkmal
- Wähle das Merkmal im Strukturbaum.
- Öffne rechts den Abschnitt Bild und lade das Bild hoch.
Wo das Bild neben dem Merkmal steht, stellst du für die ganze Komponente ein: Reiter Einstellungen → Allgemein → Position Merkmalbilder → Links, Rechts oder Nicht anzeigen.
Ein Bild am Merkmal gibt es bei Auswahl-Merkmalen, Eingabefeldern, statischen Feldern, Produktattribut und Paket.
Bilder an Werten
Ein Klick auf einen Wert im Abschnitt Werte öffnet seine Einstellungen. Dort gibt es zwei Bildfelder:
| Abschnitt | Wofür | Zusätzliche Felder |
|---|---|---|
| Vorschaubild | Das kleine Bild, über das der Kunde den Wert auswählt – vor allem beim Datentyp Liste mit Bildern | W (px) und H (px): Anzeigegröße des Vorschaubilds (nur Legacy) |
| Bild | Die Ebene für das kombinierte Produktbild | Offset X und Offset Y: Verschiebung der Ebene in Pixeln (nur Legacy) |
Ist das kombinierte Produktbild auf 360° gestellt, heißt der Abschnitt Bild stattdessen 360°-Bilder und nimmt eine ganze Bildfolge auf (siehe unten).
Das kombinierte Produktbild
Statt für jede Kombination ein eigenes Foto zu machen, legst du für jeden Wert eine Ebene an. Der Konfigurator legt die Ebenen der gewählten Werte übereinander.
Beispiel Terrassendach:
| Merkmal | Bildreihenfolge | Ebenen der Werte |
|---|---|---|
| Gestell | 1 | Gestell anthrazit, Gestell weiß |
| Dacheindeckung | 2 | Glas klar, Glas matt, Stegplatten |
| Seitenwand | 3 | ohne (kein Bild), Glas-Schiebewand |
Einrichten
- Schalte das kombinierte Bild ein: Reiter Einstellungen → Allgemein → Abschnitt Kombiniertes Produktbild → Kombiniertes Bild = Kombiniertes Produktbild.
- Lade an jedem Wert, der im Bild sichtbar sein soll, im Abschnitt Bild seine Ebene hoch.
- Lege die Stapelfolge fest: am Merkmal im Feld Bildreihenfolge. Merkmale mit kleinerer Zahl liegen unten, mit größerer Zahl darüber.
- Prüfe das Ergebnis in der Vorschau.
Damit die Ebenen passen
- Alle Ebenen haben dieselbe Bildgröße und denselben Bildausschnitt.
- Alles außer dem eigentlichen Teil ist transparent – nimm PNG oder WebP mit Transparenz, SVG geht ebenfalls.
- Die unterste Ebene (meist das Grundgestell) deckt den ganzen Hintergrund ab.
- Ein Wert ohne Bild trägt nichts zum Gesamtbild bei – praktisch für „ohne“.
Wo das Bild im Shop erscheint
Wo das kombinierte Bild auf der Produktseite sitzt, hängt von der Integration ab. In Magento und Shopware gibst du in den Plugin-Einstellungen einen CSS-Selektor für den Bildbereich an, siehe Magento-Plugin installieren und Shopware-Plugin installieren.
Das Bild im PDF und in der E-Mail
Mit dem Platzhalter {{combined_image}} fügst du das aktuelle Produktbild in das PDF oder die E-Mail des Aktions-Buttons ein. Das funktioniert nur mit der Frontend-Engine V3 – in Legacy bleibt der Platzhalter leer.
Die 360°-Ansicht
Die 360°-Ansicht zeigt das kombinierte Produkt drehbar. Sie gibt es nur in der Frontend-Engine Legacy; V3 zeigt stattdessen das statische kombinierte Bild. Siehe Frontend-Engine: Legacy oder V3.
- Stelle Kombiniertes Bild auf 360° kombiniertes Produktbild.
- Lade an jedem Wert im Abschnitt 360°-Bilder die ganze Bildfolge hoch – eine Aufnahme pro Blickwinkel, in Drehrichtung sortiert. Die Reihenfolge änderst du per Ziehen, Alle löschen leert die Folge.
- Alle Werte brauchen gleich viele Bilder mit denselben Blickwinkeln, sonst passen die Ebenen beim Drehen nicht zusammen.
Weitere Einstellungen im Abschnitt Kombiniertes Produktbild:
| Einstellung | Wirkung |
|---|---|
| Animation 360 | Ladeanimation während die Bilder laden: Keine Ladeanimation, Ladeanimation ohne Fortschrittsanzeige, Ladeanimation mit Fortschrittsanzeige oder Nur Fortschrittsanzeige |
| Start-Sequenz in der 360°-Ansicht | Mit welchem Bild der Folge die Ansicht beginnt |
| 3D-Icon anzeigen nach (CSS-Selektor) | Hinter welchem Element der Seite das 3D-Symbol erscheint |
Die Farbe der Ladeanimation stellst du im Reiter Design unter Ladeanimationsfarbe ein.
Formate und Größen
| Erlaubt | Größe | |
|---|---|---|
| Bild am Merkmal, Vorschaubild, Ebene | JPG, PNG, GIF, WebP, SVG | max. 5 MB pro Bild |
| 360°-Bilder | JPG, PNG, GIF, WebP – kein SVG | max. 5 MB pro Bild, höchstens 360 Bilder pro Wert |
Du kannst Bilder per Klick auswählen oder in das Feld ziehen. Bild ersetzen tauscht ein Bild aus, Bild entfernen löscht es.
Empfehlungen (keine Vorgaben des Systems): Vorschaubilder klein halten, etwa 100–200 px. Ebenen des kombinierten Bilds in der Größe, in der das Bild auf der Seite erscheint – meist 800–1200 px Breite. WebP ist bei gleicher Qualität deutlich kleiner als PNG. Große Bilder bremsen den Konfigurator, besonders auf dem Smartphone und bei 360° mit vielen Bildern pro Wert.
Alle Bilder einer Komponente: der Reiter „Medien“
Rechts in den Einstellungen eines Merkmals zeigt der Reiter Medien alle Bilder der ganzen Komponente – Bilder an Merkmalen, Vorschaubilder und Ebenen. Ein Klick auf ein Bild öffnet das Merkmal, zu dem es gehört. So findest du schnell, wo ein Bild hinterlegt ist.
Fehlersuche
- Das kombinierte Bild bleibt leer – Kombiniertes Bild steht auf Nein, oder die gewählten Werte haben im Abschnitt Bild keine Ebene.
- Eine Ebene liegt hinter einer anderen – prüfe die Bildreihenfolge der beiden Merkmale. Größere Zahl liegt oben.
- Ebenen sind gegeneinander verschoben – die Bilder haben unterschiedliche Größen oder Ausschnitte. Exportiere alle Ebenen mit derselben Leinwandgröße. Offset X/Y hilft nur in Legacy.
- Die 360°-Ansicht dreht sich nicht – die Komponente läuft mit V3. 360° gibt es nur in Legacy.
- Das Produktbild fehlt im PDF –
{{combined_image}}funktioniert nur mit V3. - Upload wird abgelehnt – Datei größer als 5 MB oder kein Bildformat. Bei 360°-Bildern ist SVG nicht erlaubt.
- Das Bild am Merkmal erscheint nicht – Position Merkmalbilder steht auf Nicht anzeigen.