Overview

Currently, Meteor Mega Menus is not designed to be used on multi-lingual stores.

In most cases, Meteor's mega menus do not attach to a theme's navigation bar when a customer uses a language switcher on the storefront. This is because the app replies on the menu item's title and URL for attachment. Normally, when a customer changes their language to be different from the store's default language, the URLs (and titles) for each menu item are automatically changed to use the customer's selected language. Unfortunately, this breaks the attachment of the app's mega menu(s), and the storefront ends up displaying the theme's native dropdown menus instead. Even if the app's mega menu(s) do properly attach, the content of the mega menu(s) do not get translated.

Workarounds

Our developers are hoping to build multi-language functionality into a future version in the app, but in the meantime, there are a couple of workarounds that you can take into consideration for translating your mega menus:

(A) Create separate navigation menus in Shopify in each desired language for each Meteor mega menu, and use custom Liquid to display the correct navigation menu based on the customer's language selection.
(B) Use a translation app to automatically translate the content of the mega menus on the fly.

Though somewhat tedious, you could certainly create separate navigation menus in the Shopify admin for each of your desired languages. You can then add custom Liquid code to your store's theme to automatically change the navigation menus based on the customer's language selection. Lastly, you'll need to create separate mega menus in Meteor for each menu item for each language.

Basic steps

Create multiple navigation menus in Shopify for each desired language.
Add custom code to the store's theme to control which navigation menu is shown based on the customer's selected language (also known as "locale"). See the Liquid example below.
Create separate mega menus in Meteor for each menu item for each language.

Liquid example

The code below would need to be added to the file in the theme that controls the store's header or navbar.

{% if request.locale.name == 'English' %}
  {% for link in linklists.header-menu-english.links %}
      <a href="{{ link.url }}">{{ link.title }}</a>
  {% endfor %}
{% else %}
  {% for link in linklists.header-menu-arabic.links %}
      <a href="{{ link.url }}">{{ link.title }}</a>
  {% endfor %}
{% endif %}

Here are some helpful resources from Shopify with more details:

Use a translation app

Although not always foolproof with Meteor, you can try using an app such as Translate Your Store - Weglot to automatically translate the content of your mega menus. We have seen the most success when using this older version of Weglot for translation since this particular app only translates content -- the menu item URLs are not translated.

Please note that there are two different versions of the Weglot app, and you will want to make sure you use the one linked above.

Need help?