How to optimize my Shopify store translations using Weglot and Markets

In this article, you will learn more about how to optimize the translation of your Shopify Markets store.

1. How to install Weglot on your Shopify Markets store?

To translate your Shopify Markets store using Weglot, we recommend using our SEO-friendly subdirectory integration.

This integration lets you translate each market and generate specific URLs for every language. This is important for SEO and proper page indexing.

We made a specific article to guide you through the Weglot x Shopify Markets setup. You can access this article here.

2. How to translate your dynamic content?

Weglot is designed to translate the content that is findable in the source code of your website.

However, some content is dynamically generated, and therefore, it is not in your source code and may not be detected by Weglot. This content usually changes over time, it can for example be the case of "Recently Viewed" sections or sidecarts that adapt their content to users.

Content coming from third-party apps such as reviews, popups, and others, is dynamically generated and may not be translated by the Shopify tool Translate&Adapt but can be translated using Weglot.

Note that Advanced stores usually create their own custom theme that isn’t translated. Weglot can translate this. The most significant example is the product page with some elements not translated by Translate&Adapt.

If some content is dynamically generated, Weglot will need to dynamically translate the targeted content.

To indicate to Weglot some content you need to dynamically translate, you can go to your Weglot dashboard and head over to the project linked to your store.

Then, go to the "App Settings" section and add a new dynamic rule. Note that the wording may not be "App" but your CMS name.

In a dynamic rule, you need to indicate a precise CSS selector to tell Weglot which part of your website needs to be dynamically translated.

Reminder: To find the CSS selector:

- On your website, right-click on the element you want to translate

- Go to "Inspect" to open the console

- In the "Elements" tab, use the arrow at the top left of the console to target the element

- Right-Click on the code corresponding to the element you want to dynamically translate (the code should be highlighted)

- Go to Copy > Copy selector

- Paste the code in the box on Weglot's side, then click on "Add"

Here is an article we made about how to translate dynamic elements: "How to translate dynamic content?".

If you are having difficulties finding adapted selectors for your dynamic rules, do not hesitate to contact us at support@weglot.com, we're here to help.

3. How to translate my Shopify checkout?

The way your Shopify checkout is translated depends on the Weglot integration you are using.

For your Shopify Markets store x Weglot setup, you need to use the subdirectory integration, as you can see in part 1 of this article or in our dedicated article.

For your information, checkout pages are hosted by Shopify itself and translations are directly handled on its side, as translations are coming from the theme.

As a result, the Weglot language switcher is not visible during the checkout process, since Shopify handles these pages directly.

However, Weglot displays your checkout in the correct language based on the language selected prior to the checkout, this is done by communicating with Shopify's theme translation system.

It means that the translation isn't managed by Weglot, but Weglot just calls the theme in another language.

You should be able to edit a checkout element translation, by following these steps:

- Go to Shopify admin > Languages > Replace the language of the theme with the destination language (the language related to the translation you want to edit)

- Into your Shopify Admin > Online Store > Themes > Edit default theme content > "Checkout & System" tab

- Edit the content you want to replace in the translated version

- ⚠️ Into your Shopify admin > Languages, change back the default language to the default one.

As you are using the subdirectory integration, you will notice that the language code subfolder is added to the checkout URL, with also the "locale" parameter, to indicate to Shopify which language to use.

The checkout URL structure will be https://website.com/language_code/checkouts/cn/xxx?locale=language_code.

Please note that Weglot is responsible for translating the product details and total/subtotal parts on the checkout page.

4. How to translate my Shopify notifications?

By using Weglot, you will be able to translate some of your Shopify email notifications.

You can translate orders, shipping, and customer-related notifications.

We made a specific article to guide you through this translation process, you can access it here.

If you are having difficulties to translate your Shopify notifications, please reach out to us at support@weglot.com.