今回はShopifyで会員登録画面を日本語仕様にする方法を解説します。Shopifyは海外のサービスのため、会員登録の項目について、順番が日本語仕様になっていません。氏名や住所の順番が日本人に馴染みのない仕様になっており、違和感があります。Shopifyのサイトを扱っている方は、お客様が違和感なく、スムーズに会員登録できるように日本語仕様に修正しましょう！必要なコードも一番最後に開示しています。
※無料テーマDawn(ver.13.0.1)を前提に解説します。
今回の成果物(Before/After)
完成イメージ
完成イメージは以下です。
今回は会員登録の最初の画面について、姓名の順番をカスタマイズします。このような要望はノーコードではできないので、対象箇所を探してコードの順番を入れ替えて対応します。
Dawnの標準仕様は名⇒性の順番で登録
標準仕様は完成イメージ左のような形式です。
海外仕様なので、姓⇒名の順番ではなく、名⇒性の順番で記入する仕様になっています。この仕様だと、日本人にとっては馴染みのない仕様で違和感があるので、右の仕様に変更します。
今回の実装ポイント
今回はコードの追加は不要で、姓名のコード部分を探し、順番を入れ替えるだけでOKです。この際にポイントとなるのは以下2点です
編集すべきファイルを特定する
大きく「コンソールログを活用する」「ディベロッパーツールを活用する」の2パターンがあります。VSCode等のツールを使えない人は前者、使える人は後者で行うのが良いと思います(VSCodeを使える場合はディベロッパーツールでクラスを特定し、検索にかけると対象箇所がすぐに特定できます)。コンソールログを活用する場合は、theme.liquidのbodyタグの最後に以下コードを追記することで調べることができます(コンソールログについては、本題とずれるので別記事で解説予定です)。
console.log("{{ template }}");
姓名のコードを特定する
姓名を出力しているコードがどこかを特定できれば、あとは順番を入れ替えるのみです。
コードの紹介
それではこれより、実際のコードを紹介していきます。
続きはログインすると閲覧できます
無料で登録/閲覧できますので、会員登録・ログインをお願います。
会員登録（会員登録がまだの方はこちら）
ログイン(会員登録済みの方はこちら)