Skip to main content
All CollectionsLanguage Translations
Auto-Translate the On-Site Displays
Auto-Translate the On-Site Displays

Configure Weglot to translate your on-site displays into multiple languages

Ana Rincon avatar
Written by Ana Rincon
Updated over a week ago

Introduction

We wrote this guide for brands that support multiple languages in their store and that are looking for a seamless auto-translation for their Loyalty program. You can make the most of Weglot tools to translate your Dedicated Page, Widgets, and Prompts into 100+ languages.

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

What's Weglot?

Weglot helps brands translate and localize their websites to reach a broader international audience. They developed a Shopify app that you can easily integrate into your admin to simplify the translation process in your store.

  • No need for manual coding

  • It automatically translates the content of the store into one or multiple destination languages

  • The content to translate can come from a product page, a third-party app, checkout, email notifications, etc

  • 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 Rivo 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. If you have never used Weglot, follow the instructions below but please note that you will install the app for free and will start a 10-day free trial that does not require approving any charges. In case Weglot does not meet your needs, you can uninstall the app from your Shopify admin.

  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

    Image 2023-05-09 at 12.34.47 PM
  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

Once you have successfully enabled the Weglot app embed in your store, the app should auto-translate all the content on your Shopify pages into the destination languages you have selected. However, for translating the content from your Loyalty program, which comes from a third-party app (Rivo), you need to add your on-site displays as dynamic elements to translate.

  1. From Weglot, click Edit my translations

    Image 2023-05-09 at 1.44.59 PM
  2. In the new tab, click Settings

    Image 2023-05-09 at 1.58.42 PM
  3. Click Shopify Settings

    Image 2023-05-09 at 2.32.57 PM
  4. Click Add Dynamic and fill in the fields on the popup

    Image 2023-05-09 at 2.33.47 PM
  5. Below Selector, type the .class or #id you want to translate

    1. .ba-loy-app - To translate the Floating Widget

    2. #rivo-page-wrapper - To translate the Dedicated Page

    3. #rivo-form-{{id}}-iframe - To translate the Loyalty Prompt (find the ID here)

    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

    Image 2023-05-09 at 2.40.28 PM
  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

    Intercom - Auto-Translate the On-Site Displays
  4. Hover the Loyalty Prompt to reveal the ID

    Intercom - Auto-Translate the On-Site Displays
  5. Use the ID for the dynamic element in Weglot (e.g. #rivo-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?

Unfortunately, we cannot provide dedicated support on behalf of Weglot. If you have any questions about the setup or if you are experiencing issues with the app, we recommend reaching out to the Weglot support team.

Did this answer your question?