For the complete documentation index, see llms.txt. This page is also available as Markdown.

SEO Banner Professionell

Hier erfahren Sie alles über die Installation und Einstellungen des Plugin. Erfahren Sie, wie Sie professionelle Banner ohne Grafikprogramme erstellen und diese mit wenigen Klicks im Shop verteilen.

Installation & Demo

Sie können das Plugin hier über den Shopware Community Store erwerben. 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:

Shopware Handbuch zur Installation von Apps & Plugins

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:

Plugin live im Demoshop anschauen

Plugin Einstellungen

Allgemein Einstellungen

Aktiv

Das Plugin für den jeweiligen Shop aktivieren oder deaktivieren

Wie soll verfahren werden, wenn mehrere Banner die selbe Position haben?

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 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 ausgewählt, können Sie hier die Sortierung der Banner bestimmen:

  • Nach Erstelldatum (älteste zu erst)

  • Nach Erstelldatum (neueste zu erst)

  • Zufällige Sortierung

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.

Übersicht der Bannerverwaltung

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

Übersicht der Bannerverwaltung

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

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.

Möglichkeit zur Erweiterung der Tabelle

Ein neues Banner anlegen

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

Button "Hinzufügen" über der Übersichtstabelle

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

Layout

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

Wählen Sie ein Layout für Ihr Banner aus

Auswahl des Layouts

Layoutvarianten im Frontend

Beispiel für das Layout 1 im Frontend
Beispiel für das Layout 2 im Frontend
Beispiel für das Layout 3 im Frontend
Beispiel für das Layout 4 im Frontend
Beispiel für das Layout 5 im Frontend
Beispiel für das Layout 6 im Frontend
Beispiel für das Layout 7 im Frontend
Beispiel für das Layout 8 im Frontend
Beispiel für das Layout 9 im Frontend
Beispiel für das Layout 10 im Frontend

Inhalt

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

Bild

Einstellung: Banner
Bedeutung

Bild

Wählen Sie ein Bild aus Ihrer Media-Datenbank aus oder laden Sie ein neues Bild hoch.

Anzeigemodus

Entscheiden Sie, wie das Bild dargestellt werden soll

Original: passt sich das Bild bis zu seiner Größe an den Bereich an,

Zugeschnitten: wird das Bild auf die Größe des Bereiches gestreckt,

Skaliert: wird der Bereich mit dem Bild komplett gefüllt.

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

1) Headline, 2) Subheadline, 3) Text, 4) Button

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

Hier finden Sie alle Designanpassungen für das Bild, die Headline und Subheadline, den Text, den Button und das Overlay.

Allgemein

Diese Einstellungen werden nicht übernommen, wenn das Banner über das Erlebniswelten-Element integriert wird. Sie finden diese Einstellungen direkt in den Erlebniswelten.

Einstellung: Allgemein
Bedeutung

Hier entscheiden Sie ob der Inhalt auf die volle Breite gezogen oder zentriert bleiben soll.

Hier wählen Sie die Hintergrundfarbe der Sektion.

CSS-Klasse (optional)

Sie können eine oder mehrere, mit Leerzeichen getrennte, CSS Klassen hinzufügen.

Definieren Sie einen Abstand zwischen Block und Bild.

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.

Beispiel für: Zentrierter Inhalt mit Hintergrundfarbe

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.

Beispiel für: Volle Breite

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.

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.

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

Beispiel für Bild - Innenabstand (40px 40px 40px 40px) und Hintergrundfarbe (grau)

Text

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

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

Primärer
Primärer (Outline)
Sekundärer
Sekundärer (Outline)
Erfolg
Erfolg (Outline)
Fehler
Fehler (Outline)
Hinweis
Hinweis (Outline)
Information
Information (Outline)
Light
Light (Outline)
Dark
Dark (Outline)

Button Größe

Klein
Groß

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

Legen Sie den Abstand der Elemente innerhalb des Overlays (z. B. Text und Buttons) fest. Sie können Einheiten wie px oder % verwenden. Beispiel (Uhrzeigersinn): 10px 20px 15px 5px (Oben, Rechts, Unten, Links)

Außenabstand

Legen Sie den Außenabstand des Overlays zu den umliegenden Bannern fest. Die Einheit ist frei wählbar (z. B. px oder %).

Beispiel (Uhrzeigersinn): 10px 20px 15px 5px (Oben, Rechts, Unten, Links)

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.

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.

Beispiel für den Innenabstand (20px 20px 20px 20px)

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.

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.

Beispiel für den Außenabstand (40px 40px 40px 40px)

Positionierung

Das Banner kann mit den nachfolgenden Einstellungen im Frontend angezeigt werden oder über die Einkaufswelten.

Sichtbarkeit

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.

Das aktuelle Datum und Uhrzeit wird automatisch, im Speicherungsprozess, beim Startzeitpunkt, gesetzt, wenn Sie keine Einstellung vornehmen.

Kategorien

Löschen Sie nach der Änderung der Auswahl den Cache unter: Einstellung > System > Caches & Indizes > BUTTON: Caches leeren, damit die Änderung angezeigt wird.

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

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

Beispiel: Über dem Header
Beispiel: Unter dem Header
Beispiel: Über dem Footer
Beispiel: Unter dem Footer
Beispiel: Über dem Produkt Listing
Beispiel: Unter dem Produkt Listing
Beispiel: Über der Sidebar
Beispiel: Unter der Sidebar

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.

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

  • 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

Löschen Sie nach der Änderung der Auswahl den Cache unter: Einstellung > System > Caches & Indizes > BUTTON: Caches leeren, damit die Änderung angezeigt wird.

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

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

Beispiel: Über dem Header
Beispiel: Unter dem Header
Beispiel: Über dem Footer
Beispiel: Unter dem Footer
Beispiel: Über dem Produkt Listing
Beispiel: Unter dem Produkt Listing

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.

Einstellmöglichkeiten beim Typ = manuell

Wenn Sie bei jedem Suchbegriff das Banner einblenden möchten, wählen Sie bei Typ = global

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.

Möglichkeit der Löschung eines Begriffes

Produkte

Löschen Sie nach der Änderung der Auswahl den Cache unter: Einstellung > System > Caches & Indizes > BUTTON: Caches leeren, damit die Änderung angezeigt wird.

Einstellungen

Position

Wählen Sie aus sieben Positionsmöglichkeiten eine aus.

Listentyp

Wählen Sie zwischen "Ausgewählte Produkt" oder "Dynamische Produktgruppen"

Position

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

Beispiel: Über dem Header
Beispiel: Unter dem Header
Beispiel: Über dem Footer
Beispiel: Unter dem Footer
Beispiel: Über dem Produktbild
Beispiel: Unter dem Produktbild
Beispiel: Unter der Produktbeschreibung

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.

Beispiel für die Produkt-Zuweisung

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

Shopware Handbuch zur Einrichtung von Dynamische Produktgruppen

Checkout

Löschen Sie nach der Änderung der Auswahl den Cache unter: Einstellung > System > Caches & Indizes > BUTTON: Caches leeren, damit die Änderung angezeigt wird.

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:

Beispiel: Über dem Header
Beispiel: unter dem Header
Beispiel: Über dem Footer
Beispiel: Unter dem Footer

Sie können das Banner entweder über die Positionierung in den Banner-Einstellungen 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.

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

Einstellung des Erlebniswelten Elements

Fragen und Antworten

Warum wird mein Banner nicht im Frontend angezeigt?

Ü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 auch bei der Sprache hinterlegt?

Last updated