【shopify】日本の順番に対応していないアカウントページの表記を編集する

悩んでいる人

アカウントページで住所などを登録したはいいものの表記が日本の順番ではないし、都道府県はコードで表記されるし…

といった場合の解決法についての内容になります！

アカウントページとは、shopifyで作成したサイトのヘッダーに表示されている

の真ん中の人間みたいなやつをクリックしてログインすると出てくるページのことです

今回編集するのは左に表示されている住所の部分です！

まだ編集していないので順番が変になっていますね

※ここの部分がまだ表示されていない方は

「お届け先の確認・追加・変更」をクリックして住所を登録しましょう！

その際、

「住所を登録するフォームがまだ日本の順番になっていないよ」

という方は下記の記事を参考にしてみてください

https://matadaietto.com/shopify/address-form/

Contents [hide]

アカウントページの表示の順番を変える前にバックアップをとっておこう
アカウントページのフォームの順番を変えよう！

アカウントページの表示の順番を変える前にバックアップをとっておこう

今回はコードを編集することになるのでバックアップをとっておきましょう

方法は、

管理画面のオンラインストア→テーマ→アクション→複製する

でバックアップ(複製)できます◎

何も編集する前の状態を保存しておけば

「あ、編集する前に戻りたい！！！！( ;∀;)」

とかなり日数経った後でももとに戻せます！

余談ですがshopifyを編集している最中にもコードは自動で保存してくれているので

「さっきの方がよかったな、、」というときはコード編集している上部に表示されている「旧バージョン」をクリックしてもらえれば何分前のコードに戻れます

一度サイトを閉じてしまうと「旧バージョン」でもとには戻せないので、バックアップは大切

アカウントページのフォームの順番を変えよう！

では早速アカウントページの順番を変更していきましょう◎

りーぬ

今回は有料テーマの「Atlantic」を使用していくよ

「customers/account.liquid」のファイルを選択します

このファイルの中の

class="account-info"

を探しこの中をコードを編集していきます

りーぬ

クラス名が見つからない方はディベロッパーツールで探してね

①名前の変更

<span class="name">{{customer.name}}</span>

を

<span class="name">{{customer.last_name}} {{customer.first_name}}</span>

に変更します

nameというオブジェクトは 名・姓 の順になっているため分けて記載する必要があります◎

②住所の変更

 <div class="address-wrap">
　　　　　 <span class="address">{{ customer.default_address.street }}</span>
          <span class="city">
            {{ customer.default_address.city }}{% if customer.default_address.province.size > 0 %}, {{ customer.default_address.province_code }}{% endif %}</span>
　　　　　　<span class="country">{{ customer.default_address.country }},{{ customer.default_address.zip }}, {% if customer.default_address.zip.size > 0 %}{% endif %}</span>
 </div>

を、並び替えて、

 <div class="address-wrap">
          <span class="country">{{ customer.default_address.country }},{{ customer.default_address.zip }},{% if customer.default_address.zip.size > 0 %}{% endif %}</span>
         
          <span class="city">
            {{ customer.default_address.city }}{% if customer.default_address.province_code.size > 0 %}, {{ customer.default_address.province_code}}{% endif %}</span>
           <span class="address">{{ customer.default_address.street }}</span>
 </div>