> ## 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 Banner — Translation

The **GDPR EU Cookie Banner** app allows merchants to translate their cookie consent banner into multiple languages, helping create a localized and compliant experience for visitors across different regions.

Translations can be configured for all customer-facing content, including banner text, button labels, preference popup content, and compliance-related messaging.

### **Translations can be added for:**

* 🍪 **Banner Headers & Descriptions**  
* 🔗 **Privacy Policy Link Text**  
* 🔘 **Button Labels**  
* ⚙️ **Preference Popup Content**  
* 📋 **Cookie Category Names & Descriptions**  
* 🌎 **Compliance Messages**

---

# **🌐 Before Adding Translations**

Before translations can be added inside the app, the language must already exist within your Shopify store settings.

The app automatically reads available languages from:

**Shopify Admin → Settings → Languages**

Only languages configured in Shopify will appear in the Translation section.

⚠️ **Important:**

If a language has not been added in Shopify Settings, it will not appear in the translation dropdown inside the app.

💡 To add a new language to your store, click:

**"Add languages in Shopify Settings to translate"**

from the Translation page within the app.

---

# **🛠️ Step 1 — Open the Translation Page**

Open the **GDPR EU Cookie Banner** app from Shopify Admin.

Then:

➡️ Open the left-side navigation menu.

➡️ Click **Translation**.

This will open the translation management page where all banner languages are configured.

---

# **🎯 Step 2 — Add a Language**

Inside the **Default languages** section:

➡️ Select a language from the **Default banner language** dropdown.

The dropdown only displays languages that:

* Exist in Shopify Settings  
* Have not already been added

➡️ Click **Add selected language**.

The selected language will immediately appear in the **Extra languages** table.

💡 Repeat this process for every language you would like to support.

---

# **➕ Step 3 — Configure Language Detection**

Scroll to the **Detect language** section.

Choose how the cookie banner should determine which language to display.

### **Browser's Language**

The app checks the visitor's browser language and automatically displays the matching translation when available.

If no translation is available, the banner falls back to the default language.

### **Store Language**

The banner always displays using your store's configured language regardless of browser settings.

💡 For international stores, **Browser's Language** is typically the recommended option.

---

# **✍️ Step 4 — Add Translation Content**

For each language you've added:

➡️ Click the **⋮ (Action Menu)**.

➡️ Select **Edit**.

This opens the translation editor.

The editor contains:

* Field Name  
* Default English Text  
* Translation Input Field

Enter the translated text that customers should see on the storefront.

### **Translation Areas**

#### **Banner Text**

* Cookie Bar Header  
* Description  
* Privacy Policy Link Text

#### **Button Labels**

* Accept  
* Decline  
* Preferences  
* Re-open  
* Accept All  
* Save Consent

#### **Preference Popup**

* Popup Title  
* Popup Description  
* Cookie Category Names  
* Cookie Category Descriptions

Examples include:

* Strictly Required  
* Analytics  
* Marketing  
* Functional

#### **Compliance Labels**

* Data Sales Opt-Out Checkbox Label (where applicable)

### **Live Preview**

As translations are entered, the live preview panel updates automatically so you can immediately see how the translated banner will appear to visitors.

➡️ Enter the required translations.

➡️ Click **Save** when finished.

💡 If a translation field is left blank, the app automatically falls back to the default English text for that specific item.

---

# **✅ Step 5 — Activate Translations**

Return to the main Translation page.

Each language in the **Extra languages** table includes a status indicator.

### **Available Statuses**

* **Active** — Translation is available on the storefront.  
* **Inactive** — Translation is ignored by the banner.

To change a status:

➡️ Click the **⋮ (Action Menu)**.

➡️ Select **Activate** or **Deactivate**.

This allows translations to be prepared in advance before making them available to customers.

---

# **💾 Step 6 — Save Changes**

Whenever you:

* Add a language  
* Remove a language  
* Change language detection settings  
* Activate or deactivate translations

A **SaveBar** appears at the bottom of the page.

Choose one of the following:

➡️ **Save** — Apply all changes.

➡️ **Discard** — Revert to the last saved configuration.

The app stores translation settings within your Shopify store so they can be displayed on the storefront automatically.

---

# **⚠️ Important Notes**

Keep the following points in mind:

* Languages must be added in Shopify first — **Shopify Admin → Settings → Languages**.  
* Empty translation fields automatically display the default English content.  
* Inactive languages are ignored even if translations are complete.  
* Browser language detection depends on matching available Shopify language locales.  
* Each language supports a single translation set.

---

# **🎉 Final Result**

Once configured successfully:

✅ Customers see cookie banners in their preferred language.

✅ Consent messaging becomes more localized and user-friendly.

✅ Preference popup labels are translated automatically.

✅ Language detection works according to your selected settings.

✅ Your storefront provides a more compliant and trustworthy international experience.

Using translations effectively helps improve customer trust while creating a smoother experience for global visitors. 🌍🚀