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