> ## Knowledge Base Index > Fetch the complete knowledge base index at: https://help.pandectes.io/sitemap.xml > Use this file to discover available pages before exploring further. > Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash). # 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** ![](https://storage.crisp.chat/users/helpdesk/website/-/1/a/5/a/1a5af239e847cf00/screenshot-2026-03-05-at-41126_1uppcxs.png) The layout configuration works together with the **Consent dialogs** setting, which determines whether visitors see a **cookie notice, preferences dialog, or both in sequence**. --- ### Consent Dialogs 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. ![](https://storage.crisp.chat/users/helpdesk/website/-/1/a/5/a/1a5af239e847cf00/screenshot-2026-03-05-at-41157_kk3yj.png) --- # 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 ![](https://storage.crisp.chat/users/helpdesk/website/-/1/a/5/a/1a5af239e847cf00/screenshot-2026-03-05-at-41246_1pohuc4.png) --- ### 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. ![](https://storage.crisp.chat/users/helpdesk/website/-/1/a/5/a/1a5af239e847cf00/screenshot-2026-03-05-at-41352_1uts38o.png) --- ### 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.