Shopify で簡体字と繁体字を設定する

はじめに

Shopify を利用すると越境ECサイトが簡単に構築できて便利ですが、同じマーケットに対して中国向けの翻訳「中国語（簡体字）」と台湾向け（台湾・香港・マカオ向け）の翻訳「中国語（繁体字）」を同時に設定することができません（2022/6/17 現在）（サポートに確認済み）。

同じような問題に直面した方のために解決策を残しておきます。
具体的には、画像のようにサイトの言語の設定で簡体字と繁体字を表示したい方向けです。

本記事の設定はテーマのコードを編集するため liquid (Shopifyのテーマ編集言語) について最低限の知識が必要になります。

なぜ簡体字と繁体字が同時に設定できないのか

shopify は各言語に対応する URL を xxx.myshopify.com/<言語の略称>/ のように設定します。例えば英語だと xxx.myshopify.com/en/ となります。

この言語の略称は事前に Shopify で定められており、簡体字と繁体字はどちらとも zh に設定されています。そのため、どちらも xxx.myshopify.com/zh/ となってしまい競合が起きるため、どちらか一方しか設定できないようになっています。

解決策

言語別にマーケットを作成することで解決します。

例えば日本のマーケットが xxx.myshopify.com だった場合に、その英語翻訳を設定すると xxx.myshopify.com/en となりますが、アメリカのマーケットを作成して言語を英語に設定すと xxx.myshopify.com/en-us のようになります（usの部分は任意の文字列を設定できます）。中国語だと xxx.myshopify.com/zh-us です。

そのため、マーケットを下記のように設定します。
下記は一例ですので任意の国や言語で設定してください。
（通貨は全て日本円にします）

日本（主要マーケット）
マーケットのドメインとサブフォルダ：プライマリードメインのみ
マーケットの言語：日本語
=> xxx.myshopify.com

マーケット名：アメリカ
国/地域：アメリカ
マーケットのドメインとサブフォルダ：サブフォルダ us
マーケットの言語：英語
=> xxx.myshopify.com/en-us

中国語 (簡体字)
国/地域：中国
マーケットのドメインとサブフォルダ：サブフォルダ si
マーケットの言語：中国語 (簡体字)
=> xxx.myshopify.com/zh-si

中国語 (繁体字)
国/地域：台湾・香港・マカオ
マーケットのドメインとサブフォルダ：サブフォルダ tr
マーケットの言語：中国語 (繁体字)
=> xxx.myshopify.com/zh-tr

これで、繁体字を表示させたい場合は xxx.myshopify.com/zh-si を、簡体字で表示させたい場合は xxx.myshopify.com/zh-tr にアクセスすることで 繁体字/簡体字 の切り替えができるようになりました。

ここで気になるのが、「顧客の所在地とアクセス先のマーケットが違う場合（例えば台湾在住の顧客が中国語（簡体字）にアクセスした場合）に問題は起きないのか」ということですが、表示する通貨を統一していれば問題ありません。各マーケット別に通貨の設定をしている場合は、言語を変更した際にその通貨に切り替わってしまう（例えば日本在住の顧客が英語表記で閲覧するために xxx.myshopify.com/en-us にアクセスした場合、ドル表記（設定による）ので注意が必要です。

今回は言語を使用している国別にマーケットを分けましたが、例えばアメリカを作成せずに日本のマーケットの言語を日本語及び英語とすることで、xxx.myshopify.com/en-us ではなく xxx.myshopify.com/en のようにすることも可能です。

テーマによる初期表示

上記で行ったマーケットの設定では、国/地域セレクター に反映されます。
Shopify の無料テーマ Dawn の場合は下の画像のように表示されます。

例えば「アメリカ」のマーケットを作成せずに「日本」のマーケットの言語に日本語及び英語を設定していた場合は、ここには「アメリカ合衆国」は表示されません。代わりに「日本」を選択した際に「言語セレクター」で英語と日本語を切り替えられるようになります。

本記事が目的とする表示方法とは異なりますので、テーマファイルを編集する必要があります。

テーマの編集

コードはテーマによるので、利用しているテーマのコードの該当箇所を探して編集してください。もしくはコードを追加します。

コードの具体的な編集方法は、書くと長くなるので割愛します。
（liquid の編集を経験されたことのある方は問題なく書けると思います）

今回設定した情報は localization object を参照することで取得できます。
また localization form を利用してセレクターを作成することができます。

追記：コードを書くきっかけとして簡単なコードを載せておきます。例として簡易的に書いたコードなのでそのままでは使えません。

localization_form

{%- capture localization_form -%}
  {%- form 'localization' -%}
    {%- if country_selector -%}
      <div class="localization_form_wrap">
        <input type="hidden" name="country_code" value="{{ localization.country.iso_code }}">
        <span class="hidden">国/地域</span>

        <button type="button" class="SelectButton">
          {%- render 'icon' with 'language' -%}
        </button>

        <div class="popover">
          <div class="popover_inner">
            {%- assign cr = localization.country.iso_code -%}
            <button type="submit" name="country_code" {% if cr == 'US' %}class="is-selected{% endif %} value="US">
              English
            </button>
            <button type="submit" name="country_code" {% if cr == 'CN' %}class="is-selected{% endif %} value="CN">
              简体中文
            </button>
            <button type="submit" name="country_code" {% if cr == 'TW' or cr == 'HK' or cr == 'MO' %}class="is-selected{% endif %} value="TW">
              繁體中文
            </button>
            <button type="submit" name="country_code" {% if cr == 'JP' %}class="is-selected{% endif %} value="JP">
              日本語
            </button>
          </div>
        </div>
      </div>
    {%- endif -%}
  {%- endform -%}
{%- endcapture -%}

最後に

早く、簡体字もしくは繁体字に割り振られている略称が変更されて言語セレクターで選択できるようになるといいですね。

P.S.
Shopify 関連のお仕事のご相談承ります。札束（諭吉）を握りしめてご連絡ください。