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

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

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

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

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

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

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

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

その際、

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

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

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

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

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

方法は、

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

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

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

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

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

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

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

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

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

「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>

に書き換えます

この時、都道府県が「JP‐13」のようなコードで表示されてしまいます

なので

province_code

を

province

と書き換えることでちゃんと都道府県が表示されるようになります◎

変更を保存してみると、、、

日本の順番になっていることが確認できれば編集完了です◎

Tweets by 71Riiiiii