ShopoifyデフォルトテーマになっているDawnですが、電話帳ページで新規住所登録しようとするとデフォルトでは、都道府県のセレクターは表示されていない状態です。
国/地域を選択することで、国に持たせてあるデータを都道府県としてJavaScriptで表示してくれています！
（なので、中国とか選択すると省のセレクターが表示されます）
ですが、新規住所登録・編集をしようとした時に、都道府県が表示されていないと何か不自然ですよね。
それに対しての対応策として…
案１、テーマの翻訳設定で、国/地域の後に「国を選択すると、都道府県が表示されます。」の文言を追加する（グローバル対応、ノーコードカスタム）
案２、テーマのコードをカスタムして、デフォルトで日本が表示されている状態で都道府県も表示させている状態にする（グローバル対応、コーディング）
にする方法があるかと思いました。
今回は、案２のテーマのコードをカスタムしてデフォルトで日本が表示されている状態で都道府県も表示させている状態を解説していきます。
必ずやってください
カスタム前に必ずやること！
それは、バックアップをとる！！！！です！
プロジェクトによっては、Git管理出来ないものもあるかも知れません。そのような時は、必ずテーマを複製してコードを間違えても戻せる状態を作っておいてください。
コードをカスタムする （Dawn バージョン5.0.0）
コードをカスタムすると言ってもさほど、難しいことはしません。
数文字追加するだけなので、ご安心ください。あと、ここでは趣旨が違うので、テーマエディターの開き方は割愛させていただきます！
カスタム方法
1、Dawnテーマのcustomer/addresses.liquidファイルを開きます。
２、５８行目のコードを次のコードに変更 data-default="{{ form.country | default: 'Japan' }}"
３、164行目のコードを次のコードに変更 data-default="{{ form.country | default: 'Japan' }}"
以上です！
コードの内容
デフォルトのコードでは、data-default="{{ form.country }}"です。
こちら、フォームの国のデータをデーフォルトデータとして設定することになりますが、新規登録なので基本国データを持っていることがなく、空の状態になり、ページを開いた時の状態では都道府県は表示されていない状態になります。
こちらに、フィルターのデフォルト機能を使い（| default: "Japan"の部分）"Japan"という値を持たせてやることで、デフォルトで日本の設定と都道府県の表示することが可能です。
（３番は、編集のためのフォームなので、基本デフォルトのデータは持っていますが、念の為に追加します）
カスタム時の注意点
多分案件によっては、「国の表示いらないから消して！」ということは少なからずあるかと思います。
ただ、消してと言われたからといい、コードをそのまま消さないでください。理由は２つ。
１、国は必須項目
テーマ全般的に言えることですが、アドレスフォーム内に国を入力するコードは必須です。
国を入力するものがないと、うまく登録してくれません。
表示したくない場合、最低でも<input type="hidden" name="address[country]">はどこかに入力してください。
2、JavaScriptがエラーになる
Dawnテーマでは、国のセレクターの値をJavaScript側でみているので、そのまま丸々消してしまうとエラーが出てしまい、ページ自体が機能しなくなるので注意です。
国の表示がいらない場合は、カスタム方法の２番、３番をした後に、国セレクターの外側にある
まとめ
社内から上がった「都道府県がない！」という声から、いろんな人が困ってそうかも…と思ったので記事にしてみました！
確かに都道府県…無いと変だし、急に出てきてもわかりにくいし、ユーザーライクなサイトにするのであれば、少しのコードで使いやすくなるのでこちらの記事を参考にカスタムされてみてください。
あと、
ARCHETYPでは、Shopifyのテーマ開発やアプリ開発をやりたいエンジニアを募集しております！
気になった方はお気軽にエントリーをお待ちしております！(業務委託もOK）
https://www.archetyp.jp/recruit/
noteでブログもやってるので良かったらチェックしてください！
https://note.com/archetyp