How to Translate Shopify App Blocks and Third-Party Widget Content for International Stores

Most Shopify merchants finish translating their product descriptions and theme text — then open their German storefront and find a trust-badge widget, a review carousel, or a recently-viewed block stubbornly rendering in English. App block content sits outside Shopify's standard translation layer, and that gap is one of the most common places multilingual stores fall apart.

This guide explains exactly why it happens, how to translate Shopify app blocks in practice, and what to do when a third-party app gives you no translation interface at all.

Why App Block Content Is Harder to Translate Than Everything Else

Shopify's Translate & Adapt API covers content stored in Shopify's own data layer: product titles, descriptions, metafields, page content, navigation labels, and theme section settings. When a translation app like StoreLingo hooks into that API, it can read and write translations for anything the API exposes.

App blocks are a different story. Content rendered by a third-party app block typically lives in one of three places:

• The app's own database — synced to your storefront via their servers, not Shopify's content layer
• Hardcoded strings inside the app's Liquid or JavaScript — baked into the app's code, inaccessible via the translation API
• Theme settings or metafields — accessible, but only if the app developer has wired them up correctly

The Shopify architecture matters here too. Stores running JSON templates (the current standard for Online Store 2.0 themes) expose app block settings through schema, which makes some strings translatable via the API. Stores still on theme.liquid-based legacy templates often have app logic injected directly into Liquid partials, where strings are effectively invisible to any external translation tool. If you are unsure which architecture your store uses, check your theme's templates folder — JSON templates use .json files rather than .liquid files for page structure.

Step 1: Audit What Each App Block Actually Controls

Before attempting any translation method, map your app blocks to their content source. Open your Shopify theme editor and click each app block. For every block, ask:

1. Does this block have settings fields visible in the theme editor sidebar? If yes, those fields are likely translatable via the API.
2. Does the block render content fetched from an external server (review counts, stock levels, recommendations)? That content is controlled by the third-party app.
3. Is any text hardcoded in the app's JavaScript bundle? Inspect the page source and search for the English strings — if they appear in a .js file, they are not accessible via Shopify's translation API.

This audit takes 30 minutes and tells you which method applies to each block before you invest time in a workaround that will not work.

Step 2: Use Metafield-Sourced Content Where Possible

Some app blocks are designed to pull display text from Shopify metafields rather than from hardcoded strings. This is deliberate — it makes the content translatable through Shopify's native layer.

The Shopify Search & Discovery app's recommendation blocks are a clean example: product titles and descriptions shown in those blocks come from Shopify's product data, which is fully translatable. Similarly, apps built on Shopify's native metaobject system — such as custom content blocks built with the Metaobject API — store their content in Shopify's data layer and are therefore accessible to translation tools.

If you are evaluating a new app for your international store, look for explicit mention of "Shopify Translate & Adapt compatible" or "metafield-based content" in the app listing. Apps that store their display strings in metafields instead of their own database are significantly easier to localize. For a deeper look at translating metafield-based content, see our guide on how to translate Shopify metafields, metaobjects and custom data.

Step 3: Check Whether the App Has a Built-In Translation Interface

Many popular review and UGC apps include their own localization settings — but the implementation quality varies and these interfaces change between app versions. Rather than treating any specific app's feature as guaranteed, the right approach is:

1. Open the app's admin dashboard and look for a "Languages," "Translations," or "Localization" section
2. Check their changelog or help documentation for your current app version
3. Contact their support team and ask specifically: "Does your app respect the active Shopify storefront locale, and can I provide translated strings per language?"

Some apps will render UI text (button labels, form placeholders, section headings) based on window.Shopify.locale if you supply a translation file — others ignore it entirely. The only reliable way to know the current state is to test it or ask. Do not assume a feature exists because a blog post from 18 months ago described it.

Step 4: Use a JavaScript Locale Switch for Apps That Support It

When an app renders UI text client-side and respects the active storefront locale but does not auto-translate, you can often supply translated strings via a small JavaScript snippet in your theme. Here is a working pattern:

