It is relatively easy to translate your Shopify store's English page (multilingual/cross-border) using an app such as Shopify Translate & Adapt, but you may encounter the following issues:
1. There is a lot of English text, so the text does not fit in the menu and is dropped off into columns.
*It is necessary to specify the appropriate style according to the language. (For English pages, make the font size of the menu smaller.)
2. You have content that you want to provide differently depending on the language.
*It is necessary to display different content on the Japanese page and the English page.
In this article, we will introduce some tips for making your Shopify store's English page (multilingual/cross-border) compatible, such as assigning different classes to each language to switch CSS styles and displaying different content depending on the language.
Add a different class to the <html> tag for each language
First, let's look at how to specify the appropriate style for your language.
Modify the layout/theme.liquid file.
When modifying a file from the management screen,
Go to your Shopify admin page > Sales Channels > Online Store and click the "..." button in the bottom right corner to "Edit Code".
*The screen used for the explanation is from Dawn version 10.0.0.
Replace the following <html> tag with
<html class="no-js" lang=" {{ request.locale.iso_code }} ">
Rewrite it as follows:
<html class="no-js {{ localization.language.iso_code }} " lang=" {{ request.locale.iso_code }} ">
By doing so, a class with the same name as the ISO code for the currently selected language (ja, en, etc.) will be added to the <html> tag, making it possible to adjust styles for each language.
* Operation has been verified using Dawn and Craft version 10.0.0.
You can get the ISO code of the currently selected language in your store with the liquid object {{ localization.language.iso_code }} .
The CSS is specified as follows:
*The element part is optional.
.ja element {
日本語ページ表示時のスタイル
}
.en element {
英語ページ表示時のスタイル
}
Serving different content depending on the language
Next, we will show an example of displaying different content on Japanese and English pages using liquid objects and conditional branching. (You can also use a translation app to rewrite content other than that written directly in the liquid file, but this method is useful when you have sections or snippets that you want to display only in a specific language.)
Add the following statement where you want to separate the output:
{% if localization.language.iso_code == 'ja' -%}
日本語ページのみで表示する内容
{%- elsif localization.language.iso_code == 'en' -%}
英語ページのみで表示する内容
{%- endif %}
This will allow you to switch between the display content of the Japanese page and the English page.
Of course, by adding conditional branching, it can also support other languages.
*Please make conditional branching using two-letter IETF language tags (ISO 639-1) such as ja or en.
Shopify Tips: How to change CSS styles for each language Summary
In this article, we will explain the issues that arise when supporting English pages (multilingual/cross-border) on a Shopify store.
- Because there are a lot of English characters, the text does not fit in the menu and is dropped down a column.
- There is content that you want to provide differently depending on the language.
We introduced how to solve these problems using liquid objects and conditional branching.
For information on supporting English pages (multilingual/cross-border) on your Shopify store, you may also find the article " Shopify Tips: Resolving link issues that arise when adding languages (multilingual support) " useful.
I hope this helps you in building your Shopify website.
*Information current as of July 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.
