Verschillende bannerlay-outs gebruiken op mobiel en desktop (nieuwe versie)

Overzicht

Veel besturingselementen voor Layout en Style ondersteunen een mobiele afwijking, zodat telefoons niet gedwongen worden de desktopdialoog te gebruiken.

Op desktop gebruik je misschien een melding in Wide of Box. Op een telefoon kan diezelfde breedte de productpagina bedekken. Met de nieuwe banner kun je desktop laten zoals het is en op mobiel een Bar, kleiner formaat of een andere positie kiezen.

Afwijkingen worden opgeslagen als Mobile same as desktop versus Mobile different from desktop.

Voordat je begint

• Controleer of je op Cookie banner zit met het label New version.
• Gebruik de schakelaar Desktop / Mobile van de voorvertoning terwijl je bewerkt. Zie Using the Live Banner Preview mode.

Mobiel onafhankelijk instellen

1. Open Shopify Admin > Apps > Pandectes GDPR Compliance.
2. Ga naar Cookie banner.
3. Open Layout (en Style als je ook andere kleuren, padding of logo's op mobiel wilt).
4. Zoek een besturingselement dat Mobile same as desktop toont.
5. Zet het om naar Mobile different from desktop.
6. Stel de mobiele waarde in (uiterlijk, positie, grootte, knoplay-out enzovoort).
7. Herhaal dit voor elk besturingselement dat je wilt afwijken.
8. Klik op Save.

Veelvoorkomende Layout-afwijkingen:

• Appearance van de cookiemelding (Box, Bar, Wide)
• Position
• Width (XS tot XL)
• Knoplay-out
• Uiterlijk van voorkeuren (box, drawer, sidepanel)

Veelvoorkomende Style-afwijkingen:

• Spacing, radius en float
• Lettergrootte
• Knopgrootte

Voorgestelde mobiele opstelling

• Kies op mobiel bij voorkeur een Bar onderaan, zodat productafbeeldingen zichtbaar blijven.
• Houd Accept en Decline waar mogelijk op één rij.
• Controleer de positie van de consent widget, zodat die Add to cart of een chatbel niet bedekt.

Controleren

1. Bekijk Mobile in de voorvertoning in de app.
2. Open de webshop op een telefoon of in de apparaatmodus van Chrome.
3. Controleer zowel het eerste bezoek (banner) als een terugkerend bezoek (widget).

Gerelateerde artikelen

• Customizing the layout of the banner (New Version)
• How to customize banner style, colors, logos, and buttons (New Version)

Bijgewerkt op: 19/10/2026