Produktbilder

In diesem Artikel beschreiben wir das Hinzufügen von Bildern, das Pflegen von zusätzlichen Informationen am Bild und das Anlegen eines Bild-Mappings für einen Variantenartikel. Dadurch ergibt sich die Möglichkeit, Artikel in diversen Varianten mit gesonderten Bildern darzustellen.

Bilder verwalten

Bilder hochladen

Neben dem Medien-Upload direkt im Media-Manager kannst Du Bilder auch bequem direkt in den Artikelstammdaten hochladen und pflegen, öffne dazu den Tab "Bilder" in den Artikeldetails:

Hier hast Du folgende Möglichkeiten:

• Bilder hochladen: Hier kannst Du Bilder hochladen und diese direkt Deinem Artikel zuweisen. Die Bilder werden dann im Media-Manager abgelegt und die jeweiligen Thumbnailgrößen im Hintergrund erstellt.
• Als Vorschau verwenden: Klicke auf ein Bild und dann auf den Button, um dieses Bild als Vorschaubild für den Artikel festzulegen. Sofern die Variantenauffächerung nicht vom Kunden genutzt wird, wird dann immer dieses Bild als Vorschau angezeigt.
• Bild löschen: Hiermit kannst Du die markierten Bilder vom Artikel löschen. Beachte, dass dies nicht das Bild selbst löscht, sondern nur die Zuweisung des Bildes zu diesem Artikel! Das Bild ist weiterhin im Media-Manager verfügbar und muss dort gelöscht werden.
• Konfiguration öffnen: Hiermit kannst Du Bilder einzelnen Varianten zuweisen, sodass die Bilder nur bei Auswahl dieser Variante angezeigt werden. Klicke auf ein Bild oder markiere mehrere Bilder und klicke auf den Button, um das Konfigurationsfenster zu öffnen. Tipp: Wenn Du bereits konfigurierte Bilder hast, kannst Du das Konfigurationsfenster auch über einen Klick auf das Zahnrad beim jeweiligen Bild aufrufen. Beachte aber, dass beim Öffnen der Konfiguration mehrerer Bilder nicht mehr die Konfiguration der einzelnen Bilder angezeigt wird!
• Bild herunterladen: Hiermit kannst Du das Originalbild herunterladen.
• Titel: Hier kannst Du den SEO-Titel des ausgewählten Bildes vergeben. Nach Eingabe des Titels solltest Du den Artikel speichern.
• Zugewiesene Varianten: Dies zeigt Dir an, welchen Varianten das Bild zugewiesen ist, sofern eine Zuweisung existiert. Hier wird Dir jede Konfiguration in einer separaten Zeile angezeigt.
• Freitextfelder: Falls konfiguriert, kannst Du hier die Freitextfelder bearbeiten. Im Standard sind noch keine Freitextfelder vorhanden, daher wird Dir die Möglichkeit zum Erstellen angeboten. Weitere Informationen findest Du im Artikel Freitextfeld-Verwaltung.
• Bilder sortieren: Sortiere Bilder mittels Drag'n'Drop, um die Gewünschte Reihenfolge herzustellen, da diese Reihenfolge auch für die Anzeige der Artikel im Listing und der Detailseite entscheidend ist.

Einstellungen zum Vorschaubild

Das Vorschaubild kann für Variantenartikel entweder das erste Bild der ersten Variante sein, das erste Bild der gemappten (konfigurierten) Variante oder immer das als Vorschau markierte Bild. Dies lässt sich in den Grundeinstellungen unter Einstellungen > Grundeinstellungen > Storefront > Kategorien / Listen > Immer das Artikel-Vorschaubild nutzen definieren.

Wenn Du mit Varianten im Listing arbeitest und Deine Kunden die Varianten im Listing auffächern, wird ungeachtet der Grundeinstellungen immer das passende Vorschaubild der Variante bzw Variantengruppe angezeigt.

Um bei Varianten im Listing immer die treffendsten Bilder auszugeben, empfehlen wir, die Bilder mit dem detailiertesten Mapping nach vorn zu sortieren. Also "Leder > Schwarz > XL" vor "Leder > Schwarz" vor "Leder", so wird beim Auffächern der einzelnen Gruppen immer das passende Variantengruppen-Bild angezeigt, aber bei kompletter Auffächerung dennoch das speziell gemappte Variantenbild.

SEO-Titel und Attribute pflegen

Es werden hier immer nur die Werte des gewählten Bildes angezeigt, klicke also zuerst das gewünschte Bild an, bevor Du Änderungen vornimmst. Für jedes Bild steht ein Titelfeld zur Verfügung, welches Du individuell füllen kannst.

Attributfelder sind im Standard nicht enthalten, Du kannst Dir aber jederzeit neue Attributfelder über die Freitextfeld-Verwaltung erstellen.

Diese Freitextfelder sind dann im Frontend unter {$sArticle.image.attribute.XXX} erreichbar, wobei XXX hier für Dein Attribut steht.

