Customizing the Look of the Cookie Banner

You can customize the layout and styling of your banner. This allows you to create a look and feel that matches your organization’s branding style.

To customize the style of the banner:

Follow the steps below:

1. Click the settings option from the application menu

2. Select the banner option

3. Navigate to the Style tab.

4. Complete the fields. For more information, see the Banner Style Tab References below.

5. Click the Save button.

6. Finally click the Publish button on the top.

Banner Style Tab References

Position

Popup

The popup banner appears in the center of the screen.

Overlay

The overlay banner works just like the popup banner but additionally block the page until the user makes an action with the banner buttons.

Bar at the top

The bar appears on the top of the screen.

Bar at the top (pushdown)

The bar appears on the top of the screen and it opens with a pushdown effect which make the page content appear after the bar.

Note: This position option may not work well with themes that have sticky header.

Floating at the top left

The banner is placed on the top left of the screen with a small margin from the edge of the window.

Floating at the top center

The banner is placed on the top center of the screen with a small margin from the edge of the window.

Floating at the top right

The banner is placed on the top right of the screen with a small margin from the edge of the window.

Bar at the bottom

The bar appears on the bottom of the screen.

Floating at the bottom left

The banner is placed on the bottom left of the screen with a small margin from the edge of the window.

Floating at the bottom center

The banner is placed on the bottom center of the screen with a small margin from the edge of the window.

Floating at the bottom right

The banner is placed on the bottom right of the screen with a small margin from the edge of the window.

Theme

Block

The content appears with a small padding from the edges of the banner/bar. Also there is no rounded corners on the buttons and they appear with width which is proportional to their title.

Classic

The content appears with a small padding from the edges of the banner/bar just like with the Block option. Here the buttons appear with rounded corners and same width.

Edgeless

The content appears without any padding from the edges of the banner/bar. The buttons appear without rounded corners and with same width.

Wired

It is the same with Block option but the backgrounds and colors of the buttons are inverted.

Text alignment

This style property is applied on the banner/bar title, message and the logo. The available options are: left, center and right.

Banner size

The size of the banner can change to em unit. Em unit it relative to the font-size of the element (2em means 2 times the size of the current font). This can easily be changed with the slider control. By enabling the live preview on the top right of the screen you are able to play with the slider and adjust the width of the banner to the prefered option. This is very helpful when the titles of the buttons or the message is too long and you need more space.

Note: this property works only with the banner positions and not with the bar positions because the bar positions cover the whole width of the window.

Font size

The size can change to px unit. Pixel unit pixels (1px = 1/96th of 1in). This option can easily be changed with the slider control. By enabling the live preview on the top right of the screen you are able to play with the slider and adjust the size of the text to the prefered option. On the left the size is inhereted by your store theme stylesheet.

Padding

The padding of the banner/bar content can change to px unit. This control is a slider as well. By enabling the live preview on the top right of the screen you are able to play with the slider and adjust the padding of the content to the prefered option. On the left the padding is the default padding depending the theme that has been selected.

Note: this property is not working with the Edgeless Theme.</p

Colors

Color may change either by selecting a set of colors from the palette or by selecting each color seperately. The color picker supports both Hex and RGBA formats. Hex is a 6-digit, 24 bit, hexidecimal number that represents Red, Green, and Blue. An example of a Hex color representation is #123456, 12 is Red, 34 is Green, and 56 is Blue. There are 16 million possible colors. RGBA is similar to Hex in that it has 24 bits for RGB color, bit there is an additional 8 bit value for transparency.

Animation

You have the option to enable bar/banner animation which means that the banner will open with a fade in/slide in effect and close with a fade out/slide out effect depending the position it has.

Also the re-open bar/banner link can be animated. This is available only when you have enabled the Re-open banner (Revoke) button from the tab Behavior.

Note: these properties are not supported by all browser versions.

Logo

The logo can be used to load inside the bar/banner. The supported formats are: png and jpg.

Font family

This is by default the inhereted font selected that your store theme has. But here you can use other fonts that you may like. Web Safe Fonts are supported by browsers and can be used here with no problem. These are:

– Arial (sans-serif)
– Arial Black (sans-serif)
– Verdana (sans-serif)
– Tahoma (sans-serif)
– Trebuchet MS (sans-serif)
– Impact (sans-serif)
– Times New Roman (serif)
– Didot (serif)
– Georgia (serif)
– American Typewriter (serif)
– Andalé Mono (monospace)
– Courier (monospace)
– Lucida Console (monospace)
– Monaco (monospace)
– Bradley Hand (cursive)
– Brush Script MT (cursive)
– Luminari (fantasy)
– Comic Sans MS (cursive)

In case you want to use another font you will need to first load this font from your store assets and make it available to you css file in the theme.

z-index

The z-index property specifies the stack order of an element. Normally you want the bar/banner to appear on the top of everything in your store pages. Something though you may use other apps or scripts and this needs to be changed.

Container ID

This is the ID of the bar/banner element. You can change it in cases you want to operate with other scripts or selectors. This needs to be changed only when you know what you want to do.

Custom CSS

Custom css gives you the option to add extra styles that the previous options are not covering. For example here you can make changes to configure button sizes, border colors etc.