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

Overzicht

Veel Layout- en Style-instellingen ondersteunen een mobiele override, zodat telefoons niet het desktopvenster hoeven te gebruiken.

Op desktop gebruik je misschien een Wide of Box-melding. Op een telefoon kan dezelfde breedte de productpagina bedekken. Met de New Banner houd je desktop zoals het is en kies je op mobiel een Bar, kleinere grootte of andere positie.

Regelaars die dit ondersteunen, tonen een klein paar pictogrammen voor desktop en mobiel. Het desktop-pictogram bewerkt de gedeelde waarde en het mobiele pictogram bewerkt een waarde die alleen op mobiel geldt (Mobile same as desktop tegenover Mobile different from desktop).

Voordat je begint

• Controleer of je op Cookie banner zit met de tabbladen van de nieuwe banner (Layout, Content, Style, Advanced).
• Gebruik de schakelaar Desktop / Mobile van de previewer terwijl je bewerkt. Zie De Live Banner Preview-modus gebruiken.

Mobiel apart 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 regelaar met het paar pictogrammen voor desktop en mobiel (bijvoorbeeld Reverse order onder Buttons).
5. Klik op het mobiele pictogram zodat het Mobile different from desktop wordt.
6. Stel de mobiele waarde in (weergave, positie, grootte, knoplay-out, enzovoort).
7. Herhaal dit voor elke regelaar die je wilt overschrijven.
8. Opslaan.

Veelvoorkomende Layout-overschrijvingen:

• Cookie notice Appearance (Box, Bar, Wide)
• Position
• Width (XS tot XL)
• Knoplay-out
• Weergave van Preferences (box, drawer, sidepanel)

Veelvoorkomende Style-overschrijvingen:

• Afstand, radius en zweven
• Lettergrootte
• Knopgrootte

Voorgestelde mobiele opzet

• Kies bij voorkeur een Bar onderaan op mobiel, zodat productafbeeldingen zichtbaar blijven.
• Houd Accept en Decline op één rij waar dat kan.
• Controleer de positie van de consent widget, zodat hij geen Add to cart of chatbubbel bedekt.

Controleren

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

Gerelateerde artikelen

• De lay-out van de banner aanpassen (New Version)
• Hoe je de stijl, kleuren, logo's en knoppen van de banner aanpast (New Version)

Bijgewerkt op: 27/10/2026