shopify

【shopify】日本の順番に対応していない住所のフォームを並び替えよう!

悩んでいる人
悩んでいる人
住所を入力するフォームを日本の順に表示したいけどどうしたらいいの?

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

住所を登録するフォームですが、shopifyで作成したサイトのヘッダーに表示されている

の真ん中の人間みたいなやつをクリックしてログイン

アカウント情報ページのお届け先の確認・追加・変更」をクリックしたら

登録フォームが出てくるページになります

こちらにお客さんがアカウント情報を登録しておくと

決済時にそこから情報を引っ張ってこれるので何度も入力しなくて済むというわけです

※ちなみにshopifypaymentを使うと決済時の住所の情報を記憶してくれるので過去に購入したことがある方は何度も入力する必要はないです(‘ω’)

このアカウントページですが、基本的にshopifyの有料テーマは日本語対応していないので日本の住所の順番になっていません

デフォルトだと名前の順番などを変える必要があるのです◎

りーぬ
りーぬ
海外向けのサイトを作成するのであれば不要です~!

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

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

方法は、

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

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

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

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

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

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

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

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

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

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

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

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

このフォイルの中にいくつかフォームのコードがあります

「Atlantic」の場合、

登録した住所を編集したいときに表示されるフォーム

初めて住所を登録する場合に表示されるフォーム

の2種類があります

この上記2種類のフォームがあることを知らないと私のように

なんで編集されないの!!!!!!

ということになりますのでご注意ください(笑)

どちらも編集の方法は同じなので編集していきます

全てのコードを書くとわかりにくくなるのでここではlabelの中身を抜粋して記載しますが、

編集する前は

①{{ ‘customer.addresses.first_name’ | t }}

②{{ ‘customer.addresses.last_name’ | t }}

③{{ ‘customer.addresses.company’ | t }}

④{{ ‘customer.addresses.address1’ | t }}

⑤{{ ‘customer.addresses.address2’ | t }}

⑥{{ ‘customer.addresses.city’ | t }}

⑦{{ ‘customer.addresses.country’ | t }} id=”address-country”

⑧{{ ‘customer.addresses.country’ | t }}  id=”address-province”

⑨{{customer.addresses.zip}}

と記載されているかと思います

要は、この順番を並び変えればいいということですね

上記には何にあたるのかというと

①名前

②姓

③会社

④アパート名

⑤町名・丁目・番地

⑥市区町村

⑦国

⑧都道府県

⑨郵便番号

ということになります

こちらを<div>に気を付けて並び替えて頂ければ

shopify-address-form-edit

こんな感じになります!

日本語の表記になれている方にとってはデフォルトだと少し使いづらいので、フォーム自体も日本語表記してあげた方がより親切ですよね◎

以下の記事では

フォームで登録した住所の表示する順番を変更する方法についてご紹介しているのでぜひ参考にしてみてください~◎

【shopify】日本の順番に対応していないアカウントページの表記を編集する といった場合の解決法についての内容になります! アカウントページとは、shopifyで作成したサイトのヘッダーに表示されて...
ABOUT ME
りーぬ
「コロナから世界を救えるのはECサイトしかない!」と勝手に思い込み、ShopifyでのECサイトで制作をしてるフリーランスエンジニア 兼 臨床検査技師。密かに臨床検査技師からの転職を企てています。趣味はダイエットです。ブログでは日本語の情報がまだ少ないshopifyをどこよりも分かりやすく発信しています!最近は、飲食店のデリバリーサイト作成に力を入れています Shopifyを用いたECサイト作成の代行も行っております 気軽にお問い合わせ下さい!