Articles on: Settings

Customizing the layout of the banner (New Version)

Overview


The Layout settings allow you to control how the cookie banner appears and behaves on your store.


You can customize the banner dialog appearance, positioning, button layout, and animation effects directly inside the application.


To access these options, navigate to:


Settings > Banner > Layout



The layout configuration works together with the Consent dialogs setting, which determines whether visitors see a cookie notice, preferences dialog, or both in sequence.



The first step in configuring the banner layout is selecting which consent dialogs will be shown to visitors.


Available options include:


  1. Cookie Notice – Displays a banner where visitors can quickly accept or decline cookies.
  2. Cookie Notice & Preferences – Shows a cookie notice first and allows visitors to open the preferences dialog to manage cookie categories.
  3. Preferences Only – Displays the full preferences dialog immediately, allowing visitors to configure cookie categories directly.




Cookie Notice Layout Options


When the Cookie Notice dialog is enabled, several layout options become available.


These options define how the initial banner is displayed.



Dialog Appearance


Controls the visual format of the cookie notice.


Available layouts:


  • Box – A compact dialog that appears as a floating window.
  • Bar – A horizontal banner displayed across the page.
  • Wide – A larger dialog that provides more space for content.



Position


Defines where the banner appears on the screen.


Available positions depend on the selected dialog appearance.


Examples include:


  • Center
  • Top left
  • Top center
  • Top right
  • Bottom left
  • Bottom center
  • Bottom right
  • Middle left


For Bar layout, the banner can appear at:


  • Top
  • Bottom



Window Size


Controls the overall size of the banner dialog.


Available sizes:


  • XS
  • SM
  • MD
  • LG
  • XL


Larger sizes allow more space for longer messages, logos, and additional buttons.



Animation (Show / Hide)


Controls the animation used when the banner appears or disappears.


Available animation styles:


  • Fade
  • Slide
  • Zoom
  • Grow


Animations help make the banner interaction smoother and more noticeable.



Buttons


Defines which buttons appear in the cookie notice dialog.


Available options include:


  • Accept–Decline (recommended)
  • Accept only
  • Decline only
  • Preferences


The selected configuration determines the interaction choices available to visitors.



Button Layout


Controls how buttons are arranged inside the banner.


Available layouts:


  • Horizontal
  • Horizontal (grouped)
  • Horizontal (justified)



Additional Options


Additional layout adjustments include:


Reverse order

Flips the order of the buttons.


Hide header

Hides the banner header elements such as:


  • Title
  • Logo
  • Close button
  • Language selector


Center align

Centers the banner content including:


  • Header
  • Message
  • Buttons


This works best with Box and Wide dialog types.



Preferences Dialog Layout Options


When the Preferences dialog is enabled, additional layout settings become available for the detailed consent window.



Dialog Appearance


Defines the layout style for the preferences window.


Available options:


  • Box – A centered floating dialog.
  • Drawer – A sliding panel that appears from the top or bottom.
  • Sidepanel – A panel that slides in from the left or right side.



Position


The position depends on the selected dialog type.


Examples include:


For Box:


  • Center
  • Top left
  • Top center
  • Top right
  • Bottom left
  • Bottom center
  • Bottom right


For Drawer:


  • Top
  • Bottom


For Sidepanel:


  • Left
  • Right



Buttons


Defines which buttons are available inside the preferences dialog.


Available configurations:


  • Accept–Decline
  • Accept only
  • Decline only



Button Layout


Controls how action buttons are displayed.


Available layouts:


  • Vertical
  • Vertical (grouped)
  • Horizontal
  • Horizontal (grouped)
  • Horizontal (justified)



Additional Options


Reverse order

Flips the order of the buttons.


Require Save Preferences

When enabled:


  • Accept and Decline buttons update category selections
  • Consent is stored only after clicking Save preferences


This option gives visitors more control over reviewing their choices before confirming.



Categories & Cookies Display


Controls how cookie categories and details appear in the preferences dialog.


Available options include:


Show category descriptions

Displays a short explanation below each cookie category.


Show cookies list

Allows visitors to expand categories and view the individual cookies associated with them.


Use checkboxes instead of switches

Displays category controls as checkboxes rather than toggle switches.



Animation


Controls how the preferences dialog appears and closes.


Available animation types:


  • Fade
  • Slide
  • Zoom
  • Grow



Summary


The Layout settings allow you to fully control how the consent dialogs appear and behave.


Using these options, you can configure:


  • The type of consent dialog displayed
  • The position and size of the banner
  • Button layout and interaction options
  • Preferences dialog structure
  • Animations and visual presentation


Together, these settings help ensure the banner integrates smoothly with your store’s design and user experience.

Updated on: 05/03/2026

Was this article helpful?

Share your feedback

Cancel

Thank you!