Dieser Artikel ist auch verfügbar in:

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

Übersicht

Viele Layout- und Style-Optionen unterstützen einen mobilen Override, damit Smartphones nicht die Desktop-Variante nutzen müssen.

Auf dem Desktop nutzen Sie vielleicht einen Hinweis Wide oder Box. Auf dem Smartphone kann dieselbe Breite die Produktseite verdecken. Das New Banner lässt Sie Desktop unverändert lassen und auf Mobil eine Bar, eine kleinere Größe oder eine andere Position wählen.

Optionen mit Unterstützung zeigen ein kleines Symbolpaar für Desktop und Mobil. Das Desktop-Symbol bearbeitet den gemeinsamen Wert, das Mobil-Symbol einen Wert nur für Mobilgeräte (Mobile same as desktop bzw. Mobile different from desktop).

New Banner. Für Shops mit dem neuen Banner (Cookie banner zeigt die Tabs Layout, Content, Style und Advanced). Zum Legacy Banner siehe So wechseln Sie zum neuen Banner oder zurück zur vorherigen Version.

Bevor Sie beginnen

Prüfen Sie, ob Sie Cookie banner mit den neuen Banner-Tabs (Layout, Content, Style, Advanced) nutzen.
Nutzen Sie während der Bearbeitung den Schalter der Vorschau Desktop / Mobile. Siehe Den Live-Banner-Vorschau-Modus verwenden.

Mobil separat einstellen

Öffnen Sie Shopify-Admin > Apps > Pandectes GDPR Compliance.
Gehen Sie zu Cookie banner.
Öffnen Sie Layout (und Style, wenn Sie auf Mobil auch andere Farben, Innenabstände oder Logos wünschen).
Suchen Sie eine Option mit dem Symbolpaar Desktop und Mobil (zum Beispiel Reverse order unter Buttons).
Klicken Sie auf das Mobil-Symbol, sodass es Mobile different from desktop wird.
Stellen Sie den Mobilwert ein (Erscheinungsbild, Position, Größe, Schaltflächenlayout usw.).
Wiederholen Sie dies für jede Option, die Sie überschreiben möchten.
Speichern.

Übliche Layout-Überschreibungen:

Cookie-Hinweis Appearance (Box, Bar, Wide)
Position
Width (XS bis XL)
Schaltflächenlayout
Darstellung der Einstellungen (Box, Drawer, Sidepanel)

Übliche Style-Überschreibungen:

Abstände, Radius und Float
Schriftgröße
Schaltflächengröße

Empfohlene mobile Einrichtung

Wählen Sie auf Mobilgeräten vorzugsweise ein Bar unten, 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 nicht Add to cart oder eine Chat-Blase verdeckt.

Überprüfen

Prüfen Sie Mobile in der App.
Öffnen Sie den Storefront auf einem Smartphone oder im Geräte-Modus von Chrome.
Prüfen Sie den ersten Besuch (Banner) und den wiederkehrenden Besuch (Widget).