Shopifyのローカライズ方法。「姓名」や「住所」の並び順を日本仕様に変更する

Eコマース, Shopify

近年日本でも徐々に増えてきているShopifyでの出店。
Shopify(ショッピファイ)というと世界で最も利用されている新世代のEC構築プラットフォームで、ノーコードで簡単にECサイトを構築・出店できるのが大きな特徴です。

しかし海外仕様のため、日本人を対象としたサービスを始める際、そのままサイトを構築すると日本人になじみのないUI(ユーザーインターフェース)になっている部分が多々あり、お困りの方も多いのではないでしょうか。

UI(ユーザーインターフェース)が、なじみのない使いにくいものになっていると、せっかくアクセスしてくれたお客様の離脱に繋がってしまうので、こういった部分の改善はとても重要です。
今回はそのような部分を、テーマをカスタマイズすることにより日本人向けのレイアウトにローカライズする方法を一部ご紹介いたします。

※今回は「debut」テーマの仕様を前提としています。別テーマを使用されている場合少し異なる点がある可能性があります。


– その1-
 会員登録時の姓名の位置が逆なのを直す。

デフォルトだとアカウント登録画面の氏名入力順が「名前」→「苗字」の順になっています。
こちらを日本仕様の「苗字」→「名前」に変更します。


デフォルトの状態】

オンラインストアの「テーマ」→【アクション】>「コードを編集する」画面に移動。

Templates > customers/register.orig.liquid を編集

LastName(姓)とFirstName(名)の順番を下記のように入れ替える。

<label for=”{{ formId }}-LastName”>{{ ‘customer.register.last_name’ | t }}</label>
<input type=”text” name=”customer[last_name]” id=”{{ formId }}-LastName” {% if form.last_name %}value=”{{ form.last_name }}”{% endif %} autocomplete=”family-name”>

<label for=”{{ formId }}-FirstName”>{{ ‘customer.register.first_name’ | t }}</label>
<input type=”text” name=”customer[first_name]” id=”{{ formId }}-FirstName” {% if form.first_name %}value=”{{ form.first_name }}”{% endif %} autocomplete=”given-name”>


変更後イメージ】

「苗字」→「名前」に並び変わりました。


– その2-
 アカウントページの姓名と住所の並びを変える

先ほどのアカウント登録画面と同様、記入項目が「名前」→「苗字」になっています。また、住所についての項目も日本人にはなじみのない並びになっているのでこちらも変更します。

・「新しい住所を追加する」を変更

デフォルトの状態

Templates > customers/addresses.liquid を編集

<h2>{{ ‘customer.addresses.add_new’ | t }}</h2>

 と、

{{ form.set_as_default_checkbox }}

の間の記述を編集します。

今回は以下のような並びに変更します。

先ほど説明した箇所を以下の記述に変更します。

<div class=”grid”>
<!–姓–>
<div class=”grid__item medium-up–one-half”>
<label for=”AddressLastNameNew”>{{ ‘customer.addresses.last_name’ | t }}</label>
<input type=”text” id=”AddressLastNameNew” name=”address[last_name]” value=”{{ form.last_name }}” autocomplete=”family-name”>
</div>

<!–名–>
<div class=”grid__item medium-up–one-half”>
<label for=”AddressFirstNameNew”>{{ ‘customer.addresses.first_name’ | t }}</label>
<input type=”text” id=”AddressFirstNameNew” name=”address[first_name]” value=”{{ form.first_name }}” autocomplete=”given-name”>
</div>
</div>

<div class=”grid”>
<!–国 / 地域–>
<div class=”grid__item medium-up–one-half”>
<label for=”AddressCountryNew”>{{ ‘customer.addresses.country’ | t }}</label>
<select id=”AddressCountryNew” name=”address[country]” data-default=”{{ form.country }}” autocomplete=”country”>{{ all_country_option_tags }}</select>
</div>

<!–郵便番号–>
<div class=”grid__item medium-up–one-half”>
<label for=”AddressZipNew”>{{ ‘customer.addresses.zip’ | t }}</label>
<input type=”text” id=”AddressZipNew” name=”address[zip]” value=”{{ form.zip }}” autocapitalize=”characters” autocomplete=”postal-code”>
</div>
</div>   

<div class=”grid”>
<div class=”grid__item”>
 <!–都道府県–><div id=”AddressProvinceContainerNew” style=”display:none”>
<label for=”AddressProvinceNew”>{{ ‘customer.addresses.province’ | t }}</label>
<select id=”AddressProvinceNew” name=”address[province]” data-default=”{{ form.province }}” autocomplete=”address-level1″></select>
</div>

<!–市区町村–>
<label for=”AddressCityNew”>{{ ‘customer.addresses.city’ | t }}</label>
<input type=”text” id=”AddressCityNew” name=”address[city]” value=”{{ form.city }}” autocomplete=”address-level2″>

<!–住所–>
<label for=”AddressAddress1New”>{{ ‘customer.addresses.address1’ | t }}</label>
<input type=”text” id=”AddressAddress1New” name=”address[address1]” value=”{{ form.address1 }}” autocomplete=”street-address address-line1″>

<!–建物名、部屋番号など–>
<label for=”AddressAddress2New”>{{ ‘customer.addresses.address2’ | t }}</label>
<input type=”text” id=”AddressAddress2New” name=”address[address2]” value=”{{ form.address2 }}” autocomplete=”street-address address-line2″>

