Articles on: Settings
This article is also available in:

How to use different banner layouts on mobile and desktop (New Version)

Overview


Many Layout and Style controls support a mobile override so phones are not forced to use the desktop dialog.


On desktop you might use a Wide or Box notice. On a phone that same width can cover the product page. The New Banner lets you keep desktop as-is and choose a Bar, smaller size, or different position on mobile.


Controls that support it show a small desktop and mobile icon pair. The desktop icon edits the shared value and the mobile icon edits a mobile-only value (Mobile same as desktop vs Mobile different from desktop).


New Banner. For stores on the new banner (Cookie banner shows the Layout, Content, Style, and Advanced tabs). On the Legacy Banner, see How to switch to the new banner or switch back to the previous version.


Before you start


  • Confirm you are on Cookie banner with the new banner tabs (Layout, Content, Style, Advanced).
  • Use the previewer Desktop / Mobile toggle while you edit. See Using the Live Banner Preview mode.


Set mobile independently


  1. Open Shopify Admin > Apps > Pandectes GDPR Compliance.
  2. Go to Cookie banner.
  3. Open Layout (and Style if you also want different colors, padding, or logos on mobile).
  4. Find a control with the desktop and mobile icon pair (for example Reverse order under Buttons).
  5. Click the mobile icon so it becomes Mobile different from desktop.
  6. Set the mobile value (appearance, position, size, button layout, and so on).
  7. Repeat for each control you want to override.
  8. Save.


Desktop and mobile override icons next to the Reverse order option


Common Layout overrides:


  • Cookie notice Appearance (Box, Bar, Wide)
  • Position
  • Width (XS to XL)
  • Button layout
  • Preferences appearance (box, drawer, sidepanel)


Common Style overrides:


  • Spacing, radius, and float
  • Font size
  • Button size


Suggested mobile setup


  • Prefer a Bar at the bottom on mobile so product images stay visible.
  • Keep Accept and Decline on one row when you can.
  • Check the consent widget position so it does not cover Add to cart or a chat bubble.


Verify


  1. Preview Mobile in the app.
  2. Open the storefront on a phone or Chrome device mode.
  3. Confirm both first visit (banner) and returning visit (widget).



Updated on: 27/10/2026

Was this article helpful?

Share your feedback

Cancel

Thank you!