【コピペで実装】Shopifyで年齢確認の実装方法

2024年7月18日2024年9月14日

Shopifyストアでの年齢確認を実装したい…
お酒などの年齢確認商品を無料テーマで販売したい…
複雑な設定は避けたい…

そんなお悩みを解決する、シンプルで効果的な方法があります

この記事ではコードをコピペするだけの簡単設定で、24時間有効の年齢確認機能の実装方法を解説します。
無料テーマでも実装可能なので、ぜひ参考にしてみてください。

1. Shopifyでの年齢確認機能の重要性と基本概念

Shopifyを使用してアルコールや成人向け商品を販売する場合、年齢確認機能は法的要件を満たすだけでなく、ブランドの信頼性を高める上でも重要です。

この機能により、未成年者の不適切なアクセスを防ぎ、責任ある販売を行うことができます。

年齢確認の基本的なアプローチには以下があります

サイト訪問時のポップアップ表示
特定ページへのアクセス制限
商品購入時の確認

今回は、最も一般的で効果的な「サイト訪問時のポップアップ表示」方式を実装します。

この方法では、ユーザーがサイトに訪れた際に年齢確認ポップアップが表示され、18歳以上であることを確認した後にサイトの閲覧が可能になります。

この実装の利点は以下の通りです

外部アプリに依存せず、Shopifyテーマ内で完結
カスタマイズが容易
ページ読み込み時に即座に表示されるため、確実な年齢確認が可能

次のセクションでは、この年齢確認機能を実際にコードで実装する方法を詳しく説明します。

2. 年齢確認機能のコード実装方法

年齢確認機能を実装するには、以下の手順でShopifyテーマにコードを追加します。

Shopify管理画面から「オンラインストア」>「テーマ」に移動し、現在のテーマの「アクション」ボタンをクリックし、「コードを編集」を選択します。

左側のファイルリストで「Snippets」フォルダを開き、「新規スニペット」を作成します。

新しいスニペットの名前を「age-verification」としてください。

以下のコードを貼り付けます。

<style>
  #age-verification {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .age-verification-content {
    background-color: white;
    padding: 20px;
    border-radius: 5px;
    text-align: center;
  }

  #age-verification button {
    margin: 10px;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
  }
</style>

<div id="age-verification" style="display: none;">
  <div class="age-verification-content">
    <h2>年齢確認</h2>
    <p>このサイトにアクセスするには18歳以上である必要があります。</p>
    <button onclick="confirmAge(true)">はい、18歳以上です</button>
    <button onclick="confirmAge(false)">いいえ、18歳未満です</button>
  </div>
</div>

<script>
  document.addEventListener('DOMContentLoaded', function() {

    if (!localStorage.getItem('age_verified') || isVerificationExpired()) {
      document.getElementById('age-verification').style.display = 'flex';
    }
  });

  function confirmAge(isAdult) {
    if (isAdult) {
      localStorage.setItem('age_verified', 'true');
      localStorage.setItem('age_verified_timestamp', Date.now());
      document.getElementById('age-verification').style.display = 'none';
    } else {
      window.location.href = 'https://www.google.com';
    }
  }

  function isVerificationExpired() {
    const verifiedTimestamp = localStorage.getItem('age_verified_timestamp');
    if (!verifiedTimestamp) return true;
    const oneDayInMilliseconds = 24 * 60 * 60 * 1000;
    return (Date.now() - parseInt(verifiedTimestamp)) > oneDayInMilliseconds;
  }
</script>

次に、theme.liquidファイルを開き、</body>タグの直前に以下のコードを追加します。