姓名の順番を変える
日本では苗字を先に入力するのが一般的。
ほとんどのテーマが海外仕様なので姓名が逆になっています。
簡単なカスタマイズですが、こちらの順番を入れ替えます。
liquidファイルを編集
編集するファイルは以下の2つ。（テーマによって異なる場合があります）
- register.liquid（register.json）
- addresses.liquid（addresses.json）
「register.liquid」はアカウント登録画面のファイルで、「addresses.liquid」が住所の登録・編集画面のファイルです。
それぞれ「/templates/customers」内に入っておりますが、2.0対応のテーマの場合はJSONファイルになっている場合がありますので、「/sections」より読み込んでいるファイルを開いてください。
以下はDawnを例にした場合です。
name属性に注目し、「customer[last_name]」が姓、「customer[first_name]」が名の入力フォームなのでそのソースを探し<div>タグで囲います。
<div class="name-field">
<div class="field">
<input
type="text"
name="customer[first_name]"
id="RegisterForm-FirstName"
{% if form.first_name %}value="{{ form.first_name }}"{% endif %}
autocomplete="given-name"
placeholder="{{ 'customer.register.first_name' | t }}"
>
<label for="RegisterForm-FirstName">
{{ 'customer.register.first_name' | t }}
</label>
</div>
<div class="field">
<input
type="text"
name="customer[last_name]"
id="RegisterForm-LastName"
{% if form.last_name %}value="{{ form.last_name }}"{% endif %}
autocomplete="family-name"
placeholder="{{ 'customer.register.last_name' | t }}"
>
<label for="RegisterForm-LastName">
{{ 'customer.register.last_name' | t }}
</label>
</div>
</div>CSSを追記
単純にHTMLを編集し順番を入れ替えるのが手っ取り早いかもしれませんが、越境ECサイトとしておかしな事になってしまいますので、言語が日本語の場合のみ逆になる様にCSSを追記します。
.customer .name-field {
display: flex;
justify-content: space-between;
gap: 1.5rem;
}
.customer .name-field .field {
flex: 1;
}
[lang="ja"] .customer .name-field {
flex-direction: row-reverse;
}CSSを簡単に説明しますと、フレックスボックスで横並びにし、言語が日本語の場合のみ逆になります。
Dawnの場合は「customer.css」に追記すれば、アカウント関係の画面全てに反映されます。
addresses.liquidも同様に、name属性に「address[last_name]」と「address[first_name]」が含まれているソースを<div>タグで囲えば、日本語の場合のみ順番が入れ替わります。
住所登録用と編集用の2箇所ありすので、両方適用してください。
住所の順番を変える
liquidファイルを編集
名前同様に住所も海外仕様なので、こちらも順番を入れ替えないと日本のユーザーにはわずらわしいですね。
こちらも同様に<div>タグで囲いフレックスボックスで順番を調整します。
<div class="address-field">
<div class="field address1">
<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 address2">
<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 city">
<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 country">
<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" class="field province" 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 zip">
<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>フィールド数が多いのでそれぞれにクラスを付与しました。
CSSを追記
続いてCSSを追記します。
[lang="ja"] .customer .address-field {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 2rem 1.5rem;
margin-bottom: 2rem;
}
[lang="ja"] .customer .address-field .field {
width: calc(50% - 1.5rem / 2);
margin: 0;
}
[lang="ja"] .customer .address-field .address1,
[lang="ja"] .customer .address-field .address2 {
width: 100%;
}
[lang="ja"] .customer .address-field .country {
order: 1;
}
[lang="ja"] .customer .address-field .zip {
order: 2;
}
[lang="ja"] .customer .address-field .province {
order: 3;
}
[lang="ja"] .customer .address-field .city {
order: 4;
}
[lang="ja"] .customer .address-field .address1 {
order: 5;
}
[lang="ja"] .customer .address-field .address2 {
order: 6;
}
このCSSを追記すれば、言語が日本語の場合のみ住所の順番を入れ替える事ができ、住所1と2は全幅、それ以外は2列になります。
テーマのデザインに合わせて、HTMLやCSSは調整してください。
日本を選択済みにする
先程ご紹介した通り、日本仕様にフォームを並べ替えたとしても「国/地域」を設定しない限り、「都道府県」の入力フォームは出てきません。
これは国によって都道府県の他に州や省などがない地域の仕様なので、海外販売を視野にいれているのなら、これがスタンダードになります。
ただし、日本国内のみを対象に販売している場合、住所登録フォームで不要になってきますし、特に日本は最後の方にあるので、この操作がかなりわずらわしくなります。
いっそのこと「type="hidden"」で見えないようにすることも可能ですが、テーマによっては都道府県の入力フォームと連動しているので、JSも一緒に編集しないとエラーが出て登録や編集ができなくなる事もあります。
日本だけを出力させる
「{{ all_country_option_tags }}」という国を出力させるタグがありますので、それを以下のコードに差し替えます。
{%- liquid
assign option_tags = all_country_option_tags | newline_to_br | split: '<br />'
for option_tag in option_tags
if option_tag contains 'Japan'
echo option_tag
endif
endfor
-%}簡単に説明しますと、出力される<option>タグを配列にして、Forループで出力し、「Japan」が含まれている<option>タグのみ出力されるようにif分岐させてあります。
これでデフォルトで「日本」だけが出力させる<select>フォームになり、都道府県が最初から表示された状態になります。
日本以外は選択不可にする
一応、日本以外は残したいけど選択不可にすることも可能です。
その際はif分岐を以下のように設定します。
{%- liquid
assign option_tags = all_country_option_tags | newline_to_br | split: '<br />'
for option_tag in option_tags
if option_tag contains 'Japan'
echo option_tag | replace: 'option', 'option selected'
else
echo option_tag | replace: 'option', 'option disabled'
endif
endfor
-%}「replace」を使い日本の<option>タグには「selected」、それ以外には「disabled」が付与されるようにしてあります。
これで、デフォルトで日本が選択され、他国は選択不可になります。
日本を一番最初に出力させる
全国表示させたいけど、日本がメインだから一番最初に出力させたい場合は以下のように設定します。
{%- liquid
assign option_tags = all_country_option_tags | newline_to_br | split: '<br />'
for option_tag in option_tags
if option_tag contains 'Japan'
echo option_tag | replace: 'option', 'option selected'
endif
endfor
for option_tag in option_tags
unless option_tag contains 'Japan'
echo option_tag
endunless
endfor
-%}日本だけを出力させるコードに加え、日本以外はunless分岐で2回目のForループ出力をさせます。
これで、日本が選択された状態で他国も選択できるようになります。
IF分岐で出力させる
多言語サイトの場合だと、日本中心の仕様では不都合になります。
その際は元のコードを活かしつつ、ロケールが日本語の場合のみ適用されるよう、IF分岐で出力できます。
{%- liquid
if request.locale.iso_code == 'ja'
assign option_tags = all_country_option_tags | newline_to_br | split: '<br />'
for option_tag in option_tags
if option_tag contains 'Japan'
echo option_tag | replace: 'option', 'option selected'
endif
endfor
else
echo all_country_option_tags
endif
-%}言語が日本語の場合は日本のみ表示され、それ以外は通常の国選択が出力されます。
都道府県の並び順を変える
「都道府県」の並び順を変えられないかとよく聞かれます。
というのもShopifyのデフォルトではAZ順で出力されるので、愛知県からの並びになっております。
これを北海道から沖縄の見慣れた順に並べ替えるのも、同じ箇所のカスタマイズで可能です。
{%- liquid
assign before = '["Aichi","愛知県"],["Akita","秋田県"],["Aomori","青森県"],["Chiba","千葉県"],["Ehime","愛媛県"],["Fukui","福井県"],["Fukuoka","福岡県"],["Fukushima","福島県"],["Gifu","岐阜県"],["Gunma","群馬県"],["Hiroshima","広島県"],["Hokkaidō","北海道"],["Hyōgo","兵庫県"],["Ibaraki","茨城県"],["Ishikawa","石川県"],["Iwate","岩手県"],["Kagawa","香川県"],["Kagoshima","鹿児島県"],["Kanagawa","神奈川県"],["Kumamoto","熊本県"],["Kyōto","京都府"],["Kōchi","高知県"],["Mie","三重県"],["Miyagi","宮城県"],["Miyazaki","宮崎県"],["Nagano","長野県"],["Nagasaki","長崎県"],["Nara","奈良県"],["Niigata","新潟県"],["Okayama","岡山県"],["Okinawa","沖縄県"],["Saga","佐賀県"],["Saitama","埼玉県"],["Shiga","滋賀県"],["Shimane","島根県"],["Shizuoka","静岡県"],["Tochigi","栃木県"],["Tokushima","徳島県"],["Tottori","鳥取県"],["Toyama","富山県"],["Tōkyō","東京都"],["Wakayama","和歌山県"],["Yamagata","山形県"],["Yamaguchi","山口県"],["Yamanashi","山梨県"],["Ōita","大分県"],["Ōsaka","大阪府"]' | escape
assign after = '["","---"],["Hokkaidō","北海道"],["Aomori","青森県"],["Iwate","岩手県"],["Miyagi","宮城県"],["Akita","秋田県"],["Yamagata","山形県"],["Fukushima","福島県"],["Ibaraki","茨城県"],["Tochigi","栃木県"],["Gunma","群馬県"],["Saitama","埼玉県"],["Chiba","千葉県"],["Tōkyō","東京都"],["Kanagawa","神奈川県"],["Niigata","新潟県"],["Toyama","富山県"],["Ishikawa","石川県"],["Fukui","福井県"],["Yamanashi","山梨県"],["Nagano","長野県"],["Gifu","岐阜県"],["Shizuoka","静岡県"],["Aichi","愛知県"],["Mie","三重県"],["Shiga","滋賀県"],["Kyōto","京都府"],["Ōsaka","大阪府"],["Hyōgo","兵庫県"],["Nara","奈良県"],["Wakayama","和歌山県"],["Tottori","鳥取県"],["Shimane","島根県"],["Okayama","岡山県"],["Hiroshima","広島県"],["Yamaguchi","山口県"],["Tokushima","徳島県"],["Kagawa","香川県"],["Ehime","愛媛県"],["Kōchi","高知県"],["Fukuoka","福岡県"],["Saga","佐賀県"],["Nagasaki","長崎県"],["Kumamoto","熊本県"],["Ōita","大分県"],["Miyazaki","宮崎県"],["Kagoshima","鹿児島県"],["Okinawa","沖縄県"]' | escape
assign option_tags = all_country_option_tags | newline_to_br | split: '<br />'
for option_tag in option_tags
if option_tag contains 'Japan'
echo option_tag | replace: 'option', 'option selected' | replace: before, after
endif
endfor
for option_tag in option_tags
unless option_tag contains 'Japan'
echo option_tag
endunless
endfor
-%}日本の<option>タグにはdata-provinces属性で都道府県が定義されており、その順番通りに都道府県のセレクトフォームに反映される仕組みになっています。
そこで「before」でデフォルトの並び順を、「after」で希望する並び順をそれぞれ定義して文字列をエスケープ。日本の<option>タグに対し「replace」で置換させます。
デフォルトで値を持たない<option>タグが表示されるよう、「after」の最初には「["","---"]」を加えてあります。
これで、日本向けの住所登録フォームができました。
住所編集フォームも忘れずに同様のカスタマイズをしてください。
住所自動入力を実装する
テーマによってはautocomplete属性でブラウザ機能の住所自動入力には対応していますが、郵便番号だけ入力したら後は番地や建物入力くらいにすれば、ユーザビリティが向上に繋がるかもしれません。
YubinBangoをダウンロードする
簡単に住所自動入力を実装するには、YubinBangoというJSライブラリを使います。
まずは「yubinbango.js」をダウンロードしてください。
YubinBango
liquidファイルを編集
「addresses.liquid」に「yubinbango.js」を読み込みます。
まずは以下のコードをliquidファイルの上部に貼り付けてください。
{{ 'yubinbango.js' | asset_url | script_tag }}次にフォームにクラスを付けていきます。
まずは<form>タグに「h-adr」というクラスを付けます。
<form>タグがliquidで出力されている場合は以下を参考にクラスを付与し、その下に<span>タグを貼り付けます。
{%- form 'customer_address', customer.new_address, aria-labelledBy: 'AddressNewHeading', class: 'h-adr' -%}
<span class="p-country-name" style="display:none;">Japan</span>続けて都道府県を入力するフォームを<input>タグに変更します。
Dawnの場合は以下のタグを入れ替えます。
<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>↓<select>を<input>タグに差し替え
<input type="text" id="AddressProvinceNew" class="p-region" name="address[province]" value="{{ form.province }}" autocomplete="address-level1" placeholder="{{ 'customer.addresses.province' | t }}">
ついでにクラス「class="p-region"」を付与してあります。
そして、以下を参考に各入力フォームにクラスを付けてください。
- 郵便番号（zip）：class="p-postal-code"
- 都道府県（province）：class="p-region"
- 市区町村（city）：class="p-locality"
- 住所（address1）：class="p-street-address"
- 建物名、部屋番号など（address2）：class="p-extended-address"
JSファイルを編集
恐らくほとんどのテーマが国選択後に都道府県が表示させるようJSで制御されています。
都道府県入力を<input>タグに変更したことで、スクリプトエラーが出る可能性が高く、正常に動作しなくなる場合があります。
その際はJSファイルを編集して、その機能を無効にする必要があります。
Dawnの場合はまず「customer.js」内の「this._setupCountries();」をコメントアウトします。
constructor() {
this.elements = this._getElements();
if (Object.keys(this.elements).length === 0) return;
// this._setupCountries();
this._setupEventListeners();
}続けて「_setupCountries」を丸ごとコメントアウトします。
// _setupCountries() {
// if (Shopify && Shopify.CountryProvinceSelector) {
// // eslint-disable-next-line no-new
// new Shopify.CountryProvinceSelector('AddressCountryNew', 'AddressProvinceNew', {
// hideElement: 'AddressProvinceContainerNew'
// });
// this.elements.countrySelects.forEach((select) => {
// const formId = select.dataset.formId;
// // eslint-disable-next-line no-new
// new Shopify.CountryProvinceSelector(`AddressCountry_${formId}`, `AddressProvince_${formId}`, {
// hideElement: `AddressProvinceContainer_${formId}`
// });
// });
// }
// }以上です。
他のテーマの場合は、該当するJSファイル内を「AddressCountryNew」などで検索し、制御しているコードを見つけてコメントアウトしてください。
この作業はJavascriptの知識がないと難しい作業で、少し間違えただけでテーマ全体の動作に影響が出る場合があります。
ご自身でやる場合は必ずバックアップをとり、注意して作業してください。