shopify

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

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

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

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

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

shopify-accountpage-1

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

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

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

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

その際、

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

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

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

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

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

方法は、

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

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

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

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

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

余談ですが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>

に書き換えます

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

なので

province_code

province

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

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

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

りーぬ
りーぬ
「ここの部分こうしたほうがよくない?」などのアドバイスお待ちしておりますので連絡してください◎

ABOUT ME
りーぬ
病院勤務が嫌すぎて副業始めたら気がついたらフリーランスになってた人 仕事は、WEB制作・物販・SNS・ブログとかやってます。WEBディレクションをちゃんと学びたいと思って、IT企業に転職もしたりしています(副業も並行してるので死にそう) 医療職の人の方にこそ副業してもらいたいとおもって副業サポートも始めました! SNSでは主に副業について発信中