> ## Knowledge Base Index > Fetch the complete knowledge base index at: https://help.hoppyapps.com/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). # 🎨 Cookie Consent – Design & Styling The Design & Styling section gives you complete control over how your Cookie Consent banner appears across your storefront. From templates and positioning to colors, typography, icons, and button styling, nearly every visual aspect of the banner can be customized to match your store branding and create a more professional consent experience. # **⚠️ Before You Begin** To access Design & Styling settings: → Open **GDPR EU Cookie Banner** → Open **Banner Settings** → Navigate to the **Design** tab 💡 A live preview updates automatically as you make changes, allowing you to see exactly how the banner will appear before saving. --- ## **🎨 Templates** Templates provide a quick way to apply a complete banner design without manually configuring every setting. ### **What It Does** Applies a predefined combination of: * Background colors * Text colors * Button colors * Icon colors This allows merchants to quickly launch a polished banner design. --- ### **Available Templates** Examples include: * Forest * Aqua * Alert * Purple * Blue * Ocean * Yellow * Black * Navy --- ### **Custom Template** The Custom template provides a neutral starting point for merchants who prefer to build their own design from scratch. 💡 This is often the best option when matching an existing brand style guide. --- ## **👀 Visibility** Visibility controls which devices display the Cookie Consent banner. ### **Available Options** #### **Desktop & Mobile** Displays the banner across all devices. --- #### **Desktop Only** Displays the banner only on desktop devices. --- #### **Mobile Only** Displays the banner only on mobile devices. This can be useful when testing or creating device-specific experiences. --- ## **📍 Position Settings** Position settings control where the banner appears on desktop and mobile devices. --- ### **💻 Desktop Display Type** Determines the overall layout style used on desktop devices. #### **Full Bar** Displays a banner stretched across the width of the screen. Commonly used for traditional cookie consent banners. --- #### **Float Card** Displays the banner as a smaller floating card. This creates a more compact appearance and reduces screen coverage. --- ### **📌 Desktop Position** Available positions depend on the selected display type. #### **Full Bar Positions** * Top * Bottom --- #### **Float Card Positions** * Top Left * Top Right * Middle * Bottom Left * Bottom Right --- ### **📱 Mobile Position** Controls where the banner appears on mobile devices. Available options include: * Top * Middle * Bottom 💡 Bottom placement is often preferred because it feels less intrusive on smaller screens. --- ## **🎨 Card Styling** Card Styling controls the appearance of the banner container itself. --- ### **🖼️ Background Color** Controls the background color of the banner. You can: * Select a color visually * Enter a Hex Code manually This helps align the banner with your storefront branding. --- ### **⭕ Corner Radius** Controls how rounded the banner corners appear. Lower values create sharper corners while higher values create a softer appearance. --- ### **📐 Border Settings** Customize the banner outline. #### **Border Size** Controls the thickness of the border. --- #### **Border Color** Controls the color of the border. A subtle border can help the banner stand out without feeling distracting. --- ## **✍️ Typography** Typography settings control how text appears throughout the Cookie Consent banner. --- ### **🔠 Font Family** Controls the font used across all banner text. #### **Use Theme Font** Automatically matches the typography used by your Shopify theme. --- #### **Custom Fonts** Choose from supported system and Google Fonts. Examples include: * Roboto * Open Sans * Montserrat * Poppins Using the same font as your storefront often creates the most seamless experience. --- ### **📝 Title Styling** Customize the banner title. #### **Title Size** Controls the title font size. #### **Title Color** Controls the title text color. --- ### **📄 Description Styling** Customize the body text displayed inside the banner. #### **Description Size** Controls the font size. #### **Description Color** Controls the text color. --- ### **🔗 Privacy Policy Link** Customize the appearance of the Privacy Policy link. #### **Link Size** Controls the font size. #### **Link Color** Controls the link color. Choose a color that remains noticeable while still matching the overall design. --- ## **🔘 Button Design** These settings control the appearance of the consent buttons. --- ### **🎨 Button Color** Controls the button background color. This is usually one of the most visible design elements on the banner. --- ### **🔤 Button Text Styling** Customize the appearance of button text. #### **Text Size** Controls the button font size. #### **Text Color** Controls the button font color. --- ### **⭕ Corner Radius** Controls how rounded the button corners appear. This can be configured independently from the banner container. --- ## **🎯 Icon Settings** Icons help make the banner more visually recognizable and engaging. --- ### **🍪 Show Cookie Banner Icon** Enables or disables the icon displayed alongside the banner content. When enabled, an icon library becomes available. --- ### **🖼️ Icon Selection** Choose from a variety of built-in icons. Examples include: * Cookie * Shield * Lock * Security * Information * Settings * Notification * Warning * Checklist Different icons can help emphasize privacy, security, compliance, or general information. --- ### **🎨 Icon Colors** Customize the appearance of banner icons. #### **Close Icon Color** Controls the color of the close button. --- #### **Arrow Icon Color** Controls the color of the reopen arrow icon. Using complementary colors helps maintain a cohesive design. --- ## **📏 Text Alignment** Controls how content is aligned inside the banner. ### **Available Options** #### **Left** Aligns content to the left side. --- #### **Center** Centers all content within the banner. --- #### **Right** Aligns content to the right side. 💡 Center alignment is often the most balanced option across both desktop and mobile devices. --- ## **⚠️ Important Notes** ### **Templates Replace Existing Colors** Selecting a new template automatically replaces current color settings. For best results: 1. Select a template first 2. Then apply any custom color adjustments --- ### **Position Options Change Dynamically** Available desktop positions depend on the selected display type. If position choices change unexpectedly, verify whether Full Bar or Float Card is selected. --- ### **Icons Must Be Enabled** The icon library only appears when: **Show Cookie Banner Icon** is enabled. --- ### **Visibility Controls Device Targeting** If the banner appears on one device but not another, verify the selected Visibility setting. --- ### **Live Preview Updates Automatically** The preview panel refreshes as changes are made, helping you review your design before saving. --- # **🚀 Final Result** Once configured successfully: ✅ The Cookie Consent banner matches your storefront branding ✅ Colors, typography, and buttons feel consistent with your theme ✅ Banner placement is optimized for desktop and mobile ✅ Icons and styling improve visual clarity ✅ Visitors receive a more polished consent experience ✅ Compliance messaging feels professional without disrupting the shopping experience A well-designed Cookie Consent banner helps maintain compliance while creating a more trustworthy and seamless experience for your visitors. 🍪 ---