How to translate the GDPR/CCPA app by using Weglot translation app

How to translate GDPR/CCPA + Cookie Management app? That is one of the most frequently asked questions in our support. You can use several apps for translating the GDPR/CCPA app, and we wanted to facilitate your job by showcasing the translation process step-by-step. We are starting our Translation blog posts series with Weglot.

Initial setting of the app

By using Weglot, you can translate the whole content of your Shopify store automatically. Let's see how the app looks like

1. Navigate to the Apps section

2. Then go to the Weglot Translate

When entering the admin side of the app you will see the initial settings you have to go through in order to configure the app.

Here is how the admin side of the app looks like

The first thing you should do is choose the language you want to use for translation. You can do that by following these steps:

1. Navigate to the Main Settings of the app

2. Choose the Original language of your store

3. Then select the Destination language

We chose our Destination language to be German, that way the whole content of the store will be available in German as well.

The next step is to customize the Language selector:

1. Scroll down to the Language selector section

2. Now, click on the Manage button

A new window will open where you will be able to set up the outlook of the language switcher. We chose to display the switcher as a dropdown box with the language name and the language flag. There are many options for configuring the selector, the final outlook depends only on your preference. You can even apply a custom CSS code.

Here is how the configured language switcher looks like on your store front

After you have set up the app, it is time to show you how you can translate the Cookie Bar and Preferences Popup of our app.

Translating the GDPR/CCPA app

If the automatic translation is not working for you, Weglot has provided an option for Dynamic translation which you can use. Here is how you can do that:

1. Navigate to Weglot Settings

2. Go to the Shopify Settings tab

3. Add the following CSS selectors: 

• .cc-window (for the Cookie bar)
• .cc-settings-dialog (for the Preferences popup) in the Dynamic Elements field. 

Note: If the Cookie bar is not being translated after applying the CSS selectors to the Dynamic Elements section, you can try to add the .cc-banner selector as well, and then remove it. Adding and removing the .cc-banner will refresh the detection of the elements in the translation app. As a final result, again only the ".cc-settings-dialog" and ".cc-window" should be left in the dynamic translation.

The CSS selectors should be added separately. For more information on translating dynamic content with Weglot, you can check their Guide Page.

If the dynamic translation is not working for you after applying the CSS selectors, make sure to contact our support team.

When you are done with the dynamic translation go to your store front to check the result.

Here is how the translated to German Cookie Bar looks like on your store front

Here is how the translated to German Preferences Popup looks like on your store front

As we already mentioned Weglot helps you translate your store's content automatically. This means that the GDPR/CCPA Compliance pages will be translated as well.

Here is how the translated in German GDPR Compliance page looks like 

By submitting any request on this page, you will see that the additional messages are also translated into German.

How the translated Data collection text looks like

How the translated confirmation for the submitted request looks like

In order to help you with the translation process, we have created a step-by-step video tutorial.

And that is all for the Weglot translation app. Stay tuned as we are already preparing the next part of our Translation blog post series.

If you have any questions in regards to the translation apps feel free to contact us via chat or email.