# SEO Banner Professionell

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

Sie können das Plugin [hier über den Shopware Community Store erwerben](https://store.shopware.com/cbax365407396814/professionelle-bannerverwaltung-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

| Allgemein Einstellungen                             |                                                                                      |
| --------------------------------------------------- | ------------------------------------------------------------------------------------ |
| Aktiv                                               | Das Plugin für den jeweiligen Shop aktivieren oder deaktivieren                      |
| [Anzeige mehrerer Banner](#anzeige-mehrerer-banner) | Wie soll verfahren werden, wenn mehrere Banner die selbe Position haben?             |
| [Sortierung der Banner](#sortierung-der-banner)     | Welche Reihenfolge soll genutzt werden wenn mehrere Banner die selbe Position haben? |

#### Anzeige mehrerer Banner

Bei der Anlage eines Banner können Sie die Position festlegen. Hierbei kann es passieren, dass mehrere Banner die gleiche Position zugewiesen bekommen. In dieser Einstellung legen Sie fest, was in solchen Situationen passieren soll:

* **Alle Banner anzeigen:** Es werden untereinander alle Banner an der Position ausgegeben. Die Sortierung legen Sie in der nachfolgenden Einstellung: [Sortierung der Banner](#sortierung-der-banner) fest
* **Nur ein Banner anzeigen:** Per Zufallsprinzip wir ein Banner angezeigt. Mit jeder Aktualisierung der Seite wird das Zufallsprinzip erneut angestoßen.

#### Sortierung der Banner

Haben Sie in der Einstellung: [Anzeige mehrerer Banner = Alle Banner anzeigen](#anzeige-mehrerer-banner) ausgewählt, können Sie hier die Sortierung der Banner bestimmen:

* **Nach Erstelldatum (älteste zu erst)**
* **Nach Erstelldatum (neueste zu erst)**
* **Zufällige Sortierung**

{% hint style="info" %}
Mit der ersten Abspeicherung eines neuen Banners, wird das Datum mit in die Datenbank übergeben. Dieses Datum wird herangezogen, wenn Sie einer der beiden Optionen: *Nach Erstelldatum (...)* nutzen möchten.
{% endhint %}

## Übersicht der Bannerverwaltung

Um zur Übersicht der Bannerverwaltung zu gelangen, gehen Sie auf: *Inhalte > Bannerverwaltung*.

<figure><img src="https://857504323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIjmVDBFtwlXBYXSv10K6%2Fuploads%2Fv76hXNr4ULbTdWnhtQdv%2FPluginSW6_BannerManagement-024.jpg?alt=media&#x26;token=59363b29-345f-407d-8999-320b995c7f21" alt=""><figcaption><p>Übersicht der Bannerverwaltung</p></figcaption></figure>

### Erweiterung der Übersichttabelle

In der letzten Spalte des Tabellenkopf können Sie, über ein zusätzlichen Menü, weitere Spalten einblenden zu lassen.

Folgende Spalten sind oder können eingeblendet werden:

* Bezeichnung
* Startzeitpunkt
* Endzeitpunkt
* Geräte-Einstellungen
* Verkaufskanäle
* Kundengruppen
* Anzahl Produkte

{% hint style="info" %}
Für eine übersichtlichere Darstellung können Sie die Spaltenhöhe mit der Einstellung: *Kompaktmodus verwenden* aktivieren. Diese Einstellung finden Sie in dem Menü mit der Spaltenauswahl.
{% endhint %}

<figure><img src="https://857504323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIjmVDBFtwlXBYXSv10K6%2Fuploads%2FUng1s54AS17HHjJFL2Hx%2FPluginSW6_BannerManagement-001.jpg?alt=media&#x26;token=8ae30fcf-5f60-424e-9fd0-8e4d8a6f1009" alt=""><figcaption><p>Möglichkeit zur Erweiterung der Tabelle</p></figcaption></figure>

## Ein neues Banner anlegen <a href="#neues_banner" id="neues_banner"></a>

Um ein neues Banner anzulegen, nutzen Sie den Button "Hinzufügen" über der Übersichtstabelle.&#x20;

<figure><img src="https://857504323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIjmVDBFtwlXBYXSv10K6%2Fuploads%2FUHaZ62e9yCRcfwgJPLNR%2FPluginSW6_BannerManagement-004.jpg?alt=media&#x26;token=3afd1d6b-7292-4629-9994-6945c9fb13d5" alt=""><figcaption><p> Button "Hinzufügen" über der Übersichtstabelle</p></figcaption></figure>

In dem nun erscheinenden Bereich legen Sie die grundlegenden Einstellungen des neuen Banners fest. Sobald Sie ein [Layout](#einstellungen_allgemein) ausgewählt und gespeichert haben, werden die Tabs: Inhalt, Einstellungen und Positionierung freigegeben.

## Layout <a href="#einstellungen_allgemein" id="einstellungen_allgemein"></a>

Um ein neues Banner zu erstellen, legen Sie zunächst eine Bezeichnung fest und wählen ein Layout aus. Speichern Sie die Einstellungen, um die weiteren Tabs freizuschalten.

| Einstellung: Layout                       | Bedeutung                                |
| ----------------------------------------- | ---------------------------------------- |
| Bezeichnung                               | Legen Sie eine interne Bezeichnung fest  |
| [Layout 1-10](#einstellungen_allgemein-1) | Wählen Sie ein Layout für Ihr Banner aus |

<figure><img src="https://857504323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIjmVDBFtwlXBYXSv10K6%2Fuploads%2FjayXqRhCajreUGLxjoFj%2FPluginSW6_BannerManagement-025.jpg?alt=media&#x26;token=3248c50f-5644-4a45-a015-539206545b07" alt=""><figcaption><p>Auswahl des Layouts</p></figcaption></figure>

#### Layoutvarianten im Frontend <a href="#einstellungen_allgemein" id="einstellungen_allgemein"></a>

<div><figure><img src="https://857504323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIjmVDBFtwlXBYXSv10K6%2Fuploads%2F6wGsdRh36IOdexHtsmAL%2FPluginSW6_BannerManagement-026.jpg?alt=media&#x26;token=2ecf7956-4c33-49b3-a636-b194412c7c6d" alt=""><figcaption><p>Beispiel für das <strong>Layout 1</strong> im Frontend</p></figcaption></figure> <figure><img src="https://857504323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIjmVDBFtwlXBYXSv10K6%2Fuploads%2FtzwdVLvMQgbwMeakUmnv%2FPluginSW6_BannerManagement-027.jpg?alt=media&#x26;token=beb9f0b7-e650-4130-9203-a03d3f3c2084" alt=""><figcaption><p>Beispiel für das <strong>Layout 2</strong> im Frontend</p></figcaption></figure></div>

<div><figure><img src="https://857504323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIjmVDBFtwlXBYXSv10K6%2Fuploads%2FPB3yTBClwD8zbihyImaM%2FPluginSW6_BannerManagement-028.jpg?alt=media&#x26;token=522609e5-51da-4218-a9a4-8af24391f95a" alt=""><figcaption><p>Beispiel für das <strong>Layout 3</strong> im Frontend</p></figcaption></figure> <figure><img src="https://857504323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIjmVDBFtwlXBYXSv10K6%2Fuploads%2FmJnpMzvUwMd2UhOMLL9W%2FPluginSW6_BannerManagement-029.jpg?alt=media&#x26;token=c5e0f68e-8274-44d3-a151-3620f96d9ae2" alt=""><figcaption><p>Beispiel für das <strong>Layout 4</strong> im Frontend</p></figcaption></figure></div>

<div><figure><img src="https://857504323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIjmVDBFtwlXBYXSv10K6%2Fuploads%2Fhg2OuapJpHZk0TMEM9Ef%2FPluginSW6_BannerManagement-030.jpg?alt=media&#x26;token=6548bd06-38c2-4134-a9ef-03ac0994c968" alt=""><figcaption><p>Beispiel für das <strong>Layout 5</strong> im Frontend</p></figcaption></figure> <figure><img src="https://857504323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIjmVDBFtwlXBYXSv10K6%2Fuploads%2FEs5S9oYuj5yQ7JZk6MWk%2FPluginSW6_BannerManagement-031.jpg?alt=media&#x26;token=71313dbd-3c49-455a-b849-85e60b8a5464" alt=""><figcaption><p>Beispiel für das <strong>Layout 6</strong> im Frontend</p></figcaption></figure></div>

<div><figure><img src="https://857504323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIjmVDBFtwlXBYXSv10K6%2Fuploads%2FBZD2GvmnbitD9Xd7K60N%2FPluginSW6_BannerManagement-032.jpg?alt=media&#x26;token=665efba2-5a93-4a61-9a68-47a6e99bf7e2" alt=""><figcaption><p>Beispiel für das <strong>Layout 7</strong> im Frontend</p></figcaption></figure> <figure><img src="https://857504323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIjmVDBFtwlXBYXSv10K6%2Fuploads%2Fleigkr9jHTmJcJGdXocO%2FPluginSW6_BannerManagement-033.jpg?alt=media&#x26;token=4c6cb78f-e1d0-48aa-a4bf-8116ec61aa9e" alt=""><figcaption><p>Beispiel für das <strong>Layout 8</strong> im Frontend</p></figcaption></figure></div>

<div><figure><img src="https://857504323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIjmVDBFtwlXBYXSv10K6%2Fuploads%2FPhbc5DbbPrNrwW4FmBsb%2FPluginSW6_BannerManagement-034.jpg?alt=media&#x26;token=1c591c17-2d1b-46c8-bda2-babb71b4d2c8" alt=""><figcaption><p>Beispiel für das <strong>Layout 9</strong> im Frontend</p></figcaption></figure> <figure><img src="https://857504323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIjmVDBFtwlXBYXSv10K6%2Fuploads%2FvcZorpd9yFmWGcAnnwGs%2FPluginSW6_BannerManagement-035.jpg?alt=media&#x26;token=ad2bc3e9-2d0a-4875-b783-c3401a130bb1" alt=""><figcaption><p>Beispiel für das <strong>Layout 10</strong> im Frontend</p></figcaption></figure></div>

## Inhalt <a href="#einstellungen_banner" id="einstellungen_banner"></a>

Geben Sie im Bereich Inhalt die Bannertexte ein und treffen Sie eine Bildauswahl.

### Bild

{% hint style="warning" %}
Das Banner wird nur angezeigt, wenn ein Bild hinterlegt ist. Rein textbasierte Banner werden im Frontend nicht unterstützt.
{% endhint %}

| Einstellung: Banner                             | Bedeutung                                                                                                                                                                                                                                                                                                                                                 |
| ----------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Bild                                            | Wählen Sie ein Bild aus Ihrer Media-Datenbank aus oder laden Sie ein neues Bild hoch.                                                                                                                                                                                                                                                                     |
| Anzeigemodus                                    | <p>Entscheiden Sie, wie das Bild dargestellt werden soll</p><p></p><p><strong>Original</strong>: passt sich das Bild bis zu seiner Größe an den Bereich an,</p><p></p><p><strong>Zugeschnitten</strong>: wird das Bild auf die Größe des Bereiches gestreckt,</p><p></p><p><strong>Skaliert</strong>: wird der Bereich mit dem Bild komplett gefüllt.</p> |
| Mindesthöhe                                     | Diese Einstellung ist nur im Anzeigemodus ‚Zugeschnitten‘ verfügbar. Legen Sie hier die Bannerhöhe fest. Falls das Originalbild höher als dieser Wert ist, wird es oben und unten abgeschnitten                                                                                                                                                           |
| Vertikale Ausrichtung                           | Diese Einstellung ist nur im Anzeigemodus ‚Original‘ und ‚Skaliert‘ verfügbar. Möglichkeit, das Bild an der oberen oder unteren Kante bzw. zentriert auszurichten.                                                                                                                                                                                        |
| Horizontal Ausrichtung                          | Diese Einstellung ist nur im Anzeigemodus ‚Original‘ und ‚Skaliert‘ verfügbar. Möglichkeit, das Bild an der linken oder rechten Kante bzw. zentriert auszurichten.                                                                                                                                                                                        |
| Bilder als ausschließlich dekorativ kennzeichen | Im Sinne der Barrierefreiheit legt diese Option fest, ob ein Bild rein dekorativ ist. In diesem Fall wird es von Screenreadern ignoriert.                                                                                                                                                                                                                 |
| Link                                            | Legen Sie hier fest, wohin der Button verlinken soll.                                                                                                                                                                                                                                                                                                     |
| Link in neuem Tab öffnen                        | Wenn aktiv, wird der Link in einem extra Tab geöffnet.                                                                                                                                                                                                                                                                                                    |

### Text

<figure><img src="https://857504323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIjmVDBFtwlXBYXSv10K6%2Fuploads%2FrJcDCZVRzsv45dK26gKT%2FPluginSW6_BannerManagement-036.jpg?alt=media&#x26;token=02eab0cd-d845-4c26-befc-e23a1dbe39d0" alt=""><figcaption><p>1) Headline, 2) Subheadline, 3) Text, 4) Button</p></figcaption></figure>

Hier können Sie eine Headline, Subheadline und/oder Text hinterlegen. Alle Einstellungen sind optional.

| Einstellung: Text | Bedeutung                                                          |
| ----------------- | ------------------------------------------------------------------ |
| Headline          | Der Titel wird zusätzlich als alt-Tag für das Banner-Bild genutzt. |
| Subheadline       | Der Untertitel wird zwischen Titel und Beschreibung ausgegeben.    |
| Text              | Möglichkeit eine längeren Text auf dem Banner zu hinterlegen.      |

### Button

Hier haben Sie die Möglichkeit einen Button unterhalb der ausführlichen Beschreibung auszugeben.

| Einstellung: Button      | Bedeutung                                              |
| ------------------------ | ------------------------------------------------------ |
| Text                     | Bezeichnung des Buttons                                |
| Link                     | Legen Sie hier fest, wohin der Button verlinken soll.  |
| Link in neuem Tab öffnen | Wenn aktiv, wird der Link in einem extra Tab geöffnet. |

## Einstellungen <a href="#einstellungen_allgemein" id="einstellungen_allgemein"></a>

Hier finden Sie alle Designanpassungen für das [Bild](#allgemein), die [Headline und Subheadline](#text-1), den [Text](#text-1), den [Button ](#einstellungen_allgemein-3)und das [Overlay](#overlay).

### Allgemein

{% hint style="info" %}
Diese Einstellungen werden nicht übernommen, wenn das Banner über das Erlebniswelten-Element integriert wird. Sie finden diese Einstellungen direkt in den Erlebniswelten.
{% endhint %}

| Einstellung: Allgemein                                            | Bedeutung                                                                                    |
| ----------------------------------------------------------------- | -------------------------------------------------------------------------------------------- |
| [Größenmodus](#grossenmodus-und-hintergrundfarbe)                 | Hier entscheiden Sie ob der Inhalt auf die volle Breite gezogen oder zentriert bleiben soll. |
| [Hintergrundfarbe](#grossenmodus-und-hintergrundfarbe)            | Hier wählen Sie die Hintergrundfarbe der Sektion.                                            |
| CSS-Klasse (optional)                                             | Sie können eine oder mehrere, mit Leerzeichen getrennte, CSS Klassen hinzufügen.             |
| [Bild: Innenabstand](#bild-innenabstand-und-hintergrundfarbe)     | Definieren Sie einen Abstand zwischen Block und Bild.                                        |
| [Bild: Hintergrundfarbe](#bild-innenabstand-und-hintergrundfarbe) | Hier wählen Sie die Hintergrundfarbe des Blockes.                                            |

#### **Größenmodus und Hintergrundfarbe**

Bei der Einstellung **Zentrierter Inhalt** passt sich die Breite des Banners automatisch an den Content-Bereich Ihres Shops an. Der verbleibende Platz links und rechts bis zum Bildschirmrand kann mit einer individuellen Hintergrundfarbe gefüllt werden.

<figure><img src="https://857504323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIjmVDBFtwlXBYXSv10K6%2Fuploads%2FllLEFushM3WKzKjeWXde%2FPluginSW6_BannerManagement-058.jpg?alt=media&#x26;token=5ad46061-6a22-4466-84a9-9e5b9671122c" alt=""><figcaption><p>Beispiel für: <em>Zentrierter Inhalt mit Hintergrundfarbe</em></p></figcaption></figure>

Bei der Einstellung Volle Breite erstreckt sich das Banner über den gesamten Content-Bereich hinaus bis an die Seitenränder des Browsers. Die Option „Hintergrundfarbe“ hat in diesem Modus keine Auswirkung.

<figure><img src="https://857504323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIjmVDBFtwlXBYXSv10K6%2Fuploads%2FMPJOxmaeo9sivyBdo8yd%2FPluginSW6_BannerManagement-059.jpg?alt=media&#x26;token=cf045b28-557e-4c57-9660-59e08b414fb9" alt=""><figcaption><p>Beispiel für: <em>Volle Breite</em></p></figcaption></figure>

#### **Bild - Innenabstand und Hintergrundfarbe**

Über die Optionen „Bild: Innenabstand“ und „Bild: Hintergrundfarbe“ legen Sie den Abstand zwischen Bild und Container fest. Jede Richtung können Sie einzeln definieren. Die Angaben können in Pixel (px) oder Prozent (%) hinterlegt werden.

{% hint style="info" %}
Für den Innenabstand können Sie bis zu 4 Werte angeben. Diese werden im Uhrzeigersinn ausgeführt.

* **1 Wert:** z. B. 10px = oben, rechts, unten und links wird ein Abstand von 10 Pixel eingefügt
* **2 Werte:** z. B. 10px 5px = oben und unten bekommen einen Abstand von 10 Pixel eingefügt, rechts und links erhalten 5 Pixel Abstand.
* **3 Werte:** z. B. 10px 5px 20px= oben wird einen Abstand von 10 Pixel, rechts und links einen Abstand von 5 Pixel und unten 20 Pixel eingefügt.
* **4 Werte:** z. B. 10px 5px 20px 15px = oben wird einen Abstand von 10 Pixel, rechts einen Abstand von 5 Pixel, unten ein Abstand von 20 Pixel und links ein Abstand von 15 Pixel eingefügt.
  {% endhint %}

Diesen Bereich können Sie, wie im Beispiel gezeigt, farblich gestalten:

<figure><img src="https://857504323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIjmVDBFtwlXBYXSv10K6%2Fuploads%2FUiVqPNVcLHtJwWvbEVUb%2FPluginSW6_BannerManagement-055.jpg?alt=media&#x26;token=e4e9894f-feea-484e-9191-15e3ad1812f4" alt=""><figcaption><p>Beispiel für <strong>Bild - Innenabstand</strong> (40px 40px 40px 40px) <strong>und Hintergrundfarbe</strong> (grau)</p></figcaption></figure>

### Text

{% hint style="warning" %}
Manche Einstellungen sind nur dann verfügbar, wenn der dazugehörige Inhalt existiert. Wenn Sie beispielsweise keinen Text für die Subheadline [(im Tab Inhalt)](#text) eingeben, können die Felder für deren Schriftgröße und Schriftfarbe nicht bearbeitet werden. Diese werden erst aktiv, sobald das Inhaltsfeld ausgefüllt ist.
{% endhint %}

| Einstellung: Text          | Bedeutung                                                                      |
| -------------------------- | ------------------------------------------------------------------------------ |
| Text Ausrichtung           | Möglichkeit, den Text am linken oder rechten Rand bzw. zentriert auszurichten. |
| Schriftgröße (Headline)    | Legen Sie hier die Schriftgröße für die Headline fest.                         |
| Schriftfarbe (Headline)    | Legen Sie hier die Schriftfarbe für die Headline fest.                         |
| Schriftgröße (Subheadline) | Legen Sie hier die Schriftgröße für die Subheadline fest.                      |
| Schriftfarbe (Subheadline) | Legen Sie hier die Schriftfarbe für die Subheadline fest.                      |
| Schriftgröße (Text)        | Legen Sie hier die Schriftgröße für die Text fest.                             |
| Schriftfarbe (Text)        | Legen Sie hier die Schriftfarbe für die Text fest.                             |

### Button <a href="#einstellungen_allgemein" id="einstellungen_allgemein"></a>

| Einstellung: Button | Bedeutung                                                           |
| ------------------- | ------------------------------------------------------------------- |
| Variante            | Bestimmen Sie, wie der Button aussehen soll.                        |
| Größe               | Bestimmen Sie, in welcher Größe der Button dargestellt werden soll. |

#### **Button Variante**

<div><figure><img src="https://857504323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIjmVDBFtwlXBYXSv10K6%2Fuploads%2FZk1zmE7kR7TuhbQsrEuv%2FPluginSW6_BannerManagement-038.jpg?alt=media&#x26;token=c98adcd0-a212-40b9-b4e5-0203cd311e45" alt=""><figcaption><p>Primärer</p></figcaption></figure> <figure><img src="https://857504323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIjmVDBFtwlXBYXSv10K6%2Fuploads%2FaaPPJUXtpvOOY2lF32l3%2FPluginSW6_BannerManagement-045.jpg?alt=media&#x26;token=58cc46a4-7251-4fcd-a873-1b517e7c8816" alt=""><figcaption><p>Primärer (Outline)</p></figcaption></figure> <figure><img src="https://857504323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIjmVDBFtwlXBYXSv10K6%2Fuploads%2F1iyNnd5XSYSib75xpvij%2FPluginSW6_BannerManagement-037.jpg?alt=media&#x26;token=b07d06d4-46da-404d-9a3e-79d0c18cdcfd" alt=""><figcaption><p>Sekundärer</p></figcaption></figure> <figure><img src="https://857504323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIjmVDBFtwlXBYXSv10K6%2Fuploads%2FJcofNjCJsYqndrQhad6p%2FPluginSW6_BannerManagement-046.jpg?alt=media&#x26;token=f975e8e8-b432-49ae-a486-2ce83163e5cf" alt=""><figcaption><p>Sekundärer (Outline)</p></figcaption></figure></div>

<div><figure><img src="https://857504323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIjmVDBFtwlXBYXSv10K6%2Fuploads%2FPFgTBPIUH868YymROgcQ%2FPluginSW6_BannerManagement-039.jpg?alt=media&#x26;token=b1ff7ad3-077f-493c-b8cc-14289772c8ca" alt=""><figcaption><p>Erfolg</p></figcaption></figure> <figure><img src="https://857504323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIjmVDBFtwlXBYXSv10K6%2Fuploads%2FGKE1mE3m3hrPUicMVPDJ%2FPluginSW6_BannerManagement-047.jpg?alt=media&#x26;token=f917fcc0-f7b1-4c34-a401-ec137f87e520" alt=""><figcaption><p>Erfolg (Outline)</p></figcaption></figure> <figure><img src="https://857504323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIjmVDBFtwlXBYXSv10K6%2Fuploads%2FEr0ILOXYByhnrPIWkwl5%2FPluginSW6_BannerManagement-040.jpg?alt=media&#x26;token=aa118b60-b86a-4fce-922a-5fd0a67ae2b2" alt=""><figcaption><p>Fehler</p></figcaption></figure> <figure><img src="https://857504323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIjmVDBFtwlXBYXSv10K6%2Fuploads%2FHWeDsRg1y7rQKmQxmPhE%2FPluginSW6_BannerManagement-048.jpg?alt=media&#x26;token=592dc33b-3938-4079-82a4-c6aea3d0fced" alt=""><figcaption><p>Fehler (Outline)</p></figcaption></figure></div>

<div><figure><img src="https://857504323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIjmVDBFtwlXBYXSv10K6%2Fuploads%2FnGbSj2YG7ojDlc4LTYCk%2FPluginSW6_BannerManagement-041.jpg?alt=media&#x26;token=643ae1c0-33f5-49a3-9ee1-a2a34bc71215" alt=""><figcaption><p>Hinweis</p></figcaption></figure> <figure><img src="https://857504323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIjmVDBFtwlXBYXSv10K6%2Fuploads%2FgJ70CQAfcLy8mRvVVFWu%2FPluginSW6_BannerManagement-049.jpg?alt=media&#x26;token=216770b5-0d4d-4eae-ae75-b324f9de9a8d" alt=""><figcaption><p>Hinweis (Outline)</p></figcaption></figure> <figure><img src="https://857504323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIjmVDBFtwlXBYXSv10K6%2Fuploads%2F8LEePyGolY33adMoWJ3Q%2FPluginSW6_BannerManagement-042.jpg?alt=media&#x26;token=3f8cced8-5f6b-485a-a052-b435bb345780" alt=""><figcaption><p>Information</p></figcaption></figure> <figure><img src="https://857504323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIjmVDBFtwlXBYXSv10K6%2Fuploads%2FnhBR8tdXG8DLZBmY5u5R%2FPluginSW6_BannerManagement-050.jpg?alt=media&#x26;token=887a1e3e-0930-4470-91dc-cab51c1c524e" alt=""><figcaption><p>Information (Outline)</p></figcaption></figure></div>

<div><figure><img src="https://857504323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIjmVDBFtwlXBYXSv10K6%2Fuploads%2F07nFY7YR5ySA3jksKBFZ%2FPluginSW6_BannerManagement-043.jpg?alt=media&#x26;token=4e534bb2-4598-49aa-be95-b1fe26c080fe" alt=""><figcaption><p>Light</p></figcaption></figure> <figure><img src="https://857504323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIjmVDBFtwlXBYXSv10K6%2Fuploads%2FDvJqRGRkwilCFafvLjnj%2FPluginSW6_BannerManagement-051.jpg?alt=media&#x26;token=9bd01bf2-d2f8-4180-924c-13f7ba8cf602" alt=""><figcaption><p>Light (Outline)</p></figcaption></figure> <figure><img src="https://857504323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIjmVDBFtwlXBYXSv10K6%2Fuploads%2FA7CA7pjf7FpEE7pGlLcp%2FPluginSW6_BannerManagement-044.jpg?alt=media&#x26;token=9e8d1ff8-238e-4afb-8b06-c3cdb5727caf" alt=""><figcaption><p>Dark</p></figcaption></figure> <figure><img src="https://857504323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIjmVDBFtwlXBYXSv10K6%2Fuploads%2FWHHpQFYG7XFiI0ORYVA1%2FPluginSW6_BannerManagement-052.jpg?alt=media&#x26;token=16d5c9c9-19bd-4b71-abc4-f1bf63876962" alt=""><figcaption><p>Dark (Outline)</p></figcaption></figure></div>

#### **Button Größe**

<div><figure><img src="https://857504323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIjmVDBFtwlXBYXSv10K6%2Fuploads%2FVZpcGU6FCrAg7BJQhxNo%2FPluginSW6_BannerManagement-053.jpg?alt=media&#x26;token=bea3c7df-0c52-4999-8a25-648c12f436ed" alt=""><figcaption><p>Klein</p></figcaption></figure> <figure><img src="https://857504323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIjmVDBFtwlXBYXSv10K6%2Fuploads%2FGY4jFu6V56GRwPq1Rj2u%2FPluginSW6_BannerManagement-054.jpg?alt=media&#x26;token=45f3fe49-9e4e-4365-83a6-5c58d96f5b69" alt=""><figcaption><p>Groß</p></figcaption></figure></div>

### Overlay

| Einstellung: Overlay                     | Bedeutung                                                                                                                                                                                                                               |
| ---------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Auf dem Smartphone (Portrait) ausblenden | Wenn aktiv, wird das Overlay (mit Inhalt) auf dem Smartphone ausgeblendet.                                                                                                                                                              |
| Position                                 | Sie können das Overlay am oberen, unteren, linken oder rechten Rand sowie zentriert ausrichten. Abhängig vom gewählten Layout werden nicht verfügbare Optionen automatisch deaktiviert.                                                 |
| Höhe                                     | Legt die Höhe des Overlay-Elements auf dem Banner fest. Der optimale Wert wird je nach gewähltem Layout bereits standardmäßig vorausgefüllt.                                                                                            |
| Innenabstand                             | <p>Legen Sie den Abstand der Elemente innerhalb des Overlays (z. B. Text und Buttons) fest. Sie können Einheiten wie px oder % verwenden.<br><br><em>Beispiel (Uhrzeigersinn): 10px 20px 15px 5px</em> (Oben, Rechts, Unten, Links)</p> |
| Außenabstand                             | <p>Legen Sie den Außenabstand des Overlays zu den umliegenden Bannern fest. Die Einheit ist frei wählbar (z. B. px oder %).</p><p></p><p><em>Beispiel (Uhrzeigersinn): 10px 20px 15px 5px</em> (Oben, Rechts, Unten, Links)</p>         |
| Hintergrundfarbe                         | Legt die Hintergrundfarbe für das Overlay fest.                                                                                                                                                                                         |
| Schatten anzeigen                        | Legt fest, ob ein Schatteneffekt um das Overlay angezeigt werden soll oder nicht.                                                                                                                                                       |

#### **Overlay Innenabstand**

Passen Sie den Innenabstand an, um den Inhalt vom Rand des Overlays abzusetzen. Jede Richtung können Sie einzeln definieren. Die Angaben können in Pixel (px) oder Prozent (%) hinterlegt werden.

{% hint style="info" %}
Für den Innenabstand können Sie bis zu 4 Werte angeben. Diese werden im Uhrzeigersinn ausgeführt.

* **1 Wert:** z. B. 10px = oben, rechts, unten und links wird ein Abstand von 10 Pixel eingefügt
* **2 Werte:** z. B. 10px 5px = oben und unten bekommen einen Abstand von 10 Pixel eingefügt, Rechts und links erhalten 5 Pixel Abstand.
* **3 Werte:** z. B. 10px 5px 20px= oben wird einen Abstand von 10 Pixel, rechts und links einen Abstand von 5 Pixel und unten 20 Pixel eingefügt.
* **4 Werte:** z. B. 10px 5px 20px 15px = oben wird einen Abstand von 10 Pixel, rechts einen Abstand von 5 Pixel, unten ein Abstand von 20 Pixel und links ein Abstand von 15 Pixel eingefügt.
  {% endhint %}

<figure><img src="https://857504323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIjmVDBFtwlXBYXSv10K6%2Fuploads%2Falg1SEFm0LivbNwCKQnn%2FPluginSW6_BannerManagement-056.jpg?alt=media&#x26;token=5ff41d0f-b9e1-4660-9732-253f7d045124" alt=""><figcaption><p>Beispiel für den Innenabstand (20px 20px 20px 20px)</p></figcaption></figure>

#### **Overlay Außenabstand**

Bestimmen Sie hier den Abstand zwischen Bild und Overlay. Auch hier können Sie jede Richtung  einzeln definieren. Die Angaben können in Pixel (px) oder Prozent (%) hinterlegt werden.

{% hint style="info" %}
Für den Außenabstand können Sie bis zu 4 Werte angeben. Diese werden im Uhrzeigersinn ausgeführt.

* **1 Wert:** z. B. 10px = oben, rechts, unten und links wird ein Abstand von 10 Pixel eingefügt
* **2 Werte:** z. B. 10px 5px = oben und unten bekommen einen Abstand von 10 Pixel eingefügt, Rechts und links erhalten 5 Pixel Abstand.
* **3 Werte:** z. B. 10px 5px 20px= oben wird einen Abstand von 10 Pixel, rechts und links einen Abstand von 5 Pixel und unten 20 Pixel eingefügt.
* **4 Werte:** z. B. 10px 5px 20px 15px = oben wird einen Abstand von 10 Pixel, rechts einen Abstand von 5 Pixel, unten ein Abstand von 20 Pixel und links ein Abstand von 15 Pixel eingefügt.
  {% endhint %}

<figure><img src="https://857504323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIjmVDBFtwlXBYXSv10K6%2Fuploads%2F4wjObalqYuW5UXpAJynl%2FPluginSW6_BannerManagement-057.jpg?alt=media&#x26;token=dbecca79-aceb-451e-9c6b-a74e6278e7c8" alt=""><figcaption><p>Beispiel für den Außenabstand (40px 40px 40px 40px)</p></figcaption></figure>

## Positionierung <a href="#einstellungen_allgemein" id="einstellungen_allgemein"></a>

Das Banner kann mit den nachfolgenden Einstellungen im Frontend angezeigt werden oder [über die Einkaufswelten](#banner-in-die-erlebniswelten-integrieren).

### **Sichtbarkeit**

{% hint style="warning" %}
Die Anzeige des Banners erfolgt nur, wenn ein Verkaufskanal bei "Sichtbarkeit" ausgewählt ist.
{% endhint %}

| Einstellung: Sichtbarkeit | Bedeutung                                                                |
| ------------------------- | ------------------------------------------------------------------------ |
| Sichtbarkeit              | Für welche/n Verkaufskanal/kanäle soll das Banner angezeigt werden?      |
| Kundengruppe              | Für welche Kundengruppe/n soll das Banner angezeigt werden?              |
| Viewports                 | Auf welchen Geräte soll das Banner angezeigt werden?                     |
| Startzeitpunkt            | Geben Sie Datum und Uhrzeit an, wann das Banner eingeblendet werden soll |
| Endzeitpunkt              | Geben Sie Datum und Uhrzeit an, wann das Banner ausgeblendet werden soll |

#### **Start- und Endzeitpunkt**

Sie können einen Start- und Endzeitpunkt für die Anzeige des Banners festlegen. Dies ermöglicht zeitgesteuerte Einblendungen inklusive Datum und Uhrzeit. Bleibt das Feld Endzeitpunkt leer, wird der Banner dauerhaft angezeigt.

{% hint style="info" %}
Das aktuelle Datum und Uhrzeit wird automatisch, im Speicherungsprozess, beim Startzeitpunkt, gesetzt, wenn Sie keine Einstellung vornehmen.
{% endhint %}

### Kategorien <a href="#einstellungen_kategorien" id="einstellungen_kategorien"></a>

{% hint style="info" %}
Löschen Sie nach der Änderung der Auswahl den Cache unter: *Einstellung > System > Caches & Indizes > BUTTON: Caches leeren*, damit die Änderung angezeigt wird.
{% endhint %}

| Einstellungen                     |                                                                                                   |
| --------------------------------- | ------------------------------------------------------------------------------------------------- |
| Position                          | Wählen Sie aus acht Positionsmöglichkeiten eine aus.                                              |
| Kategorie                         | Wählen Sie die Kategorien aus, bei dem das Banner angezeigt werden soll                           |
| In Unterkategorien weitervererben | Bei Aktivierung wird das Banner auch in allen Unterkategorien der gewählten Kategorien angezeigt. |

#### **Position** <a href="#einstellungen_suche" id="einstellungen_suche"></a>

In den Kategorien haben Sie acht Möglichkeiten ein Banner zu positionieren. Nachfolgend finden Sie Bespiele:

<div><figure><img src="https://857504323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIjmVDBFtwlXBYXSv10K6%2Fuploads%2FC1wozY3oKsFAI34P5eOO%2FPluginSW6_BannerManagement-009.jpg?alt=media&#x26;token=6b28d865-1648-464b-85a7-2c93356514df" alt=""><figcaption><p>Beispiel: Über dem Header</p></figcaption></figure> <figure><img src="https://857504323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIjmVDBFtwlXBYXSv10K6%2Fuploads%2FNGsgNHXybXu4Fdf99OAA%2FPluginSW6_BannerManagement-010.jpg?alt=media&#x26;token=900b951f-ef08-4abf-abc0-c7303acdf0fa" alt=""><figcaption><p>Beispiel: Unter dem Header</p></figcaption></figure></div>

<div><figure><img src="https://857504323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIjmVDBFtwlXBYXSv10K6%2Fuploads%2F6PkyRsQILHsYJ1hXcuCl%2FPluginSW6_BannerManagement-011.jpg?alt=media&#x26;token=036e779e-2f12-43e0-b09c-afa6a0c74f43" alt=""><figcaption><p>Beispiel: Über dem Footer</p></figcaption></figure> <figure><img src="https://857504323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIjmVDBFtwlXBYXSv10K6%2Fuploads%2FQNXQSRJCt399ZmMlyOhp%2FPluginSW6_BannerManagement-012.jpg?alt=media&#x26;token=bf891e80-9d50-4405-9604-8cdf2e4e5ae4" alt=""><figcaption><p>Beispiel: Unter dem Footer</p></figcaption></figure></div>

<div><figure><img src="https://857504323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIjmVDBFtwlXBYXSv10K6%2Fuploads%2FvDn6QfSVPns8OCJBe1mj%2FPluginSW6_BannerManagement-013.jpg?alt=media&#x26;token=9525017d-1659-4e66-8437-56a792056fa0" alt=""><figcaption><p>Beispiel: Über dem Produkt Listing</p></figcaption></figure> <figure><img src="https://857504323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIjmVDBFtwlXBYXSv10K6%2Fuploads%2FWKBNb2rt788E82eNsRto%2FPluginSW6_BannerManagement-014.jpg?alt=media&#x26;token=b8b8d94c-1d1e-4819-8cd3-f90f8e4ece35" alt=""><figcaption><p>Beispiel: Unter dem Produkt Listing</p></figcaption></figure></div>

<div><figure><img src="https://857504323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIjmVDBFtwlXBYXSv10K6%2Fuploads%2FMS9tS8mwBx7ZA4cUweEe%2FPluginSW6_BannerManagement-015.jpg?alt=media&#x26;token=2d348126-b2fc-4ccf-a3bc-a3275dcbda84" alt=""><figcaption><p>Beispiel: Über der Sidebar</p></figcaption></figure> <figure><img src="https://857504323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIjmVDBFtwlXBYXSv10K6%2Fuploads%2FW0CWzYQBwV5XRG16TEOw%2FPluginSW6_BannerManagement-016.jpg?alt=media&#x26;token=4698988a-c110-487c-b0d1-9886962d1203" alt=""><figcaption><p>Beispiel: Unter der Sidebar</p></figcaption></figure></div>

#### **In Unterkategorien weitervererben**

Um eine schneller Zuweisung des Banners zu ermöglichen, kann das Banner mit einem Klick in einer Vielzahl an Kategorien erscheinen, ohne das Sie die Kategorien einzeln auswählen müssen.

Verwenden Sie die Option: *In Unterkategorien weitervererben* und das Banner wird in allen nachfolgenden Kategorien der gewählten Kategorie eingeblendet.&#x20;

BEISPIEL:\
Haben Sie eine Hauptkategorie: Möbel (1. Ebene) und diese unterteilt sich in Wohnzimmer (2. Ebene) und Schlafzimmer (2. Ebene).&#x20;

* **Banner ohne Vererbung:** Das Banner weisen Sie der Kategorie Möbel zu. Die Option: *In Unterkategorien weitervererben* ist deaktiviert. Das Banner wird nur in der Kategorie Möbel angezeigt.
* **Banner mit Vererbung:** Das Banner weisen Sie der Kategorie Möbel zu. Die Option: *In Unterkategorien weitervererben* ist aktiviert. Das Banner wird in den Kategorien: Möbel, Wohnzimmer und Schlafzimmer ausgegeben.

### Suche <a href="#einstellungen_suche" id="einstellungen_suche"></a>

{% hint style="info" %}
Löschen Sie nach der Änderung der Auswahl den Cache unter: *Einstellung > System > Caches & Indizes > BUTTON: Caches leeren*, damit die Änderung angezeigt wird.
{% endhint %}

| Einstellungen |                                                                                                                                     |
| ------------- | ----------------------------------------------------------------------------------------------------------------------------------- |
| Aktiv         | Bei Aktivierung wird das Banner auch bei Suchergebnissen ausgegeben                                                                 |
| Position      | Wählen Sie aus sechs Positionsmöglichkeiten eine aus.                                                                               |
| Typ           | Bestimmen Sie, ob das Banner bei jedem Suchergebnis (global) oder nur bei bestimmten Suchbegriffen (manuell) angezeigt werden soll. |

#### **Position** <a href="#einstellungen_produktdetailseite" id="einstellungen_produktdetailseite"></a>

Bei den Suchergebnissen haben Sie sechs Möglichkeiten ein Banner zu positionieren. Nachfolgend finden Sie Bespiele:

<div><figure><img src="https://857504323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIjmVDBFtwlXBYXSv10K6%2Fuploads%2FC1wozY3oKsFAI34P5eOO%2FPluginSW6_BannerManagement-009.jpg?alt=media&#x26;token=6b28d865-1648-464b-85a7-2c93356514df" alt=""><figcaption><p>Beispiel: Über dem Header</p></figcaption></figure> <figure><img src="https://857504323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIjmVDBFtwlXBYXSv10K6%2Fuploads%2FNGsgNHXybXu4Fdf99OAA%2FPluginSW6_BannerManagement-010.jpg?alt=media&#x26;token=900b951f-ef08-4abf-abc0-c7303acdf0fa" alt=""><figcaption><p>Beispiel: Unter dem Header</p></figcaption></figure></div>

<div><figure><img src="https://857504323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIjmVDBFtwlXBYXSv10K6%2Fuploads%2F6PkyRsQILHsYJ1hXcuCl%2FPluginSW6_BannerManagement-011.jpg?alt=media&#x26;token=036e779e-2f12-43e0-b09c-afa6a0c74f43" alt=""><figcaption><p>Beispiel: Über dem Footer</p></figcaption></figure> <figure><img src="https://857504323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIjmVDBFtwlXBYXSv10K6%2Fuploads%2FQNXQSRJCt399ZmMlyOhp%2FPluginSW6_BannerManagement-012.jpg?alt=media&#x26;token=bf891e80-9d50-4405-9604-8cdf2e4e5ae4" alt=""><figcaption><p>Beispiel: Unter dem Footer</p></figcaption></figure></div>

<div><figure><img src="https://857504323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIjmVDBFtwlXBYXSv10K6%2Fuploads%2FvDn6QfSVPns8OCJBe1mj%2FPluginSW6_BannerManagement-013.jpg?alt=media&#x26;token=9525017d-1659-4e66-8437-56a792056fa0" alt=""><figcaption><p>Beispiel: Über dem Produkt Listing</p></figcaption></figure> <figure><img src="https://857504323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIjmVDBFtwlXBYXSv10K6%2Fuploads%2FWKBNb2rt788E82eNsRto%2FPluginSW6_BannerManagement-014.jpg?alt=media&#x26;token=b8b8d94c-1d1e-4819-8cd3-f90f8e4ece35" alt=""><figcaption><p>Beispiel: Unter dem Produkt Listing</p></figcaption></figure></div>

#### **Typ**

Sie haben die Möglichkeit zu bestimmen, bei welchem Suchbegriff das Banner ausgegeben werden soll. Wählen Sie hierfür in der Einstellung: Typ = manuell. Mit der Einblendung des Zusatzfelds: *Suchbegriff hinzufügen* können Sie einzelne Begriffe nachtragen.&#x20;

<figure><img src="https://857504323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIjmVDBFtwlXBYXSv10K6%2Fuploads%2FwHjqv58NasdZT0Aq84M3%2FPluginSW6_BannerManagement-017.jpg?alt=media&#x26;token=199b5253-19b3-46bf-a76b-dfc939f94009" alt=""><figcaption><p>Einstellmöglichkeiten beim Typ = manuell</p></figcaption></figure>

{% hint style="info" %}
Wenn Sie bei jedem Suchbegriff das Banner einblenden möchten, wählen Sie bei Typ = global
{% endhint %}

In der Tabelle unter den Einstellungen finden Sie bereits hinzugefügte Begriffe. Möchten Sie diese wieder entfernen, gehen Sie in die rechte Spalte der Tabelle, klicken in der Zeile das Menü (drei Punkte) an und wählen die Option Löschen.

<figure><img src="https://857504323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIjmVDBFtwlXBYXSv10K6%2Fuploads%2FIqqwwSHtEtYR5CYtL00I%2FPluginSW6_BannerManagement-018.jpg?alt=media&#x26;token=cd4ffd5d-06b5-4f9c-838b-0a98fd5201a3" alt=""><figcaption><p>Möglichkeit der Löschung eines Begriffes</p></figcaption></figure>

### Produkte <a href="#einstellungen_produktdetailseite" id="einstellungen_produktdetailseite"></a>

{% hint style="info" %}
Löschen Sie nach der Änderung der Auswahl den Cache unter: *Einstellung > System > Caches & Indizes > BUTTON: Caches leeren*, damit die Änderung angezeigt wird.
{% endhint %}

| Einstellungen |                                                                            |
| ------------- | -------------------------------------------------------------------------- |
| Position      | Wählen Sie aus sieben Positionsmöglichkeiten eine aus.                     |
| Listentyp     | Wählen Sie zwischen "Ausgewählte Produkt" oder "Dynamische Produktgruppen" |

#### **Position** <a href="#einstellungen_produktdetailseite" id="einstellungen_produktdetailseite"></a>

Auf den Detailseiten haben Sie sieben Möglichkeiten ein Banner zu positionieren. Nachfolgend finden Sie Bespiele:

<div><figure><img src="https://857504323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIjmVDBFtwlXBYXSv10K6%2Fuploads%2FC1wozY3oKsFAI34P5eOO%2FPluginSW6_BannerManagement-009.jpg?alt=media&#x26;token=6b28d865-1648-464b-85a7-2c93356514df" alt=""><figcaption><p>Beispiel: Über dem Header</p></figcaption></figure> <figure><img src="https://857504323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIjmVDBFtwlXBYXSv10K6%2Fuploads%2FNGsgNHXybXu4Fdf99OAA%2FPluginSW6_BannerManagement-010.jpg?alt=media&#x26;token=900b951f-ef08-4abf-abc0-c7303acdf0fa" alt=""><figcaption><p>Beispiel: Unter dem Header</p></figcaption></figure></div>

<div><figure><img src="https://857504323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIjmVDBFtwlXBYXSv10K6%2Fuploads%2F6PkyRsQILHsYJ1hXcuCl%2FPluginSW6_BannerManagement-011.jpg?alt=media&#x26;token=036e779e-2f12-43e0-b09c-afa6a0c74f43" alt=""><figcaption><p>Beispiel: Über dem Footer</p></figcaption></figure> <figure><img src="https://857504323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIjmVDBFtwlXBYXSv10K6%2Fuploads%2FQNXQSRJCt399ZmMlyOhp%2FPluginSW6_BannerManagement-012.jpg?alt=media&#x26;token=bf891e80-9d50-4405-9604-8cdf2e4e5ae4" alt=""><figcaption><p>Beispiel: Unter dem Footer</p></figcaption></figure></div>

<div><figure><img src="https://857504323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIjmVDBFtwlXBYXSv10K6%2Fuploads%2FHSWatvS86EpXWNwfpKko%2FPluginSW6_BannerManagement-019.jpg?alt=media&#x26;token=0ee9ed52-7bb4-4dae-a9ca-a8428f09134c" alt=""><figcaption><p>Beispiel: Über dem Produktbild</p></figcaption></figure> <figure><img src="https://857504323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIjmVDBFtwlXBYXSv10K6%2Fuploads%2FTKjocMuBYOrICDiN6QMT%2FPluginSW6_BannerManagement-020.jpg?alt=media&#x26;token=41a3f0be-77c6-4c76-83e5-ef22cb0f4ea7" alt=""><figcaption><p>Beispiel: Unter dem Produktbild</p></figcaption></figure></div>

<figure><img src="https://857504323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIjmVDBFtwlXBYXSv10K6%2Fuploads%2F617ZsblAzXoHKlOi3vK2%2FPluginSW6_BannerManagement-021.jpg?alt=media&#x26;token=23c7e230-ee2c-4149-8b1c-e2d5d983a57a" alt="" width="375"><figcaption><p>Beispiel: Unter der Produktbeschreibung</p></figcaption></figure>

#### **Listentyp**

Wählen Sie als Listentyp: **Ausgewählte Produkt** aus, erscheint die **Produkt-Zuweisung** am Ende der Einstellungen: Produkt. Hier können Sie die entsprechenden Produkte mittels Produktname oder Produktnummer heraussuchen und hinzufügen.

<figure><img src="https://857504323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIjmVDBFtwlXBYXSv10K6%2Fuploads%2F08nvDY5ToAcdwo5MGIid%2FPluginSW6_BannerManagement-022.jpg?alt=media&#x26;token=61ef2815-e90b-40b9-b44b-30b69e077f3a" alt=""><figcaption><p>Beispiel für die Produkt-Zuweisung</p></figcaption></figure>

Alle bereits zugewiesenen Produkte werden in einer Tabelle darunter aufgelistet. Hier können Sie die Zuweisung wieder aufhaben. Nutzen Sie hierfür das Menü am Ende der Spalte (drei Punkte) und wählen: *Zuweisung aufheben*.

Haben Sie als Listentyp: **Dynamische Produktgruppe** gewählt, erscheint am Ende der Einstellungen die Auswahl Produktgruppe. Wie sie eine Dynamische Produktgruppe anlegen erfahren Sie

{% embed url="<https://docs.shopware.com/de/shopware-6-de/Kataloge/DynamischeProduktgruppen>" %}
Shopware Handbuch zur Einrichtung von Dynamische Produktgruppen
{% endembed %}

### Checkout <a href="#einstellungen_checkout" id="einstellungen_checkout"></a>

{% hint style="info" %}
Löschen Sie nach der Änderung der Auswahl den Cache unter: *Einstellung > System > Caches & Indizes > BUTTON: Caches leeren*, damit die Änderung angezeigt wird.
{% endhint %}

| Warenkorb |                                                                                                                             |
| --------- | --------------------------------------------------------------------------------------------------------------------------- |
| Aktiv     | Bei Aktivierung wird das Banner im Warenkorb angezeigt                                                                      |
| Position  | Wählen Sie aus vier Möglichkeiten der Positionierung (Über dem Header, Unter dem Header, Über dem Footer, Unter dem Footer) |

| Registrierung |                                                                                                                             |
| ------------- | --------------------------------------------------------------------------------------------------------------------------- |
| Aktiv         | Bei Aktivierung wird das Banner auf der Registrierungsseite angezeigt                                                       |
| Position      | Wählen Sie aus vier Möglichkeiten der Positionierung (Über dem Header, Unter dem Header, Über dem Footer, Unter dem Footer) |

| Abschlussseite |                                                                                                                             |
| -------------- | --------------------------------------------------------------------------------------------------------------------------- |
| Aktiv          | Bei Aktivierung wird das Banner auf der Abschlussseite angezeigt                                                            |
| Position       | Wählen Sie aus vier Möglichkeiten der Positionierung (Über dem Header, Unter dem Header, Über dem Footer, Unter dem Footer) |

| Finishseite |                                                                                                                             |
| ----------- | --------------------------------------------------------------------------------------------------------------------------- |
| Aktiv       | Bei Aktivierung wird das Banner auf der Finishseite angezeigt                                                               |
| Position    | Wählen Sie aus vier Möglichkeiten der Positionierung (Über dem Header, Unter dem Header, Über dem Footer, Unter dem Footer) |

#### Position

Auf den Checkout-Seiten haben Sie vier Möglichkeiten ein Banner zu positionieren. Nachfolgend finden Sie Bespiele:

<div><figure><img src="https://857504323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIjmVDBFtwlXBYXSv10K6%2Fuploads%2FS4FMHoVn5RVQTbw5qBBH%2FPluginSW6_BannerManagement-023.jpg?alt=media&#x26;token=c9214a3e-fc6a-439b-a7e0-895e406dbb4b" alt=""><figcaption><p>Beispiel: Über dem Header</p></figcaption></figure> <figure><img src="https://857504323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIjmVDBFtwlXBYXSv10K6%2Fuploads%2FINBjVvmtMmyFIDjTCBfI%2FPluginSW6_BannerManagement-024.jpg?alt=media&#x26;token=95287ec0-4192-42bd-a0b1-235b1af6028c" alt=""><figcaption><p>Beispiel: unter dem Header</p></figcaption></figure></div>

<div><figure><img src="https://857504323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIjmVDBFtwlXBYXSv10K6%2Fuploads%2FY0LC3CVMacDtSr1ZuCO8%2FPluginSW6_BannerManagement-026.jpg?alt=media&#x26;token=e26deef5-6d2c-4b5d-818c-133486d59b15" alt=""><figcaption><p>Beispiel: Über dem Footer</p></figcaption></figure> <figure><img src="https://857504323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIjmVDBFtwlXBYXSv10K6%2Fuploads%2FeVlBU4YQyemoIFe97KT4%2FPluginSW6_BannerManagement-025.jpg?alt=media&#x26;token=1ea7a692-fc36-4757-a3bf-f05b1fd3b84d" alt=""><figcaption><p>Beispiel: Unter dem Footer</p></figcaption></figure></div>

## Banner in die Erlebniswelten integrieren

Sie können das Banner entweder über die [Positionierung in den Banner-Einstellungen](#einstellungen_allgemein-4) platzieren oder Sie integrieren das Banner als Element direkt in die Erlebniswelten.

Nutzen Sie in den Erlebniswelten die Blockkategorie: Coolbax SEO Banner Professionell. Dort finden Sie das Erlebniswelten Element von der Bannerverwaltung.

<figure><img src="https://857504323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIjmVDBFtwlXBYXSv10K6%2Fuploads%2FZ6ws12vybDa4LYZlRH0N%2FPluginSW6_BannerManagement-060.jpg?alt=media&#x26;token=f7d86add-3d63-459f-a328-b5f2cc33fd4b" alt=""><figcaption></figcaption></figure>

Wählen Sie in den Einstellungen des Elements das gewünschte Banner aus der Bannerverwaltung aus.

<figure><img src="https://857504323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIjmVDBFtwlXBYXSv10K6%2Fuploads%2FQmgSiwHdD2jzeUCk0I3L%2FPluginSW6_BannerManagement-061.jpg?alt=media&#x26;token=fca0e445-070d-46a1-acb2-eee4b3f70ca2" alt=""><figcaption><p>Einstellung des Erlebniswelten Elements</p></figcaption></figure>

## Fragen und Antworten

<details>

<summary>Warum wird mein Banner nicht im Frontend angezeigt?</summary>

Überprüfen Sie folgende Einstellungen:

* Endzeitpunkt gesetzt? Ist die Zeit eventuell noch nicht angebrochen bzw. überschritten?
* Wurde der richtige Verkaufskanal zugewiesen?
* Sind Sie im Frontend der richtigen Kundengruppe zugewiesen?
* Ist das Banner für die entsprechenden Seiten aktiv geschalten?
* Wenn das Banner in einer anderen Sprache nicht angezeigt wird > Sind die [Banner Spezifikationen](#einstellungen_banner) auch bei der Sprache hinterlegt?

</details>


---

# 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/seo-banner-professionell.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.
