Shopifyで人気の無料テーマDawnでは、名前と住所入力欄が英語仕様になっています。
日本向けのストアの場合はかなり違和感があります。
そこで今回はDawnテーマの名前と住所の英語表記を日本語仕様にする方法を解説します。
日本向けのストアでは毎回設定していく必要があるので、ブックマークしておいておくと便利です！
目次
デフォルトの表示の確認
デフォルトでは名→姓・番地→市町村→都道府県→郵便番号という順番になっていて、日本語仕様のサイトとしては違和感のあるものになっていますので、日本仕様で郵便番号→都道府県→市町村→番地に変更していきます。
手順
事前準備
まずは事前準備でショップにアカウント登録機能を追加します。
管理画面の左下の「設定」から「お客様アカウント」→「ログインリンクを表示」をONにしてください。
※現在（2024/09/13）ではリンク先のお客様アカウントのバージョンを選択するの項目で「新規」が選択されているので、同じ実装をするときは「従来」を選択してください。
これでサイトに会員登録機が追加されました。
その後サイトに戻って会員登録をしておいてください。
※登録後ログアウトしておいてください
Shopifyアカウントで使用しているアドレス以外でないと登録が出来ません。
これで事前の準備は完了です。
変更箇所①
まずはストアの右上にある、人型のアイコンをクリックして、ログイン画面に進みます。
「アカウントを作成する」をクリックしてください。
まずは「姓」と「名」を逆にします。
管理画面に戻って、三点リーダーをクリックし「コードを編集」から編集画面に進んでください。
編集していくのは、「セクション」→「main-register.liquid」です。
52行目〜66行目を切り取って81行目の下に貼り付けます。
貼り付けが出来たら保存をして、先程のアカウント作成画面を確認してください。
無事に「姓」と「名」を逆にして日本仕様の表記にできました。
この要領であと2箇所も変更していきます。
変更箇所②
次の変更箇所はログイン後のアカウント管理画面です。
ストアログイン後、先程同様に人型アイコンをクリックしていただき、アカウント詳細画面に移動してください。
その後「住所を確認」→「新しい住所を追加」を押してください。
英語仕様になっているので、日本語仕様に変更していきます。
先ほど同様に管理画面の3点リーダーから、「コードを編集」をおしてコード編集にはいります。
今回編集するのは「セクション」→「main-addresses.liquid」になります。
コードを見ると39行目から先程の入力エリアに対応する項目になっていることがわかります。
ここを下記のように順番を並び替えてください。
（コピペの方は39行目〜170行目を削除して下記のコードをコピペしてください）
<div id="AddAddress">
<h2 id="AddressNewHeading">{{ 'customer.addresses.add_new' | t }}</h2>
{%- form 'customer_address', customer.new_address, aria-labelledBy: 'AddressNewHeading' -%}
<div class="field">
<input
type="text"
id="AddressLastNameNew"
name="address[last_name]"
value="{{ form.last_name }}"
autocomplete="family-name"
placeholder="{{ 'customer.addresses.last_name' | t }}"
>
<label for="AddressLastNameNew">{{ 'customer.addresses.last_name' | t }}</label>
</div>
<div class="field">
<input
type="text"
id="AddressFirstNameNew"
name="address[first_name]"
value="{{ form.first_name }}"
autocomplete="given-name"
placeholder="{{ 'customer.addresses.first_name' | t }}"
>
<label for="AddressFirstNameNew">{{ 'customer.addresses.first_name' | t }}</label>
</div>
<div class="field">
<input
type="text"
id="AddressCompanyNew"
name="address[company]"
value="{{ form.company }}"
autocomplete="organization"
placeholder="{{ 'customer.addresses.company' | t }}"
>
<label for="AddressCompanyNew">{{ 'customer.addresses.company' | t }}</label>
</div>
<div class="field">
<input
type="text"
id="AddressZipNew"
name="address[zip]"
value="{{ form.zip }}"
autocapitalize="characters"
autocomplete="postal-code"
placeholder="{{ 'customer.addresses.zip' | t }}"
>
<label for="AddressZipNew">{{ 'customer.addresses.zip' | t }}</label>
</div>
<div>
<label for="AddressCountryNew">{{ 'customer.addresses.country' | t }}</label>
<div class="select">
<select
id="AddressCountryNew"
name="address[country]"
data-default="{{ form.country }}"
autocomplete="country"
>
{{ all_country_option_tags }}
</select>
<svg aria-hidden="true" focusable="false" viewBox="0 0 10 6">
<use href="#icon-caret" />
</svg>
</div>
</div>
<div id="AddressProvinceContainerNew" style="display: none">
<label for="AddressProvinceNew">{{ 'customer.addresses.province' | t }}</label>
<div class="select">
<select
id="AddressProvinceNew"
name="address[province]"
data-default="{{ form.province }}"
autocomplete="address-level1"
></select>
<svg aria-hidden="true" focusable="false" viewBox="0 0 10 6">
<use href="#icon-caret" />
</svg>
</div>
</div>
<div class="field">
<input
type="text"
id="AddressCityNew"
name="address[city]"
value="{{ form.city }}"
autocomplete="address-level2"
placeholder="{{ 'customer.addresses.city' | t }}"
>
<label for="AddressCityNew">{{ 'customer.addresses.city' | t }}</label>
</div>
<div class="field">
<input
type="text"
id="AddressAddress1New"
name="address[address1]"
value="{{ form.address1 }}"
autocomplete="address-line1"
placeholder="{{ 'customer.addresses.address1' | t }}"
>
<label for="AddressAddress1New">{{ 'customer.addresses.address1' | t }}</label>
</div>
<div class="field">
<input
type="text"
id="AddressAddress2New"
name="address[address2]"
value="{{ form.address2 }}"
autocomplete="address-line2"
placeholder="{{ 'customer.addresses.address2' | t }}"
>
<label for="AddressAddress2New">{{ 'customer.addresses.address2' | t }}</label>
</div>
<div class="field">
<input
type="tel"
id="AddressPhoneNew"
name="address[phone]"
value="{{ form.phone }}"
autocomplete="tel"
placeholder="{{ 'customer.addresses.phone' | t }}"
>
<label for="AddressPhoneNew">{{ 'customer.addresses.phone' | t }}</label>
</div>
<div>
{{ form.set_as_default_checkbox }}
<label for="address_default_address_new">{{ 'customer.addresses.set_default' | t }}</label>
</div>
<div>
<button>{{ 'customer.addresses.add' | t }}</button>
<button type="reset">{{ 'customer.addresses.cancel' | t }}</button>
</div>
{%- endform -%}
</div>
ストアを確認すると、日本仕様に変更されているかと思います。
これで変更箇所②が終了です。
変更箇所③
先程の変更箇所②の部分のすぐ下に「デフォルト」という箇所があり、その下の「編集」を押すと、各項目がでてきます。
その中も英語仕様になっているので、同様の手順で変更していきます。
今回も編集するのは「セクション」→「main-addresses.liquid」になります。
「id=”EditAddress」と検索をしていただくと該当の項目が見つかります。
今回は196行目〜332行目を削除していただき、下記を貼り付けてください。
<div id="EditAddress_{{ address.id }}">
<h2>{{ 'customer.addresses.edit_address' | t }}</h2>
{%- form 'customer_address', address -%}
<div class="field">
<input
type="text"
id="AddressLastName_{{ form.id }}"
name="address[last_name]"
value="{{ form.last_name }}"
autocomplete="family-name"
placeholder="{{ 'customer.addresses.last_name' | t }}">
<label for="AddressLastName_{{ form.id }}">{{ 'customer.addresses.last_name' | t }}</label>
</div>
<div class="field">
<input
type="text"
id="AddressFirstName_{{ form.id }}"
name="address[first_name]"
value="{{ form.first_name }}"
autocomplete="given-name"
placeholder="{{ 'customer.addresses.first_name' | t }}">
<label for="AddressFirstName_{{ form.id }}">{{ 'customer.addresses.first_name' | t }}</label>
</div>
<div class="field">
<input
type="text"
id="AddressCompany_{{ form.id }}"
name="address[company]"
value="{{ form.company }}"
autocomplete="organization"
placeholder="{{ 'customer.addresses.company' | t }}">
<label for="AddressCompany_{{ form.id }}">{{ 'customer.addresses.company' | t }}</label>
</div>
<div class="field">
<input
type="text"
id="AddressZip_{{ form.id }}"
name="address[zip]"
value="{{ form.zip }}"
autocapitalize="characters"
autocomplete="postal-code"
placeholder="{{ 'customer.addresses.zip' | t }}">
<label for="AddressZip_{{ form.id }}">{{ 'customer.addresses.zip' | t }}</label>
</div>
<div>
<label for="AddressCountry_{{ form.id }}">
{{ 'customer.addresses.country' | t }}
</label>
<div class="select">
<select
id="AddressCountry_{{ form.id }}"
name="address[country]"
data-address-country-select
data-default="{{ form.country }}"
data-form-id="{{ form.id }}"
autocomplete="country">
{{ all_country_option_tags }}
</select>
<svg
aria-hidden="true"
focusable="false"
viewBox="0 0 10 6">
<use href="#icon-caret" />
</svg>
</div>
</div>
<div id="AddressProvinceContainer_{{ form.id }}" style="display:none;">
<label for="AddressProvince_{{ form.id }}">
{{ 'customer.addresses.province' | t }}
</label>
<div class="select">
<select
id="AddressProvince_{{ form.id }}"
name="address[province]"
data-default="{{ form.province }}"
autocomplete="address-level1"></select>
<svg
aria-hidden="true"
focusable="false"
viewBox="0 0 10 6">
<use href="#icon-caret" />
</svg>
</div>
</div>
<div class="field">
<input
type="text"
id="AddressCity_{{ form.id }}"
name="address[city]"
value="{{ form.city }}"
autocomplete="address-level2"
placeholder="{{ 'customer.addresses.city' | t }}">
<label for="AddressCity_{{ form.id }}">{{ 'customer.addresses.city' | t }}</label>
</div>
<div class="field">
<input
type="text"
id="AddressAddress1_{{ form.id }}"
name="address[address1]"
value="{{ form.address1 }}"
autocomplete="address-line1"
placeholder="{{ 'customer.addresses.address1' | t }}">
<label for="AddressAddress1_{{ form.id }}">{{ 'customer.addresses.address1' | t }}</label>
</div>
<div class="field">
<input
type="text"
id="AddressAddress2_{{ form.id }}"
name="address[address2]"
value="{{ form.address2 }}"
autocomplete="address-line2"
placeholder="{{ 'customer.addresses.address2' | t }}">
<label for="AddressAddress2_{{ form.id }}">{{ 'customer.addresses.address2' | t }}</label>
</div>
<div class="field">
<input
type="tel"
id="AddressPhone_{{ form.id }}"
name="address[phone]"
value="{{ form.phone }}"
autocomplete="tel"
placeholder="{{ 'customer.addresses.phone' | t }}">
<label for="AddressPhone_{{ form.id }}">{{ 'customer.addresses.phone' | t }}</label>
</div>
<div>
{{ form.set_as_default_checkbox }}
<label for="address_default_address_{{ form.id }}">
{{ 'customer.addresses.set_default' | t }}
</label>
</div>
<div>
<button>{{ 'customer.addresses.update' | t }}</button>
<button type="reset">{{ 'customer.addresses.cancel' | t }}</button>
</div>
{%- endform -%}
</div>
ストアを確認すると、日本仕様に変更されているかと思います。
これですべての項目が終了になります！
まとめ
今回は、名前と住所入力欄を日本仕様に変更する方法を解説しました！
Dawnテーマで日本向けのストアを構築する際は毎回修正する内容なので、ブックマークしてすぐに見返すことができるようにしておくのがおすすめです！
このブログでは他にもShopifyについて解説している記事を投稿していますので、あわせて参考にしてみてください。
あわせて読みたい
【Shopify】左右が見切れているスライダーの実装方法
Shopifyのテーマのデフォルトスライダー、使いやすいけどもっとリッチにしたい！ どのサイトも似たような印象になってしまう… このような方のための記事です。 今回は、...