Auto-Translate the On-Site Displays

Introduction

This guide is designed for multilingual brands seeking effortless automatic translation for their Loyalty programs. Leverage Weglot's capabilities to render your Dedicated Page, Widgets, and Prompts in over 100 languages.

✨ See Weglot's free and paid plan features here.

What's Weglot?

Weglot empowers brands to translate and adapt their websites for a wider global audience. Their Shopify app integrates seamlessly with your admin interface, streamlining the translation process for your store.

  • No need for manual coding
  • It offers automatic translation of store content into one or more target languages.
  • Translatable content spans various areas, including product pages, third-party apps, checkout processes, and email notifications.
  • It optimizes multilingual SEO.

💡 Find out more: Read all of Weglot's ecommerce solutions here.

📝 Note: We are not partnered with Weglot, but we do trust the seamless integration with BrandLift Loyalty to auto-translate 100% of the content in your on-site displays.

Installing Weglot

If you already use Weglot, please skip to Translating your on-site displays as dynamic elements. For first-time Weglot users, follow the steps below. Note that you'll install the app at no cost and begin a 10-day trial period without any financial commitment. Should Weglot not suit your requirements, you can easily remove the app from your Shopify admin panel.

  1. Search for "Weglot" in the Shopify App Store and install the app
  2. Create your Weglot account to start the free trial
  3. Configure your languages and click Save
  4. In the next step, you will be requested to enable Weglot in your App embeds. Click the Activate button to open your theme editor in a new tab and make sure you click Save once it's enabled
  5. Go back to Weglot, click Check activation, and then click Continue
  6. In the final step, click Go to the settings page to open the Weglot settings. Here you can explore the configuration dashboard, add subdomains, customize the language selector, etc. To see all your content, click Edit my translations on the top bar menu.

💡 Find out more: You can also read the detailed setup instructions on Weglot's article Shopify - Integration / Setup.

Translating Your On-Site Displays as Dynamic Elements

After successfully activating the Weglot app embed in your store, it should automatically translate all content on your Shopify pages into your chosen target languages. However, for translating the content from your Loyalty program, which comes from a third-party app (BrandLift), you need to add your on-site displays as dynamic elements to translate.

  1. From Weglot, click Edit my translations
  2. In the new tab, click Settings
  3. Click Shopify Settings
  4. Click Add Dynamic and fill in the fields on the popup
  5. Below Selector, type the .class or #id you want to translate
    1. .ba-loy-app - To translate the Floating Widget
    2. #brandlift-page-wrapper - To translate the Dedicated Page
    3. #brandlift-form-{{id}}-iframe - To translate the Loyalty Prompt
    4. #loyalty-program-header - To translate the header of the Account Page Embed
    5. .account-loyalty-wrapper - To translate the content of the Account Page Embed
  6. Below Description, enter the name you want to give to the dynamic element. Only you can see this
  7. Click Save and continue to add more dynamic elements if you want to
  8. Open your online store in a new tab and see the result once the language is changed.

💡 Pro Tip: Weglot allows you to replace/edit automatic translations with manual translations. You can read more about it on How to edit my translations.

How to get the ID of your Loyalty Prompts

  1. Visit your store and wait for the Loyalty Prompt to show. We recommend using the incognito window
  2. Open the inspect panel in your browser
    1. Chrome: Ctrl+Cmd+I (Mac) or Ctrl+Shift+I (Windows)
    2. Firefox: Ctrl+Opt+I (Mac) or Ctrl+Shift+I (Windows)
    3. Safari: Ctrl++I (Mac)
  3. Click the selector in the panel
  4. Hover the Loyalty Prompt to reveal the ID
  5. Use the ID for the dynamic element in Weglot Weglot (e.g. #brandlift-form-11512-iframe).

Common Questions

I already enabled Weglot's app embed but the translation isn't working. What can I do?

If the translation does not work, you can paste their JS code snippet located on this page into your theme.liquid file, just before the </head> tag.​

<script type="text/javascript" src="https://cdn.weglot.com/weglot.min.js"></script><script>    Weglot.initialize({        api_key: 'YOUR_API_KEY_HERE'    });</script>

How can I manage translations from Weglot?

You can visit the Translations management collection in their help center to find out more about translation edits, URLs exclusions, etc.

I have some questions/issues with the translation. Can you help me?

Please be aware that we cannot offer direct support for Weglot-related issues. If you encounter any difficulties with setup or app functionality, we advise contacting Weglot's support team directly.

Was this article helpful?

Adding Translating Texts For On-site Displays
Translation Texts: Comprehensive List for Customization