【初心者向け】Shopifyの会員登録画面に利用規約の同意を追加する方法

はじめに

Shopifyで利用規約の同意を追加する方法について調査するとカードページに追加する方法が見つかりますが、これでは毎回同意が必要になります。
また、会員登録時に利用規約への同意を得るShopifyアプリもありますが、これは毎月の使用料がかかります。
そこで、Shopifyアプリを使用せず会員登録時に利用規約への同意を得る方法を調査しました。
以下にその手順を示します。
ご参考になれば幸いです。

なお、本手順ではShopifyのテーマとしてDawn Ver13.0.0を使用しています。

こんな人に読んでほしい

• ShopifyでECサイトを始めたい方
• ShopifyでECサイトを運営中の方
• Shopify開発言語(Liquid)を学びたい方

前提条件

• パソコン上にShopify管理画面へのアクセス環境が整っていること

利用規約を作成する

最初に利用規約を作成します。
管理画面から「設定」－「ポリシー」を選択し、「利用規約」を入力して保存します。

作成した利用規約のURLは下記になります。
/policies/terms-of-service

会員登録ページを編集する

変更前の会員登録ページは下記です。

パスワードと「作成する」ボタンの間に利用規約の同意チェックボックスを追加します。
また利用規約ページへのリンクも追加します。

1. 管理画面から「オンラインストア」－「テーマ」－「・・・」－「コードを編集」を選択
   
   　

2. 検索バーに「main-register」を入力し、「main-register.liquid」ファイルを選択
   
   　

3. 「main-register.liquid」ファイルを編集(左が変更前、右が変更後)
   

＜コード説明＞

利用規約の同意チェックボックスと利用規約ページへのリンクを追加しています。

     <div>
        <input type="checkbox" id="optin" onclick="changeDisabled();" autocomplete="off" required="required" >
            <label for="optin">
                <a href="/policies/terms-of-service" target="_blank">利用規約</a>
                に同意します
            </label>
    </div>

　
「作成する」ボタンタグにidを付加し、初期状態を選択不可にしています。

    <!--<button>-->
    <button id="registration_btn" disabled>

　
利用規約の同意チェックボックスの状態に応じて「作成する」ボタンの選択可否を制御するJavaScriptを追加しています。

<script>
  function changeDisabled(){
      optin = document.getElementById('optin');
      if(optin.checked) {
          document.getElementById('registration_btn').disabled = "";
      } else {
          document.getElementById('registration_btn').disabled = "disabled";
      }
  }
</script>

　
これにより、利用規約の同意チェックボックスがONの時のみ「作成する」ボタンが選択できるようになります。

最後に

いかがでしたでしょうか。
Shopifyアプリを使用せずに手軽に実装できましたね。
これを機に、Shopifyのコード編集に挑戦してみてください。