How to customize the GDPR/CCPA app in a few easy steps

Your online store design says a lot about your brand and can have a big impact on your customers. In this blog post, we will show you how to customize the GDPR/CCPA + Cookie Management app in a way that will completely match your store.

Let’s get started!

Quick Setup - the first step for customizing the GDPR app

At first, you will go through the Quick Setup. There you will be able to choose between three different design samples for your Cookie bar and Preferences popup.

Golden

Navy

Jade

Note: Keep in mind that these are just sample designs, and you can make all kinds of transformations after finishing the Quick Setup

Design settings with endless options for modification

The main design settings of the app give endless possibilities for customization. Let's see what options you can use to modify the Cookie Bar.

Navigate to the Design Settings tab. There you will see the current outlook of the Cookie Consent Bar. Right under the Cookie Bar preview, you will find six different setting options, which will help you customize the design further.

Here is how the Cookie Consent Bar and the Preferences Popup look like on the storefront:

Now, let's pick the colors that will match your store better, and use them in order to style up the Cookie Bar and Preferences Popup. Here is how we did it:

First, we used a color picker extension to get the proper colors.

Then we went back to design settings and modified each part of the Cookie Bar and Preferences Popup.

Changing the Background Color

Changing the Button Text Color

Changing the Checkbox Color

The final look of the Cookie Consent Bar and the Preferences Popup:

As we are done with the color modifications it is time to move on to the Position of the Cookie Consent Bar. By default, the bar is located at the bottom of your storefront. However, you can change its' position by choosing between several options. Here is how:

Navigate to the Design Settings > Position and choose where you want to put the bar.

Bottom Right position

Bottom Left position

Top Right position

Top Left position

Top

Note: If you have any widgets on your store, there might be an overlap between them and the cookie banner. In that case we suggest you to put the cookie bar in a different place.

On top of the colors and the position of the Cookie Bar you are also able to change the font family and the font size.

1. Go to the Design Settings tab 
2. Add the font family and the font size of your preferences

Here are the results after we have modified the font family and font size:

Cookie Bar

Preferences Popup

You can apply custom styles to the Cookie bar using CSS. However, we would recommend to modify this field only if you are an advanced technical user and you know how the CCS styling works.

In case you are using some of our Premium plans you will be able to customize your Request Page and Email Template.

Here are the different elements of the Request Page that can be transformed:

Part 1: Change the Background color:

1. Go to Request Page Settings in the Design Settings tab.
2. To change the background color simply pick a shade that you prefer from the color palette or directly add the color code.

Part 2: Change the Text color

1. Navigate to Request Page Settings in the Design Settings tab.
2. To change the text color, add a color code or pick a color from the color palette.

Part 3: Add a store logo

1. Navigate to Request Page Settings in the Design Settings tab.
2. Make sure that your store logo is visible by selecting the Enable option.
3. Upload your logo.

This is how the Request Page will look like if you make all these modifications:

Now, let's see how you can customize the Email Template page:

Part 1: Custom email sender

This is available for premium users only and allows you to send all the emails from whichever email address you prefer. Check the steps below:

1. Navigate to Email Template Settings in the Design Settings tab.
2. Add the email address from which the emails will be sent.

Part 2: Change the Button Color

1. Navigate to Email Template Settings in the Design Settings tab
2. Select the color that you want to use or add the color code.

Part 3: Email Header/Footer HTML Code

Here you are able to make a few transformations. As an example we will show you how to add your store logo in the header. Follow the steps below:

1. Navigate to Email Template Settings in the Design Settings tab.
2. Click on the Image icon in order to add your logo.
3. In the URL section add the logo URL.
4. Adjust the image size and confirm the action.

Here is the result of the modifications that we have just done. This is going to be the email that your customers will receive after they submit a request from one of the compliance pages.

That is all for the design settings of the app. 

We have created a dedicated video showing how you can customize the Cookie Bar + Preferences popup.

If you want to make some additional styling check the GDPR/CCPA app styling blog post where you will find some custom design tips and tricks.

Feel free to contact us in case of any questions or simply visit our FAQ page for more information.