> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.pandectes.io/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# So nutzen Sie unterschiedliche Banner-Layouts auf Mobil und Desktop (Neue Version)

### Überblick

Viele Einstellungen unter Layout und Style unterstützen eine **mobile Abweichung**, damit Smartphones nicht den Desktop-Dialog verwenden müssen.

Auf dem Desktop nutzen Sie vielleicht einen Hinweis im Format **Wide** oder **Box**. Auf dem Smartphone kann dieselbe Breite die Produktseite verdecken. Beim neuen Banner behalten Sie den Desktop unverändert und wählen für Mobilgeräte eine **Bar**, eine kleinere Größe oder eine andere Position.

Die Abweichungen werden als **Mobile same as desktop** beziehungsweise **Mobile different from desktop** gespeichert.

||| **Neuer Banner.** Gilt für Shops mit dem Hinweis **New version** unter **Cookie banner**. Beim Legacy-Banner siehe [So wechseln Sie zum neuen Banner oder zurück zur vorherigen Version](/en/article/how-to-switch-to-the-new-banner-or-switch-back-to-the-previous-version-x1xdn9/).

### Bevor Sie beginnen

* Prüfen Sie, ob unter **Cookie banner** der Hinweis **New version** steht.
* Nutzen Sie beim Bearbeiten den Umschalter **Desktop / Mobile** in der Vorschau. Siehe [Den Live-Vorschaumodus des Banners nutzen](/en/article/using-the-live-banner-preview-mode-ye1lnv/).

### Mobilgeräte unabhängig einstellen

1. Öffnen Sie **Shopify Admin > Apps > Pandectes GDPR Compliance**.
2. Gehen Sie zu **Cookie banner**.
3. Öffnen Sie **Layout** (und **Style**, wenn Sie auf Mobilgeräten auch andere Farben, Abstände oder Logos möchten).
4. Suchen Sie eine Einstellung, die **Mobile same as desktop** anzeigt.
5. Stellen Sie sie auf **Mobile different from desktop** um.
6. Legen Sie den mobilen Wert fest (Erscheinungsbild, Position, Größe, Anordnung der Schaltflächen und so weiter).
7. Wiederholen Sie das für jede Einstellung, die abweichen soll.
8. Speichern Sie.

![Erscheinungsbild, Position und Breite des Cookie-Hinweises sowie die Symbole für mobile Abweichungen](https://images.pandect.es/knowledge-base/how-to-use-different-banner-layouts-on-mobile-and-desktop-new-version-2.png =900xauto)

Häufige Abweichungen im Layout:

* **Appearance** des Cookie-Hinweises (Box, Bar, Wide)
* **Position**
* **Width** (XS bis XL)
* Anordnung der Schaltflächen
* Erscheinungsbild der Präferenzen (Box, Drawer, Sidepanel)

Häufige Abweichungen im Style:

* Abstände, Rundungen und Floating
* Schriftgröße
* Größe der Schaltflächen

### Empfohlene mobile Konfiguration

* Nutzen Sie auf Mobilgeräten bevorzugt eine **Bar** am **unteren Rand**, damit Produktbilder sichtbar bleiben.
* Halten Sie **Accept** und **Decline** nach Möglichkeit in einer Zeile.
* Prüfen Sie die Position des **Consent Widgets**, damit es weder **In den Warenkorb** noch eine Chat-Blase verdeckt.

### Prüfen

1. Sehen Sie sich die Ansicht **Mobile** in der App an.
2. Öffnen Sie Ihren Shop auf einem Smartphone oder im Gerätemodus von Chrome.
3. Prüfen Sie sowohl den ersten Besuch (Banner) als auch einen wiederkehrenden Besuch (Widget).

### Verwandte Artikel

* [Das Layout des Banners anpassen (Neue Version)](/en/article/customizing-the-layout-of-the-banner-new-version-wt79uc/)
* [So passen Sie Stil, Farben, Logos und Schaltflächen des Banners an (Neue Version)](/en/article/how-to-customize-banner-style-colors-logos-and-buttons-new-version-b1mh64/)