定期購買アプリのCSを担当しています田口です!
この頃、近所を散歩していると梅の花が咲いていて、
春の訪れにいつもよりちょっと浮かれた毎日を過ごしております。
ただ、気持ちは春に向けて全速力なのに、服装は厚手のコートなんか着ていつまでも凍えているので、なかなかアンバランスでむずがゆいですね。。。
弊社へのお問合せも、4月頭を目安にオンラインストアを始めるストアさまからのお問合せが増えている今日この頃。
今回は、そんなこれからShopifyでストア構築を始められる方向けに、Shopifyカスタマイズのキホンのキである「Shopify会員フォームの「姓名」「住所」の並び順を日本仕様にカスタマイズする」ことについてお話していきます!
はじめに:この記事は次のような方におすすめです
- これからShopifyでストア構築を行う事業者の方
- Shopify構築を始めたばかりの方
- Shopifyのカスタマイズを勉強中の方
目次
- Shopifyは海外製のECプラットフォーム
- カスタマイズbefore・after
- 会員フォームを日本仕様にカスタマイズする
- 「姓名」の並び順を変更する
- 「住所」の並び順を変更する
- まとめ
Shopifyは海外製のECプラットフォーム
Shopify(ショピファイ)は、世界各国で最も利用されているECプラットフォームですね。
インフラが強いことから日本の大手企業も続々とShopifyでEC構築を行なっており、近年は日本でもメジャーなプラットフォームの選択肢となりました。
そんなShopifyですが、グローバル向けのシステムになっているため日本の商習慣に合わせてユーザーに購入体験をしてもらうためには、ちょっとした工夫が必要だったりします。
今回カスタマイズを行う部分は以下の2点です。
- 会員登録時のお客様姓名の並び順を変更する
- 住所登録フォームの「姓名」、「住所」の並び順を変更する
カスタマイズBefore・After
カスタマイズのBefore・Afterは以下の通りです。
会員フォームを日本仕様にカスタマイズする
会員登録時のお客様「姓名」の並び順を変更する
1.まずは、現状の設定を確認しましょう。ストアヘッダー部分の人型アイコンをクリックしてください。
※人型アイコンが表示されていない場合は、下記の手順で表示させてください。
Shopify管理画面>設定>お客様アカウント>「オンラインストアのヘッダーとチェックアウト時にログインリンクを表示する」をチェックオン
2.「アカウントを作成する」をクリックします。
3.この「名」と「姓」の並び順をコードの編集にて変えていきます。
4.Shopify管理画面>オンラインストア>テーマ>「・・・」>コードを編集を開きます。
※今回はDawnのバージョン13.0.1を使います。テーマによってこの後出てくるファイル名が異なる場合がありますので、ご注意ください。
5.変更箇所のファイル(パーツ)を特定するために、コードを「theme.liquid」に追加します。
レイアウト>theme.liquidを選択して開きます。
6.theme.liquidの</body>の内側に下記のスクリプトを追加します。
<!-- theme.liquid最下部 -->
<script>console.log("{{ template }}");</script>
</body>
7.アカウント作成画面を開き、デベロッパーツール>Consoleを開きます。「customers/register」と表示されています。
8.コード編集画面を開き、「register」を検索します。ファイルが見つかりました。「customers/register.json」の中を確認すると「main-register」というセクションファイルを呼び出していることがわかります。
<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></div>タグで一括りになっているので順番を入れ替えて保存をすると下画像のようになります。
10.アカウントページをリロードして、変更が反映されていることを確認しましょう。「姓」と「名」の並び順が入れ替わっていますね。
住所登録フォームの「姓名」、「住所」の並び順を変更する
1.まずは、現在の表示を確認するためにアカウントページにログインしてください。ログイン後に、「住所を確認」をクリックします。新規で住所を追加できるフォームが表示されました。この「名」と「姓」、住所の並び順が海外仕様になっているのをコードの編集にて変えていきます。
2.住所登録フォームでデベロッパーツールを開き、Consoleを確認します。「customers/addresses」と表示されています。住所登録フォームはこちらのファイルを編集していきましょう。
3.コード編集画面で「address」と検索すると「customers/addresses.json」が表示されます。中を確認すると、「main-addresser」というセクションファイルを呼び出していることがわかります。
4.セクション内にある「main-register.liquid」ファイルを開き、まずは「姓」と「名」の順番を入れ替えましょう。下記コード部分の順番を入れ替えます。
<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="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></div>タグで一括りになっているので順番を入れ替えて保存をすると下画像のようになります。
5.住所登録フォームをリロードして、変更が反映されていることを確認しましょう。「姓」と「名」の並び順が入れ替わっていますね。
6.次に住所の順番を海外仕様から日本仕様に入れ替えましょう。下記コード部分の順番を入れ替えます。
<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="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="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>
<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">
<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="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></div>タグで一括りになっているので順番を入れ替えて保存をすると下画像のようになります。
※今回は並び順を変更するだけですが、フォームの形式を整えたりすることも可能です。また、都道府県のプルダウンの並び順がデフォルトのままになっているので北海道→沖縄県の順番に変更することも可能です。
💡ちょっと得する豆知識
都道府県のプルダウンの順番をデフォルトではなく、北海道から沖縄県の順番い変更するには下記の手順を行なってください。
1.sections/main-addresses.liquidを開きます。
2.{{ all_country_option_tags }}の位置を探します。
(2箇所あります)
3.{{ all_country_option_tags }}部分を下記のコードに変更してください。
{{ all_country_option_tags | replace: '["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","大阪府"]', '["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","沖縄県"]'}}
4.保存を行い住所登録フォームの都道府県のプルダウンを確認してください。北海道→沖縄県の並び順になっていますね。
=========================================
6.住所登録フォームをリロードして、変更が反映されていることを確認しましょう。住所の並び順が入れ替わっていますね。
まとめ
今回はShopifyの無料テーマの中で人気があるDawnでのカスタマイズを行いました。
海外仕様のフォームを日本仕様に変えることは、ユーザーの利便性だけでなくストアへの安心感にも繋がる部分になりますので必須でカスタマイズしてしまいましょう!
※テーマによってコードの内容やファイル名が異なります。
※本記事で実装の保証は出来ませんので、実装する際はご自身で調べていただきながら実装後のテストも必ず行うようにしてください。