Ansicht im Frontend

Wenn Du den Artikel ohne Filtern aus dem Listing öffnest, wird Dir immer das Vorschaubild angezeigt. Rufst Du den Artikel jedoch über eine aufgefächterte Variante auf (zum Beispiel gefiltert nach Farbe Beige) wird die entsprechende Variante bzw. dessen Gruppe geöffnet und das zugehörige Bild der beigen Variante angezeigt.

Im Listing können je nach Situation unterschiedliche Bilder angezeigt werden. Dies hängt grundsätzlich ersteinmal von der Option Einstellungen > Grundeinstellungen > Storefront > Kategorien / Listen > Immer das Artikel-Vorschaubild anzeigen ab.

Wenn Du Varianten im Listing nutzt, bekommst Du im Listing jedoch ungeachtet dieser Einstellung immer das Bild angezeigt, was zur aktuell gefilterten Variante bzw. Variantengruppe passt.

Bildmapping

Das Bildmapping ist die Zuweisung von Bildern zu bestimmten Varianten, um den Unterschied der Varianten auch passend darstellen zu können. In diesem Abschnitt erklären wir Dir, wie Du dieses Mapping erstellen kannst.

Konfiguration erstellen

Das Mapping wird immer auf das markierte Bild angewendet. Falls Du mehrere Bilder mappen willst, kannst Du dies einfach durch gedrückt halten der STRG-Taste und dem Anklicken mit der Maus oder dem Markieren der Bilder mit der linken Maustaste (Rahmen ziehen) durchführen. Denke aber daran, dass beim Mapping von mehreren Bildern Deine getätigte Konfiguration auf alle Bilder gleichzeitig ausgespielt wird.

Wenn Du das Mapping mehrerer Bilder bearbeitest, wird Dir das aktuelle Mapping nicht angezeigt. Du kannst aber für alle markierten Bilder ein gemeinsames neues Mapping erstellen und speichern.
Beachte, dass das Mapping mehrerer Bilder das aktuelle Mapping der markierten Bildern überschreibt! Alle derzeitigen Mappings der Bilder werden dabei gelöscht.

Bei Klick auf den Button "Konfiguration öffnen" öffnet sich ein Popup, in diesem Popup werden Dir alle aktuellen Konfigurationen des Bildes angezeigt:

Möchtest Du eine neue Konfiguration erstellen, klicke auf "Zuordnung hinzufügen". Es öffnet sich ein weiteres Popup, welches die vgerfügbaren Gruppen und Optionen des Artikels anzeigt (Es werden immer nur die Gruppen und Optionen angezeigt, in denen der Artikel auch verfügbar ist):

In unserem Beispiel haben wir die Farben und die Größen des Schuhs für das Mapping zur Verfügung, klicke nun die gewünschte Option an.

Pro Gruppe kannst Du immer nur eine Option wählen! Du kannst das Mapping im Beispiel entweder nur auf Farbe, nur auf Größe oder auf Farbe und Größe erstellen. Wenn Du nur auf Farbe mappst, wird das Bild nur bei dieser Farbe angezeigt, Welche Größe Du im Nachgang auswählst ist dabei egal. Wählst Du Dein Mapping auf Farbe und Größe, wird das Bild nur bei dieser Farbe und exakt dieser Größe dargestellt. Weicht eins der beiden Optionen im Frontend ab, wird das Bild nicht mehr angezeigt.

Merkhilfe: 
Gruppen werden immer mit "UND" verknüpft.
Pro Gruppe kann nur eine Option gewählt werden.
Möchtest Du mehrere Optionen einer Gruppe mappen, kannst Du das über mehrere Konfigurationen lösen.

Um das Mapping nun korrekt zu erstellen, wähle die passende Option aus. Im Beispiel ist der blaue Schuh ausgewählt, wir klicken also die Option "Blau" der Gruppe "Farbe" an und klicken 2x auf "Speichern" (um das einzelne Mapping zu speichern als auch das gesamte Mapping). Ab sofort wird das Bild des blauen Schuhs im Frontend immer dann angezeigt, wenn der Kunde die Farbe "Blau" auswählt, unabhängig von der Größe.

Bilder, die eine Konfiguration besitzen, erkennst Du am kleinen blauen Zahnrad, welches oben rechts im Vorschaubild angezeigt wird. Wenn Du die Konfiguration ändern willst, kannst Du auch das Zahnrad anklicken.

Als weiteres Beispiel nehmen wir einen Artikel, den es in 2 Farben und 2 Ausführungen gibt, also 4 Varianten mit 4 unterschiedlichen Bildern. Die Laterne im Beispiel soll in Schwarz und Weiss verfügbar sein sowie in einer runden und einer eckigen Ausführung. Also muss das Mapping in jeder Gruppe entsprechend gesetzt werden.

Im Frontend sieht der Artikel dann wie folgt aus: