> ## 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).

# 🌍 Announcement Bar — Translations

Hoppy Announcement Bar lets you create translated versions of your announcement content so customers browsing your storefront in different languages see localized messages automatically.

This helps provide a more familiar shopping experience for international visitors — without needing to create separate announcement bars for every language ✨

Translations can be added for:

* 📝 **Title**  
* 📄 **Subheading**  
* 🔘 **Button Text**  
* ✅ **Success Message** (Email bar type only)

---

# **🌐 Before Adding Translations**

Before translations can be added inside Hoppy Announcement Bar, the language must already exist inside your Shopify store settings.

Hoppy Announcement Bar automatically detects the languages configured in:

→ **Shopify Admin → Settings → Languages**

Only the non-primary languages added there will become available inside the app for translation.

⚠️ **Important:**

If a language is not added in Shopify Settings first, it will not appear in the Translation dropdown inside Hoppy Announcement Bar.

💡 To add a language to your Shopify store, you can follow:

→ "How to add a language in a Shopify store?"

---

# **🛠️ Step 1 — Open Hoppy Announcement Bar**

Open the **Hoppy Announcement Bar** app from your Shopify Admin.

Then:

→ Open an existing announcement bar setup  
→ Or create a new announcement bar

---

# **🎯 Step 2 — Locate the Preview Language Dropdown**

Once inside the announcement setup:

→ Look at the top-right area of the page  
→ Find the **Preview Language** dropdown

This dropdown shows:

* **English** — your base content language  
* Any languages you've already added translations for  
* **Add More** — to add a new translation

ℹ️ The Preview Language selector is not available for Checkout placement announcements.

---

# **➕ Step 3 — Add a New Translation**

Inside the Preview Language dropdown:

→ Select **Add More**

Once clicked, an **Add Translation** modal will appear.

Inside this modal, you can:

* Select the language you want to translate into  
* Enter translated text for each content field  
* Configure storefront-facing translation content

---

# **🌍 Step 4 — Select the Language**

At the top of the Add Translation modal:

→ Choose the language from the **Select language** dropdown

Only languages that are:

* ✅ Already configured in Shopify Settings → Languages  
* ✅ Not already translated for the current announcement type

will appear in this list.

💡 Need more languages? Click **Add language** inside the modal to go directly to your Shopify language settings.

---

# **✍️ Step 5 — Configure Translation Content**

The fields shown in the modal depend on your announcement **type**.

---

## **📝 Simple / Running / Email Bar Types**

For these bar types, you'll see:

* **Title** — The main announcement message  
* **Subheading** — Supporting text (hidden for Running type)  
* **Button Text** — The call-to-action button label  
* **Success Message** — Shown after email submission (Email type only)

---

## **🔄 Multiple Slides Bar Type**

For multiple rotating slides, you'll see a separate section for each slide:

* **Announcement \#1** — Title, Subheading, Button Text  
* **Announcement \#2** — Title, Subheading, Button Text  
* And so on...

Each slide is translated independently.

---

## **💡 Example Translation**

If your base English content contains:

**Title:** "Free shipping on all orders over $50"

Then a Spanish translation could look like:

**Title:** "Envío gratis en todos los pedidos superiores a $50"

Simply enter the translated text exactly as you want customers to see it on the storefront.

---

# **✅ Step 6 — Confirm & Save**

Once the translations are entered:

→ Click **Add translation** inside the modal

The modal will close and the new language will:

* Appear in the Preview Language dropdown  
* Become selectable for live preview

After that:

→ **Save** the announcement bar  
→ **Publish** the announcement bar

---

# **👀 Previewing Translations**

After adding a translation:

→ Use the **Preview Language** dropdown to switch between languages → The live preview on the right updates automatically

This helps you verify how the translated content looks before publishing.

ℹ️ **Note:** The preview updates for all announcement types — Simple, Running, Multiple, and Email.

---

# **🌐 How Translations Appear on the Storefront**

Once published, customers will automatically see content in their browsing language:

* If a customer is browsing in **Spanish** and a Spanish translation exists → they see the Spanish version  
* If a customer is browsing in **German** but no German translation exists → they see the default **English** version

This happens automatically — no manual switching required 🌍

---

# **📝 Managing Existing Translations**

To update or review an existing translation:

→ Open the **Preview Language** dropdown  
→ Select the language you want to edit  
→ The modal will open with the existing translated content  
→ Make your changes and click **Add translation**

The updated translation will overwrite the previous version for that language.

---

# **⚠️ Important Notes**

* Translations are **type-specific** — a translation added for a Simple bar won't automatically apply to a Multiple bar  
* Only **non-primary** Shopify store languages appear as translation options  
* For **Checkout** placement announcements, translations are not supported  
* Always **Save and Publish** after adding or editing translations  
* The storefront language is determined by Shopify's active locale — make sure your theme supports language switching

---

# **🎉 Final Result**

Once configured successfully:

✅ Customers see announcement content in their browsing language  
✅ Untranslated languages fall back to English automatically  
✅ Multiple storefront languages become supported from a single announcement bar  
✅ Shopping experience feels more localized and accessible ✨

Using translations properly can make your store feel more welcoming for international customers 🚀