---
description: >-
  Hier erfahren Sie alles über die Installation sowie die
  Einstellungsmöglichkeiten in dem Plugin. Sie erhalten zudem Beispiele für die
  unterschiedlichen Darstellungsmöglichkeiten im Frontend.
---

# Bildvorschau per Mousehover

## Installation & Demo <a href="#installation" id="installation"></a>

Sie können das Plugin [hier über den Shopware Community Store erwerben](https://store.shopware.com/cbax354566541058/bildvorschau-im-listing-bei-mousehover-sw6.html). Das Plugin wird wie ein ganz gewöhnliches Plugin installiert. Sollten Sie zum ersten Mal ein Plugin installieren, finden Sie unter dem folgenden Link eine Anleitung zur Installation von Plugins:

{% embed url="https://docs.shopware.com/de/shopware-6-de/Erweiterungen/MeineErweiterungen#meine-plugins" %}
Shopware Handbuch zur Installation von Apps & Plugins
{% endembed %}

Nach der Installation des Plugins schalten Sie das Plugin aktiv und öffnen die Konfigurationsmaske. Hierzu klicken Sie auf die drei Punkte in der letzten Spalte und wählen "Konfiguration".

**Das Plugin im Demoshop ansehen:**

{% embed url="https://demo-6.coolbax.com/Fashion/" %}
Plugin live im Demoshop anschauen
{% endembed %}

## Plugin Einstellungen

{% hint style="warning" %}
Manche Einstellungen werden erst sichtbar, wenn Sie den Cache leeren. Gehen Sie hierfür zu: _Einstellungen > System > Caches & Indizes_ und nutzen den Button: _Cache leeren_
{% endhint %}

| Feldname                                                  | Bedeutung                                                                                                 |
| --------------------------------------------------------- | --------------------------------------------------------------------------------------------------------- |
| Aktiv                                                     | Das Plugin für den jeweiligen Shop aktivieren oder deaktivieren.                                          |
| Anzeigen in                                               | Bestimmung der Anzeige auf Endgeräte (Mehrfachauswahl möglich).                                           |
| [Position des Image Sliders](#position-des-image-sliders) | Vorschaubereich kann nach Innen oder Außen der Produktbox aufgehen.                                       |
| [Maximale Anzahl Bilder](#maximale-anzahl-bilder)         | Maximale Anzahl der Bilder im Vorschaubereich.                                                            |
| Aufklappgeschwindigkeit                                   | Bestimmen Sie die Aufklappgeschwindigkeit des Vorschaubereich.                                            |
| [Hover-Effekt](#hover-effekt)                             | Beim Aktivierung wird ein Schatten und/oder Rahmen um die Produktbox angezeigt (Mehrfachauswahl möglich). |

#### Position des Image Sliders

Der Bereich in dem sich die Vorschaubilder befinden, kann innerhalb oder außerhalb der Produktbox ausgeklappt werden.&#x20;

* **Anzeigemodus = Außen:** Der Bereich mit den Vorschaubilder schiebt sich an der linken Seite der Produktbox nach außen. Elemente welche sich in diesem Bereich befinden, werden überdeckt.

<figure><img src="https://857504323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIjmVDBFtwlXBYXSv10K6%2Fuploads%2F2XBVmUaOKmav2qfmekOl%2FPluginSW6_BildvorschauListing-001.gif?alt=media&#x26;token=52a2aa41-671d-4548-ba4b-f4e0d3cb9a2f" alt=""><figcaption><p>Beispiel für: <em>Anzeigemodus: Außen</em></p></figcaption></figure>

* **Anzeigemodus = Innen:** Der Bereich mit den Vorschaubilder schiebt sich von der linken Seite nach Innen in die Produktbox und schiebt den Inhalt der Produktbox etwas zusammen.

<figure><img src="https://857504323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIjmVDBFtwlXBYXSv10K6%2Fuploads%2FKIeSCeEApbnL6C8oRKBA%2FPluginSW6_BildvorschauListing-002.gif?alt=media&#x26;token=d7e05139-e4f9-4958-b48f-1dbe401bc17d" alt=""><figcaption><p>Beispiel für: <em>Anzeigemodus: Innen</em></p></figcaption></figure>

#### Maximale Anzahl Bilder

Bestimmen Sie, wie viele Bilder sich maximal im eingefahrenen Vorschaubereich befinden können.&#x20;

Sollte der Platz für die Anzahl nicht ausreichen, wird automatisch ein vertikaler Slider eingefügt.&#x20;

Lassen Sie den Platz leer, wenn Sie alle verfügbaren Bilder darstellen möchten.

#### Hover-Effekt

Sie haben die Möglichkeit ein Rahmen und/oder einen Schatten um die Produktbox und den Vorschaubereich zu legen. Beides gleichzeitig ist ebenfalls möglich.

<div><figure><img src="https://857504323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIjmVDBFtwlXBYXSv10K6%2Fuploads%2FT8gzHX8n4k8nNibgnIVN%2FPluginSW6_BildvorschauListing-003.jpg?alt=media&#x26;token=2fee8b2d-c7ef-4bcf-950b-e3dc29df125e" alt=""><figcaption><p>Beispiel: <em>Hover-Effekt: Rahmen</em></p></figcaption></figure> <figure><img src="https://857504323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIjmVDBFtwlXBYXSv10K6%2Fuploads%2F7vAB6uRBpasuIRqAEYmo%2FPluginSW6_BildvorschauListing-004.jpg?alt=media&#x26;token=3514c3c7-d594-4e4f-97d2-a782e4843f86" alt=""><figcaption><p>Beispiel: <em>Hover-Effekt: Schatten</em></p></figcaption></figure></div>

