# Amazon Dropdown Menü

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

Sie können das Plugin [hier über den Shopware Community Store erwerben](https://store.shopware.com/cbax625797635275/amazon-dropdown-menue-professionell-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-2.coolbax.com/>" %}
Plugin live im Demoshop anschauen
{% endembed %}

## Plugin Einstellungen <a href="#plugin_einstellungen" id="plugin_einstellungen"></a>

{% hint style="warning" %}
Manche Einstellungen werden erst sichtbar, wenn Sie das Theme abspeichern. Gehen Sie hierfür zu: Inhalte > Themes > rufen das Theme auf und speichern es ab.
{% endhint %}

### Allgemeine Einstellungen

| Einstellungen   | Bedeutung                                                       |
| --------------- | --------------------------------------------------------------- |
| Menü aktivieren | Das Plugin für den jeweiligen Shop aktivieren oder deaktivieren |
| Rahmen Farbe    | Farbe für den Rahmen, welches das gesamte Menü umschließt       |

### Main Navigation

| Einstellungen                                                             | Bedeutung                                                                    |
| ------------------------------------------------------------------------- | ---------------------------------------------------------------------------- |
| [Anzahl der Serviceseiten im Header](#anzahl-der-serviceseiten-im-header) | Anzeigen der ersten x Einträge der Service Navigation in der Hauptnavigation |
| [Position der Serviceseiten](#position-der-serviceseiten)                 | Position der Serviceseiten in der Hauptnavigation                            |
| [Hintergrundfarbe](#farbeinstellungen-der-main-navigation)                | Hintergrund für die Hauptnavigation                                          |
| [Linkfarbe](#farbeinstellungen-der-main-navigation)                       | Linkfarbe für die Hauptnavigation                                            |
| [Linkfarbe Hover](#farbeinstellungen-der-main-navigation)                 | Hover Linkfarbe für die Hauptnavigation                                      |

#### Anzahl der Serviceseiten im Header

Die Serviceseiten werden nach dem eigentlichen Amazon Menü ausgegeben. Beide befinden sich im Headerbereich in der Navigationsleiste der Hauptnavigation.

<figure><img src="/files/3LsNdrnZghupOCX7fc4w" alt=""><figcaption><p>Beispiel für die Ausgabe der Serviceseiten im Header</p></figcaption></figure>

Wie Sie eine Serviceseite anlegen und einrichten erfahren Sie im Shopware Handbuch: *Einrichtung des Footers und Servicemenüs*

{% embed url="<https://docs.shopware.com/de/shopware-6-de/tutorials-und-faq/einrichtung-des-footers#kategoriestruktur-anlegen>" %}
Shopware Handbuch zur Einrichtung des Footers und Servicemenüs
{% endembed %}

In Ihrem Verkaufskanal müssen Sie anschließend die Serviceseiten der entsprechenden Einstellung zuweisen. Sie finden diese in Ihrem Verkaufskanal unter: *Allgemein > Grundeinstellungen > Einstiegspunkt für die Footer-Service-Navigation*

<figure><img src="/files/0pPlKjb93VFkxH3GqXNQ" alt=""><figcaption><p>Einstellung für die Zuweisung der Serviceseiten im Verkaufskanal</p></figcaption></figure>

Nach den grundlegenden Einstellungen der Serviceseiten können Sie bestimmen, wie viele Serviceseiten im Header ausgegeben werden sollen. Hierbei werden immer die ersten x Servicekategorien angezeigt. Es kann nicht manuell entschieden werden!

#### Position der Serviceseiten

Legen Sie fest, ob die Serviceseiten rechts oder linksbündig in der Navigationsleiste ausgegeben werden sollen.&#x20;

<figure><img src="/files/JK9S96lH38xaGsPIr2gZ" alt=""><figcaption><p>Beispiel für eine linksbündige Anzeige der Serviceseiten</p></figcaption></figure>

<figure><img src="/files/86HjhQPs67k3XGMCJ1s7" alt=""><figcaption><p>Beispiel für eine rechtsbündige Anzeige der Serviceseiten</p></figcaption></figure>

#### Farbeinstellungen der Main Navigation

| Nummer | Einstellung      |
| ------ | ---------------- |
| 1      | Hintergrundfarbe |
| 2      | Linkfarbe        |
| 3      | Linkfarbe Hover  |

<figure><img src="/files/FVVCNR3kb5UMN63A4i98" alt=""><figcaption><p>Beispiel für Farbeinstellungen: Main Navigation</p></figcaption></figure>

### Hauptmenü

{% hint style="info" %}
Das Hauptmenü beinhaltet alle Hauptnavigationspunkte und zeigt [Badges](#kategorie_badge) an, welche in den Einstellungen für die Kategorie hinzugefügt werden können.
{% endhint %}

| Einstellungen                                              | Bedeutung                                                                       |
| ---------------------------------------------------------- | ------------------------------------------------------------------------------- |
| [Breite](#breite-und-hoehe-des-hauptmenue)                 | Breite des Hauptmenüs. Wert in Pixel. 0 = automatisch                           |
| [Maximale Höhe](#breite-und-hoehe-des-hauptmenue)          | Maximale Höhe des Hauptmenüs. Wert in Pixel.                                    |
| Hauptkategorie anklickbar                                  | Sollen die aufgelisteten Hauptkategorie verlinkt sein oder nur aus Wort stehen? |
| [Border Top Farbe](#farbeinstellungen-des-hauptmenu)       | Farbe für die obere Linie des Menü                                              |
| [Header Hintergrundfarbe](#breite-und-hohe-des-hauptmenu)  | Hintergrund für den Menü-Header                                                 |
| [Header Textfarbe](#farbeinstellungen-des-hauptmenu)       | Textfarbe für den Menü-Header                                                   |
| [Hintergrundfarbe](#farbeinstellungen-des-hauptmenu)       | Hintergrund für das Dropdown-Menü                                               |
| [Hintergrundfarbe Hover](#farbeinstellungen-des-hauptmenu) | Hintergrund für die Dropdown-Menü-Links bei Hover                               |
| [Linkfarbe](#farbeinstellungen-des-hauptmenu)              | Linkfarbe für das Hauptmenü                                                     |
| [Linkfarbe Hover](#farbeinstellungen-des-hauptmenu)        | Hover Linkfarbe für das Hauptmenü                                               |

#### Breite und Höhe des Hauptmenü

Bestimmen Sie die Breite und die maximale Höhe des Hauptmenüs. Beide Angaben erfolgen in Pixel.

<figure><img src="/files/Qn8Y3ynoe5yzOHevHzRB" alt="" width="283"><figcaption></figcaption></figure>

**Breite**\
Sie können hier die Breite individuell bestimmen, falls dies notwendig ist (z. B. bei langen Kategorienamen). Möchten Sie eine automatische Ermittlung der breite, dann setzen Sie die Zahl Null "0" ins Feld.

**Maximale Höhe**\
Die Höhe können Sie einschränken, falls der Shop zu viele Hauptnavigationspunkte besitzen. Ist die angegebene Höhe erreicht, wird eine Scrollleiste eingeblendet. Damit ist gewährleistet, dass auch kleine Bildschirmauflösungen die Navigation nutzen können. \
Geben Sie eine eine größeren Wert an, als wie für die Navigationspunkte benötigt wird, nimmt das System die Höhe der Navigationspunkte an. &#x20;

#### Farbeinstellungen des Hauptmenü

| Nummer | Einstellung             |
| ------ | ----------------------- |
| 1      | Border Top Farbe        |
| 2      | Header Hintergrundfarbe |
| 3      | Header Textfarbe        |
| 4      | Hintergrundfarbe        |
| 5      | Hintergrundfarbe Hover  |
| 6      | Linkfarbe               |
| 7      | Linkfarbe Hover         |

<figure><img src="/files/XqX3wX2SuqLfDPk4sYWE" alt=""><figcaption><p>Beispiel für Farbeinstellungen: Hauptmenü</p></figcaption></figure>

### Submenü Einstellungen

{% hint style="info" %}
Das Submenü ist der Bereich, welcher erscheint, wenn Sie mit der Maus über eine Hauptkategorie gehen. Auf ihm erscheinen die Unterkategorien, Bilder und Texte.&#x20;
{% endhint %}

| Einstellungen                                               | Bedeutung                                           |
| ----------------------------------------------------------- | --------------------------------------------------- |
| Höhe                                                        | Höhe des Submenüs. Wert in Pixel.                   |
| Einblendzeit für das Submenü in ms                          | Einblendzeit für das Submenü in Millisekunden.      |
| [Submenü-Layout](#submenue-layout-und-kategorie-spalten)    | Aufteilung des Inhalts vom Submenü in Spalten.      |
| [Kategorie-Spalten](#submenue-layout-und-kategorie-spalten) | Aufteilung der Kategorien in Spalten.               |
| [Teaser Image Animation](#teaser-image-animation)           | Animation für das Vorschaubild im Submenü Container |
| [Border Top Farbe](#farbeinstellungen-fur-supmenu)          | Farbe für die obere Linie des Submenü               |
| [Header Hintergrundfarbe](#farbeinstellungen-fur-supmenu)   | Hintergrund für den Submenü-Header                  |
| [Header Textfarbe](#farbeinstellungen-fur-supmenu)          | Textfarbe für den Submenü-Header                    |
| [Hintergrundfarbe](#farbeinstellungen-fur-supmenu)          | Hintergrund für das Submenü                         |
| [Linkfarbe Level 1](#farbeinstellungen-fur-supmenu)         | Linkfarbe für die Kategorien in Level 1             |
| [Linkfarbe Level 1 Hover](#farbeinstellungen-fur-submenu)   | Hover-Linkfarbe für die Kategorien in Level 1       |
| [Linkfarbe Level 2](#farbeinstellungen-fur-submenu)         | Linkfarbe für die Kategorien in Level 2             |
| [Linkfarbe Level 2 Hover](#farbeinstellungen-fur-submenu)   | Hover-Linkfarbe für die Kategorien in Level 2       |
| [Text Farbe](#farbeinstellungen-fur-submenu)                | Schriftfarbe für Texte und Überschriften            |

#### Submenü-Layout und Kategorie-Spalten

{% hint style="info" %}
Die Einstellungen für das Submenü-Layout und Kategorie-Spalten können in den Einstellungen für eine Kategorie noch einmal verändert werden.
{% endhint %}

**Submenü-Layout**\
Diesen Bereich können Sie in bis zu 4 Spalten aufteilen oder komplett ausblenden. Das Submenü gewinnt an Breite je mehr Spalten verwendet werden.

**Kategorie-Spalten**\
Hier entscheiden Sie, wie viel Platz die Unterkategorien bekommen. Diesen Bereich können Sie ebenfalls in bis zu 4 Spalten aufteilen oder komplett ausblenden. Diese Einstellung wirkt sich im Gegenteil zum Submenü-Layout nicht auf die Breite des Submenü aus.

<figure><img src="/files/6vd3HfYKNjSBP3e7YvTf" alt=""><figcaption><p>Submenü-Layout: 4-spaltig (20%, 20%, 20%, 40%) | Kategorie-Spalten: 3 Spaten</p></figcaption></figure>

#### Teaser Image Animation

Für jede Kategorie können Sie ein Teaser/Bild hinterlegen. Diese [Einstellung für den Teaser](#kategorie_teaser) finden Sie in den Einstellungen der Kategorie. In den Plugin Einstellungen können Sie wählen, ob die Einblendung mit einer Animation erfolgen soll.

Folgende Möglichkeiten stehen Ihnen zur Verfügung:&#x20;

* **Keine Animation:** Das Bild wird mit dem Submenü eingeblendet. Es erfolgt keine Animation
* **Bild in Endposition bewegen:** Das Bild bewegt sich von der Position, an der es vom System eingeblendet wird, an den Platz, das Sie ihm zugewiesen haben. Die [Positionierung](#kategorie_teaser) stellen Sie in den Kategorien ein.

<figure><img src="/files/K5zEUIUSZnCYKwFbvuHQ" alt=""><figcaption><p>Beispiel für Animation: Bild in Endposition bewegen</p></figcaption></figure>

* **Bildgröße von 0 auf normal:** Das Bild vergrößert sich von 0% auf 100%. Die Animation fängt immer von der rechten unteren Ecke des Bildes an.&#x20;

<figure><img src="/files/YkFLu8cwyQumfizacq0J" alt=""><figcaption><p>Beispiel für Animation: Bildgröße von 0 auf normal</p></figcaption></figure>

#### Farbeinstellungen für Submenü

| Nummer | Einstellung             |
| ------ | ----------------------- |
| 1      | Border Top Farbe        |
| 2      | Header Hintergrundfarbe |
| 3      | Header Textfarbe        |
| 4      | Hintergrundfarbe        |
| 5      | Linkfarbe Level 1       |
| 6      | Linkfarbe Level 1 Hover |
| 7      | Linkfarbe Level 2       |
| 8      | Linkfarbe Level 2 Hover |
| 9      | Text Farbe              |

<figure><img src="/files/owPTDQS73Y5064WocFrN" alt=""><figcaption><p>Beispiel für Farbeinstellungen: Submenü</p></figcaption></figure>

## Kategorie Einstellungen <a href="#kategorie_einstellungen" id="kategorie_einstellungen"></a>

Gehen Sie hierfür in: *Katalog > Kategorien*, klicken Sie eine Hauptkategorie ihres Shops an und scrollen Sie in den Einstellungen zu "Amazon Navigation Menü Einstellungen".&#x20;

Hier können Sie individuell für jede Kategorien in der 2. Ebene (Hauptkategorie) und Kategorien in der 4. Ebene Einstellungen vornehmen und somit von den Einstellungen im Plugin abweichen. Des Weiteren sind hier Einstellungen möglich, welche nicht im Plugin vorkommen.

<figure><img src="/files/19Sn16DOsin4djI8DM8Q" alt=""><figcaption><p>Beispiel für die Kategorie Ebenen anhand des Demoshop</p></figcaption></figure>

**Übersicht der Einstellungen in den Kategorie Ebenen**

| 2. Kategorie Ebene:                     | 4. Kategorie Ebene:                  |
| --------------------------------------- | ------------------------------------ |
| [Badge Einstellung](#kategorie_badge)   | [Text Einstellung](#kategorie_texte) |
| [Teaser Einstellung](#kategorie_teaser) |                                      |
| [Layout Einstellung](#kategorie_layout) |                                      |
| [Text Einstellung](#kategorie_texte)    |                                      |

### Badge Einstellung  <a href="#kategorie_badge" id="kategorie_badge"></a>

Badge sind kleine, farblich hinterlegte Hinweise. Sie werden hinter dem Namen der Hauptkategorie angezeigt.

<figure><img src="/files/ohP5tBs9BLA5HHpKitdV" alt=""><figcaption><p>Beispiel für Badge: ++ Neue Kollektion ++</p></figcaption></figure>

| Feldname               | Bedeutung                                    |
| ---------------------- | -------------------------------------------- |
| Badge-Text             | Text oder Wort welches angezeigt werden soll |
| Badge-Hintergrundfarbe | Hintergrundfarbe des Badge                   |
| Badge-Schriftfarbe     | Schriftfarbe des Badge                       |

### Teaser Einstellung <a href="#kategorie_teaser" id="kategorie_teaser"></a>

Mit Teaser ist eine Hintergrundbild im Submenü gemeint. Mittels einer Positionsangaben ist es möglich die Bilder vollkommen oder teilweise über das Menü erscheinen zu lassen.

<figure><img src="/files/hdsTYEPpG3kY3Ev0LwzV" alt="" width="491"><figcaption><p>Beispiel für Teaser welches teilweise über das Submenü erscheint</p></figcaption></figure>

| Feldname          | Bedeutung                                                                     |
| ----------------- | ----------------------------------------------------------------------------- |
| Submenü Bild      | Auswahl eines Teasers/Bild für das Submenü                                    |
| Teaser Position X | Die horizontale Position des Teasers. Wert in Pixel (negative Werte möglich). |
| Teaser Position Y | Die vertikale Position des Teasers. Wert in Pixel (negative Werte möglich).   |

### Layout Einstellung <a href="#kategorie_layout" id="kategorie_layout"></a>

Hier können Sie von den Einstellungen im Plugin abweichen und das [Layout des Submenü](#submenue-layout-und-kategorie-spalten) und die [Spaltenaufteilung für die Kategorie](#submenue-layout-und-kategorie-spalten) individuell einer Kategorie anpassen.

| Feldname         | Bedeutung                                      |
| ---------------- | ---------------------------------------------- |
| Submenü-Layout   | Aufteilung des Inhalts vom Submenü in Spalten. |
| Kategorie-Spalte | Aufteilung der Kategorien in Spalten.          |

### Texte Einstellung  <a href="#kategorie_texte" id="kategorie_texte"></a>

Es gibt zwei Möglichkeiten Texte im Submenü zu hinterlegen. Diese sind auf der 2. und 4. Kategorie Ebene möglich.

| Feldname                      | Bedeutung                                                                                 |
| ----------------------------- | ----------------------------------------------------------------------------------------- |
| [Custom HTML](#custom-html)   | HTML Content für die letzte Spalte im Layout. (Einstellung in 2. Kategorie Ebene möglich) |
| [Beschreibung](#beschreibung) | Kurzbeschreibung für die Unterkategorien. (Einstellung in 4. Kategorie Ebene möglich)     |

#### Custom HTML

Sie können, nach der Ausgabe der Kategorien im Submenü, einen Inhalt mit z. B. Texten hinzufügen. Hierfür steht Ihnen (auf der 2 Kategorie Ebene) ein *Custom HTML* Element zur Verfügung. Mit diesem können Sie ebenfalls HTML Anweisungen integrieren.&#x20;

{% hint style="warning" %}
Für die Ausgabe des Custom HTML muss eine extra Spalte im Submenü-Layout eingeplant sein.&#x20;
{% endhint %}

#### Beschreibung

In der 4. Kategorie Ebene wird das Feld "Beschreibung" aktiv. Texte die hier eingestellt werden, werden unter der entsprechenden Unterkategorie angezeigt. Sie können dazu dienen, eine Kategorie zu beschreiben oder den Inhalt der Kategorie zu verdeutlichen.

<figure><img src="/files/UH1l6s5tTnLi3D1wdBLr" alt=""><figcaption><p>Beispiel für Beschreibungen einer Unterkategorie</p></figcaption></figure>

## Fragen und Antworten

<details>

<summary>Meine Einstellung werden nicht im Frontend angezeigt</summary>

Überprüfen Sie bitte, ob die Änderungen abgespeichert wurden.&#x20;

Sollte das der Fall sein, kompilieren Sie das Theme. Hierzu gehen Sie in die Theme Einstellungen: Inhalte > Themes, wählen ein Theme aus und speichern es ab (es muss keine Änderung in den Theme Einstellungen vorgenommen werden).

Sollte es weiterhin Probleme geben, wechseln Sie das Theme auf das Shopware Standard Template (gilt nur für Nutzer, welches ein eigenes Theme verwenden). \
Ist der Fehler verschwunden, wenden Sie sich bitte an den Hersteller des Themes. Tritt der Fehler im Shopware Standard Template ebenfalls auf, wenden Sie sich bitte an uns: info\@coolbax .de

</details>

<br>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://coolbax.gitbook.io/coolbax-docs/handbuecher/storefront/amazon-dropdown-menue.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.