// Place this in your theme.liquid or a section that loads before the app block
(function() {
  var locale = window.Shopify && window.Shopify.locale ? window.Shopify.locale : 'en';

  var translations = {
    'de': {
      addToCart: 'In den Warenkorb',
      outOfStock: 'Nicht auf Lager',
      reviewCount: 'Bewertungen'
    },
    'fr': {
      addToCart: 'Ajouter au panier',
      outOfStock: 'Rupture de stock',
      reviewCount: 'Avis'
    }
  };

  var t = translations[locale] || {};

  // Expose translations for the app to consume, if it supports a global config object
  window.MyAppConfig = window.MyAppConfig || {};
  window.MyAppConfig.i18n = t;
})();

This only works if the third-party app reads from a global config object or exposes a translation hook in its documentation. Check the app's developer docs for mentions of i18n, translations, or locale configuration options. If the app's strings are bundled inside a minified JavaScript file with no external hook, this approach will not reach them — and you are in the territory described in Step 5.

Important caveat on JSON vs legacy templates: In JSON template stores, this snippet can be added cleanly to a theme section. In legacy theme.liquid stores, injection order matters — if the app script loads before your snippet, the config object will not be available in time. Test with your browser's network tab to confirm load order.

Step 5: When the App Has No Translation Support at All

Some apps simply do not support localization. Your options are:

Replace the app with a locale-aware alternative

Search the Shopify App Store specifically filtering for "Translate & Adapt compatible" apps. This is the cleanest long-term fix.

Use a CSS-based language toggle as a stopgap

If the untranslatable text is short and static (a single badge label, a short trust statement), you can hide the default element per locale and inject a translated element using CSS scoped to a locale-specific <html lang=""> attribute. This is fragile and does not scale, but it works for one or two strings while you evaluate a permanent solution.

Accept the limitation and communicate it

For some specialist apps — particularly B2B configurators or complex calculators — a partial translation is better than no translation. Make sure the rest of your store is fully localized so the overall experience is still credible. For everything else that is within your control, see how to translate Shopify theme content: buttons, navigation and system text to ensure your theme layer is complete before worrying about app blocks.

Step 6: Verify What Search Engines Are Indexing

App block content that renders in English on your French storefront creates a real SEO problem — not primarily through bounce rate, but through indexing. If Googlebot crawls your /fr product pages and finds significant English-language text blocks (a review widget, a "You may also like" section, a trust bar), it may determine the page language is ambiguous or index the page under the wrong locale. This undermines the hreflang signals you have set up and can cause your French pages to compete with your English pages rather than serve distinct markets. Audit your rendered HTML in Google Search Console's URL Inspection tool, not just your Shopify admin, to see what Googlebot actually reads.

---

Add StoreLingo on the Shopify App Store →

StoreLingo translates everything within Shopify's native content layer — products, collections, pages, blog posts, and SEO metafields — using AI, with a glossary to keep brand terms consistent. For content that lives inside Shopify's data layer, it handles the heavy lifting. For third-party app blocks specifically, use the steps in this guide alongside it.

---

FAQ

Does untranslated app block content hurt my multilingual SEO? Yes — the primary risk is indexing accuracy, not bounce rate. If Googlebot crawls a page designated as French via hreflang but finds substantial English text in rendered app blocks, it may misclassify the page language and undermine your international SEO signals entirely. Use Google Search Console's URL Inspection tool on your translated URLs to check what the rendered HTML actually contains.

Can StoreLingo translate content inside third-party app blocks? StoreLingo translates content stored in Shopify's native data layer — products, pages, collections, metafields, and theme settings exposed via the Translate & Adapt API. Content that a third-party app stores in its own database or renders from hardcoded JavaScript strings is outside that layer and requires the app-specific approaches described in this guide.

What is the fastest way to check whether an app block's text is translatable? Switch your storefront preview to a non-English locale in the Shopify theme editor and observe whether the app block text changes. If it stays in English, inspect the page source and locate the strings — if they appear inside a .js bundle URL rather than in the HTML, they are hardcoded client-side and will require the JavaScript hook method or an app replacement.