Shopifyこんにちは。本記事では、アプリを使わずにShopifyの商品ページに利用規約のチェックボックスを設置する方法を解説していきます。ユーザーに利用規約に同意させた上で商品を購入させたいといったことはよくあることだと思います。アプリを使わずにコピペで簡単に設置できますので、ぜひ試してみてください!利用規約チェックボックスのイメージ作りはとてもシンプルで、利用規約に同意しないとカートに追加することができません。今回はカートに追加するボタンを制御する方法を2パターン作りましたので、案件やお好みに応じて使い分けてください。文字どおり、利用規約のチェックボックスにチェックを入れるまでカートボタンは無効です。動的チェックアウトボタンも同様に無効化されます。チェックを入れることでカートボタンが有効になります。パターン2:カートに追加するボタンをクリックするとアラートを表示カートボタンは無効化せず、チェックを入れない状態でカートボタンをクリックするとアラートが表示されて、商品をカートに追加することができません。(注意)動的チェックアウトボタンにはアラート表示は適用されませんので、こちらの方法を利用する場合には動的チェックアウトボタンは非表示にしてください。上に埋め込んでいるCodePenをご確認ください。Dawnのバージョンテーマのバージョンは、14.0.0です。設定の手順チェックボックスを設置するファイルを開くチェックボックスの設置(HTML)Javascriptの設置チェックボックスを設置するファイルチェックボックスを設置するファイルはスニペットの中にある「buy-buttons.liquid」です。チェックボックスをカートボタンの上に設置します。テーマのスニペットにある「buy-buttons.liquid」を開きます。チェックボックスの設置(HTML)buy-buttons.liquidファイルの13行目に、HTMLをコピペします。class="terms-link">利用規約</a>をご確認ください。</div></div>「href=”/”」の箇所は利用規約のページ(リンク先)を指定してください。例)href=”/pages/terms-of-service”テキストも適宜変更してご利用ください。Javascriptの設置ここからはカートボタンを制御するプログラムを追加していきます。先程のHTMLタグに続けて、scriptタグを挿入します(26行目から)。パターン1:カートに追加するボタンを無効化こちらの方法はbuttonタグを無効にしてカートボタンをクリックできないようにしています。チェックを入れることでbuttonタグが有効になります。false);</script>カートボタンにクリックしたかどうかを判定するイベントを設定して、もしチェックしていない状態でカートボタンがクリックするとアラートが表示され、カートに商品が追加されません。event.preventDefault();preventDefaultでカートに追加する動作をキャンセルしています。パターン1とパターン2の違いパターン1ではカートボタン自体を無効にしています。パターン2ではカートボタンは常にクリックできますが、チェックが入っていないとアラートが表示されてカートボタンも機能しないようになっています。ボタンを無効化してしまうと、ボタンに設定している他のプログラムも無効になってしまうといったことがあるかもしれませんので、どちらのパターンを採用するべきはストアに依ります。設定が難しいと感じたら下記からご相談ください。MENTAで相談するまとめ商品ページにチェックボックスを設置する方法について解説してきました。コピペで簡単に設置できるようになっていますので、活用してみてください。商品ページ以外にも、コンタクトフォームやカートページでも応用することは可能ですので、必要に応じて導入をご検討ください。ここまでご覧いただき、ありがとうございました。本記事の中でShopifyのわからないことお気軽にご相談ください。MENTAで相談するShopifyのストア制作やページの修正のご依頼、Shopifyに関するアドバイスなどのはお気軽にご相談ください。検索プロフィールソケットブログ自称、Shopify制作屋。食品・アパレルを中心にストア制作のサポートをしています。現在は制作会社・CSで受注しながら、2022年から某企業のShopify制作チームにジョインしています。DawnでGlightboxを実装しようこんにちは、ムネトです。自作で画像をポップアップで拡大表示させようと思うと、実装が大変ですよね。[...]ソケットブログ2024年6月20日ShopifyShopify【簡単!アプリなし】shopify利用規約のチェックボックスを商品ページに設置しようこんにちは。方法を解説していきます。Flowアプリで顧客タグを付与するこんにちは、ムネトです。方法を解説していきます。Flowアプリについて深掘りします。