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. 🍪

Updated on: 14/07/2026