Shopifyのアカウントページの「姓名」と「住所」の入力順を変更する方法

アカウントページの「姓名」と「住所」の入力順を日本仕様にする

以下の手順をお試しください。

なお、コードを編集するので意図せず表記が崩れる等のエラーが発生する場合があります。事前にバックアップを取るなどのリスク対策が必要です。

1.管理画面にログインし、[オンラインストア] > [テーマ] に移動します。

2.「カスタマイズ」の隣の[…] から[コードを編集] をクリックします。

3.「セクション」フォルダ内のmain-addresses.liquidファイルを選択します。

4.以下のコードを探します。

<div class="field">
            <input
              type="text"
              id="AddressFirstNameNew"
              name="address[first_name]"
              value="{{ form.first_name }}"
              autocomplete="given-name"
              placeholder="{{ 'customer.addresses.first_name' | t }}"
            >
            <label for="AddressFirstNameNew">{{ 'customer.addresses.first_name' | t }}</label>
          </div>
<div class="field">
            <input
              type="text"
              id="AddressLastNameNew"
              name="address[last_name]"
              value="{{ form.last_name }}"
              autocomplete="family-name"
              placeholder="{{ 'customer.addresses.last_name' | t }}"
            >
            <label for="AddressLastNameNew">{{ 'customer.addresses.last_name' | t }}</label>
          </div>

5.下記の様にコードの順番を変えると、姓名の順番に表示されるようになります。

<div class="field">
            <input
              type="text"
              id="AddressLastNameNew"
              name="address[last_name]"
              value="{{ form.last_name }}"
              autocomplete="family-name"
              placeholder="{{ 'customer.addresses.last_name' | t }}"
            >
            <label for="AddressLastNameNew">{{ 'customer.addresses.last_name' | t }}</label>
          </div>
          <div class="field">
            <input
              type="text"
              id="AddressFirstNameNew"
              name="address[first_name]"
              value="{{ form.first_name }}"
              autocomplete="given-name"
              placeholder="{{ 'customer.addresses.first_name' | t }}"
            >
            <label for="AddressFirstNameNew">{{ 'customer.addresses.first_name' | t }}</label>
          </div>

6.住所についても上記を参考に、該当のコードの順番を入れ替えることで入力欄の順番を変更することができます。参考までに、順番を入れ替えたコードを以下に書きます。

{% comment %}以下が郵便番号のコードです{% endcomment %}
<div class="field">
            <input
              type="text"
              id="AddressZipNew"
              name="address[zip]"
              value="{{ form.zip }}"
              autocapitalize="characters"
              autocomplete="postal-code"
              placeholder="{{ 'customer.addresses.zip' | t }}"
            >
            <label for="AddressZipNew">{{ 'customer.addresses.zip' | t }}</label>
          </div>

{% comment %}以下が国を選択するコードです{% endcomment %}
               <div>
            <label for="AddressCountryNew">{{ 'customer.addresses.country' | t }}</label>
            <div class="select">
              <select
                id="AddressCountryNew"
                name="address[country]"
                data-default="{{ form.country }}"
                autocomplete="country"
              >
                {{ all_country_option_tags }}
              </select>
              <svg aria-hidden="true" focusable="false" viewBox="0 0 10 6">
                <use href="#icon-caret" />
              </svg>
            </div>
          </div>
{% comment %}以下が県のコードです{% endcomment %}
          <div id="AddressProvinceContainerNew" style="display: none">
            <label for="AddressProvinceNew">{{ 'customer.addresses.province' | t }}</label>
            <div class="select">
              <select
                id="AddressProvinceNew"
                name="address[province]"
                data-default="{{ form.province }}"
                autocomplete="address-level1"
              ></select>
              <svg aria-hidden="true" focusable="false" viewBox="0 0 10 6">
                <use href="#icon-caret" />
              </svg>
            </div>
          </div>

{% comment %}以下が市のコードです{% endcomment %}
                    <div class="field">
            <input
              type="text"
              id="AddressCityNew"
              name="address[city]"
              value="{{ form.city }}"
              autocomplete="address-level2"
              placeholder="{{ 'customer.addresses.city' | t }}"
            >
            <label for="AddressCityNew">{{ 'customer.addresses.city' | t }}</label>
          </div>

{% comment %}以下が住所1のコードです{% endcomment %}
          <div class="field">
            <input
              type="text"
              id="AddressAddress1New"
              name="address[address1]"
              value="{{ form.address1 }}"
              autocomplete="address-line1"
              placeholder="{{ 'customer.addresses.address1' | t }}"
            >
            <label for="AddressAddress1New">{{ 'customer.addresses.address1' | t }}</label>
          </div>

{% comment %}以下が建物名、部屋番号などのコードです{% endcomment %}
          <div class="field">
            <input
              type="text"
              id="AddressAddress2New"
              name="address[address2]"
              value="{{ form.address2 }}"
              autocomplete="address-line2"
              placeholder="{{ 'customer.addresses.address2' | t }}"
            >
            <label for="AddressAddress2New">{{ 'customer.addresses.address2' | t }}</label>
          </div>
株式会社ナレッジサービスの代表です。岩手県花巻市を拠点に、中小企業・個人事業主に特化したホームページ制作・ECサイト制作を行っています。制作して終わりではなく、集客と採用を成功させるためのWeb全体のサポートをご提供します。