shopify

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

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

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

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

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

shopify-accountpage-1

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

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

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

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

その際、

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

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

【shopify】日本の順番に対応していない住所のフォームを並び替えよう!shopifyのアカウントページのフォームの順を日本人が使いやすいように並び順を変更したい!という方にむけての記事になります...

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

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

方法は、

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

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

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

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

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

余談ですが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
りーぬ
「コロナから世界を救えるのはECサイトしかない!」と勝手に思い込み、ShopifyでのECサイトで制作をしてるフリーランスエンジニア 兼 臨床検査技師。密かに臨床検査技師からの転職を企てています。趣味はダイエットです。ブログでは日本語の情報がまだ少ないshopifyをどこよりも分かりやすく発信しています!最近は、飲食店のデリバリーサイト作成に力を入れています Shopifyを用いたECサイト作成の代行も行っております 気軽にお問い合わせ下さい!