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.
Search for "Weglot" in the Shopify App Store and install the app
Create your Weglot account to start the free trial
Configure your languages and click Save
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
Go back to Weglot, click Check activation, and then click Continue
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.
From Weglot, click Edit my translations
In the new tab, click Settings
Click Shopify Settings
Click Add Dynamic and fill in the fields on the popup
Below Selector, type the .class or #id you want to translate
.ba-loy-app- To translate the Floating Widget#rivo-page-wrapper- To translate the Dedicated Page#rivo-form-{{id}}-iframe- To translate the Loyalty Prompt (find the ID here)#loyalty-program-header- To translate the header of the Account Page Embed.account-loyalty-wrapper- To translate the content of the Account Page Embed
Below Description, enter the name you want to give to the dynamic element. Only you can see this
Click Save and continue to add more dynamic elements if you want to
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
Visit your store and wait for the Loyalty Prompt to show. We recommend using the incognito window
Open the inspect panel in your browser
Chrome:
Ctrl+Cmd+I(Mac) orCtrl+Shift+I(Windows)Firefox:
Ctrl+Opt+I(Mac) orCtrl+Shift+I(Windows)Safari:
Ctrl+⌥+I(Mac)
Click the selector in the panel
Hover the Loyalty Prompt to reveal the ID
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.