Adding a language to your Shopify store is convenient because it automatically changes links such as menus and buttons. However, in certain cases, you may experience the following issues:
1. In-page links set using the menu function do not work in languages other than the default.
*I would like to delete the ISO code (e.g. /en) that is automatically added to the beginning of internal links (e.g. #anchor).
2. When I click a link in a language other than the default, I am taken to a page in the default language.
*ISO codes (e.g. /en) are not automatically added to links set with a root path (e.g. /pages/about).
In this article, we will introduce some tips and tricks to solve the above link problems that arise when adding languages (multilingual support) to Shopify, using Liquid conditional branching, filters, and objects.
Removed ISO code from in-page links
First, here is how to solve the problem when the in-page links set in the menu function do not work in languages other than the default.
Let's check the currently set menu type.
Go to your Shopify admin page > Sales Channels > Online Store and click the "Customize" button at the bottom right of the screen.
*The screen used for the explanation is from Dawn version 11.0.0.
Click on "Header" on the left side of the screen.
Check the "Desktop Menu Type" item.
Check the liquid file that corresponds to the currently selected menu type.
Below is a list of liquid files confirmed in Dawn version 11.0.0.
| Menu Type | Applicable liquid file |
|---|---|
| Dropdown | snippets/header-dropdown-menu.liquid |
| Mega Menu | snippets/header-mega-menu.liquid |
| Drawer | snippets/header-drawer.liquid |
*Before Dawn version 9.0.0, all menu types were written directly in sections/header.liquid.
Modify the relevant liquid file. (Since the drawer menu is displayed on smartphones, don't forget to modify snippets/header-drawer.liquid as well.)
When modifying a file from the management screen,
Go to your Shopify admin page > Sales Channels > Online Store and click the "..." button at the bottom right of the screen to "Edit Code".
When you open the liquid file that corresponds to your menu type, you will see the following text at the top:
{% comment %}
...省略
{% endcomment %}Below that add the following code:
{% assign remove = '/' | append: localization.language.iso_code -%}
{% assign target = remove | append: '#' -%}
There are three other corrections.
The following description
{{ link.url }}
Rewrite it as follows:
{%- if link.url contains target -%} {{ link.url | remove_first: remove }} {%- else -%} {{ link.url }} {%- endif -%}
The following description
{{ childlink.url }}
Rewrite it as follows:
{%- if childlink.url contains target -%} {{ childlink.url | remove_first: remove }} {%- else -%} {{ childlink.url }} {%- endif -%}The following description
{{ grandchildlink.url }}
Rewrite it as follows:
{%- if grandchildlink.url contains target -%} {{ grandchildlink.url | remove_first: remove }} {%- else -%} {{ grandchildlink.url }} {%- endif -%}
This will remove the ISO code that is prepended to the internal links, allowing them to work properly in languages other than the default.
Add ISO code to the link set in the root path
Next, here's how to solve the problem if you click a link in a non-default language but end up being taken to a page in the default language.
If you have set the root path link on the customization screen
If you directly enter the root path in the section link, the link will not change automatically when switching languages. Please set the link in the following way.
1. Click in the "Paste link or search" area and select the page you want to link to.
2. Click the "Save" button in the upper right corner of the screen.
If you need to set links using the root path for operational reasons, try the method introduced below, for example by using the "Custom Liquid" section.
If you have set a link to the liquid file using the root path
The href attribute of the corresponding link
*The /pages/handle part is optional.
<a href="/en/pages/handle">
Rewrite it as follows:
*If the default language is not Japanese, please replace ja with the ISO code for the default language.
<a href=" {%- if localization.language.iso_code != 'ja' -%} / {{ localization.language.iso_code }} {%- endif -%} /pages/handle">
By doing so, the links you set in the root path will have ISO codes added to them in languages other than the default, and the links will work properly when switching languages.
Shopify Tips: Solving link problems that arise when adding languages (multilingual support) Summary
In this article, we will explain the issues that arise when Shopify adds new languages (multilingual support).
- In-page links set using the menu function no longer work in languages other than the default.
- When I click a link in a language other than the default, I am taken to a page in the default language.
We introduced ways to solve problems such as those above using Liquid's conditional branching, filters, and objects.
To support English pages (multilingual/cross-border) on your Shopify store, you may also find it useful to refer to our separate article, " Shopify Tips: How to Change CSS Styles and Content for Each Language ."
I hope this helps you in building your Shopify website.
*Information current as of August 2023. Due to theme updates or changes to Shopify specifications, it may not be possible to set it up exactly as described in the article.