<!–会社名–>
<label for=”AddressCompanyNew”>{{ ‘customer.addresses.company’ | t }}</label>
<input type=”text” id=”AddressCompanyNew” name=”address[company]” value=”{{ form.company }}” autocomplete=”organization”>   

<!–電話番号–>
<label for=”AddressPhoneNew”>{{ ‘customer.addresses.phone’ | t }}</label>
<input type=”tel” id=”AddressPhoneNew” name=”address[phone]” value=”{{ form.phone }}” autocomplete=”phone”>
</div>
</div>

※別のレイアウトに変更したい場合は並び順を変えるだけでなく、div要素で横幅を調整しているのでそちらも合わせて変更が必要です。


・「住所を編集する」を変更

デフォルトの状態】

Templates > customers/addresses.liquid を編集

<h2>{{ ‘customer.addresses.edit_address’ | t }}</h2>

 と、

<div class=”text-center”> {{ form.set_as_default_checkbox }}

の間の記述を編集します。

今回は以下のような並びに変更します。

先ほど説明した箇所を以下の記述に変更します。

<div class=”grid”>
<!–姓–>
<div class=”grid__item medium-up–one-half”>
<label for=”AddressLastName_{{ form.id }}”>{{ ‘customer.addresses.last_name’ | t }}</label>
<input type=”text” id=”AddressLastName_{{ form.id }}” name=”address[last_name]” value=”{{ form.last_name }}” autocomplete=”family-name”>
</div>

<!–名–>
<div class=”grid__item medium-up–one-half”>
<label for=”AddressFirstName_{{ form.id }}”>{{ ‘customer.addresses.first_name’ | t }}</label>
<input type=”text” id=”AddressFirstName_{{ form.id }}” name=”address[first_name]” value=”{{ form.first_name }}” autocomplete=”given-name”>
</div>
</div>

<div class=”grid”>
<!–国 / 地域–>
<div class=”grid__item medium-up–one-half”>
<label for=”AddressCountry_{{ form.id }}”>{{ ‘customer.addresses.country’ | t }}</label>
<select id=”AddressCountryNew” name=”address[country]” data-default=”{{ form.country }}” autocomplete=”country”>{{ all_country_option_tags }}</select>
</div>

<!–郵便番号–>
<div class=”grid__item medium-up–one-half”>
<label for=”AddressZip_{{ form.id }}”>{{ ‘customer.addresses.zip’ | t }}</label>
<input type=”text” id=”AddressZip_{{ form.id }}” name=”address[zip]” value=”{{ form.zip }}” autocapitalize=”characters” autocomplete=”postal-code”>
</div>
</div>

<div class=”grid”>
<div class=”grid__item”>
<!–都道府県–>
<div id=”AddressProvinceContainer_{{ form.id }}” style=”display:none”>
<label for=”AddressProvince_{{ form.id }}”>{{ ‘customer.addresses.province’ | t }}</label>
<select id=”AddressProvince_{{ form.id }}” name=”address[province]” data-default=”{{ form.province }}” autocomplete=”address-level1″></select>
</div>
</div>

<!–市区町村–>
<div class=”grid__item”>
<label for=”AddressCity_{{ form.id }}”>{{ ‘customer.addresses.city’ | t }}</label>
<input type=”text” id=”AddressCity_{{ form.id }}” name=”address[city]” value=”{{ form.city }}” autocomplete=”address-level2″>
</div>

<!–住所–>
<div class=”grid__item”>
<label for=”AddressAddress1_{{ form.id }}”>{{ ‘customer.addresses.address1’ | t }}</label>
<input type=”text” id=”AddressAddress1_{{ form.id }}” name=”address[address1]” value=”{{ form.address1 }}” autocomplete=”street-address address-line1″>
</div>

<!–建物名、部屋番号など–>
<div class=”grid__item”>
<label for=”AddressAddress2_{{ form.id }}”>{{ ‘customer.addresses.address2’ | t }}</label>
<input type=”text” id=”AddressAddress2_{{ form.id }}” name=”address[address2]” value=”{{ form.address2 }}” autocomplete=”street-address address-line2″>
</div>

<!–会社名–>
<div class=”grid__item”>
<label for=”AddressCompany_{{ form.id }}”>{{ ‘customer.addresses.company’ | t }}</label>
<input type=”text” id=”AddressCompany_{{ form.id }}” name=”address[company]” value=”{{ form.company }}” autocomplete=”organization”>
</div>

<!–電話番号–>
<div class=”grid__item”>
<label for=”AddressPhone_{{ form.id }}”>{{ ‘customer.addresses.phone’ | t }}</label>
<input type=”tel” id=”AddressPhone_{{ form.id }}” name=”address[phone]” value=”{{ form.phone }}” autocomplete=”phone”>
</div>
</div>

※別のレイアウトに変更したい場合は並び順を変えるだけでなく、div要素で横幅を調整しているのでそちらも合わせて変更が必要です。

いかがだったでしょうか。
多少の知識は必要ですが少し変更するだけで海外仕様のShopifyでも日本人向けにカスタマイズが可能です。
Shopifyについて他にもお困りの点がございましたら、ぜひ一度弊社にご相談ください。

アド・セイルへのお問合せはこちらから

この記事を書いた人

美貴 健太 イーコマースソリューション部 ディレクター
⚹⚹⚹
Shopifyは海外仕様で取っつきにくい、という印象を受ける方も多いかもしれませんが、このように解決できるところは多いので、ぜひ一度挑戦してみてください。

関連記事一覧