【2026年最新】Shopifyで年齢確認ポップアップ・会員限定ページを実装する方法｜アプリ不要・Dawn対応のLiquidコードをエンジニア目線で解説

2026年最新版として、実務ベースで厳選しています。

「お酒や医薬品を扱うストアに年齢確認を入れたい」「会員だけが見られるページを作りたい」——この2つの要望はShopify実務でよく出てきます。しかし公式の無料テーマ（Dawn・Horizon等）にはどちらの機能も標準搭載されていません。

アプリを使えば解決できますが、月額費用がかかります。この記事ではアプリ不要でLiquid＋CSS＋JavaScriptのみで実装する方法を解説します。

この記事では、こんな疑問・悩みにお答えします：

年齢確認はアプリなしで実装できる？
Cookieで「確認済み」を記憶させるにはどうする？
特定のコレクションページのみに年齢確認を出すには？
未ログイン者を自動でログインページに飛ばすコードは？
「プレミアム会員タグ」がある人だけアクセスできるページは作れる？
ページの一部だけぼかして「会員登録を促す」UIはどう作る？

1 迷ったらここを見る：クイックガイド
2 なぜアプリを使わないで実装するのか
3 実装できる6つのパターン
- 3.1 【年齢確認系】
  - 3.1.1 パターン①：サイト全体に年齢確認ポップアップを表示
  - 3.1.2 パターン②：特定コレクション・商品ページのみに表示
- 3.2 【会員限定ページ系】
4 必要な知識と対応テーマ
5 年齢確認の法的な位置づけについて
6 「そこが知りたかった」：よくある疑問に答えます
7 エンジニア目線のポイント
8 詳細コードはnoteで公開しています
9 まとめ
10 関連記事
11 Shopifyをこれから始める方へ

迷ったらここを見る：クイックガイド

年齢確認をサイト全体に出したい → layout/theme.liquid＋CSS＋JSの3ファイルで実装
特定コレクションだけに出したい → 専用テンプレート＋セクションで実装
会員限定ページが欲しい（シンプル版） → page.members-only.liquidテンプレートで即実装
タグ別で権限制御したい → customer.tagsでLiquid条件分岐
ぼかしUIで登録を促したい → CSSのblur＋position:absoluteで実装
すぐコードを見たい → 詳細コードはnoteで公開中（¥980）

なぜアプリを使わないで実装するのか

アプリを使った年齢確認・会員限定の実現は確かに手軽です。しかしアプリには月額費用が発生し、ストアの商品数・注文数が増えるにつれてコストも上がるケースがあります。

一方でLiquidによるカスタム実装は、一度作れば追加コスト不要で永続的に動作します。コードの管理・メンテナンスは必要ですが、長期的なコスト削減と柔軟なカスタマイズが可能です。

比較項目	アプリを使う	Liquidで実装
費用	月額$5〜$30程度	無料（工数のみ）
設定の手軽さ	◎（管理画面で設定）	△（コード編集が必要）
カスタマイズ自由度	△（アプリの機能範囲内）	◎（制限なし）
ページ速度への影響	△（アプリのスクリプト読み込み）	◎（最小限）
テーマ更新後の影響	◎（アプリ側で対応）	△（テーマ更新後に再確認が必要）
長期コスト	月額×運用期間	初期工数のみ

実装できる6つのパターン

【年齢確認系】

パターン①：サイト全体に年齢確認ポップアップを表示

すべてのページへのアクセス時にポップアップを表示します。「はい（20歳以上）」を押すとCookieに確認済みを保存し、以降30日間は表示しません。「いいえ」を押すと指定のURLへリダイレクト（例：Googleトップ）します。

実装ファイル：layout/theme.liquid ＋ assets/age-check.css ＋ assets/age-check.js

パターン②：特定コレクション・商品ページのみに表示

「アルコール飲料コレクション」など特定のコレクションにアクセスしたときだけ年齢確認を出します。Shopifyのテンプレート機能を使い、対象コレクションにだけ適用します。管理画面から対象コレクションを選ぶだけで切り替えられます。

実装ファイル：templates/collection.age-required.liquid ＋ sections/age-check-banner.liquid

【会員限定ページ系】

パターン③：未ログイン者を自動でログインページへリダイレクト

最もシンプルな実装です。ページにアクセスした未ログインユーザーを自動でログインページへ飛ばし、ログイン後に元のページへ戻します。コード量が少なく、初めて実装する方に最適です。

実装ファイル：templates/page.members-only.liquid

パターン④：特定タグを持つ会員のみアクセスできるページ

「premiumタグがある顧客のみ」のように、ログイン済みでも権限のない会員は弾く実装です。ShopifyのFlowと組み合わせれば、累計購入金額に応じた自動タグ付与→自動アクセス権付与まで全自動にできます。

実装ファイル：templates/page.premium-only.liquid

パターン⑤：ページの一部だけぼかして会員登録を促す

商品の特別価格や卸売価格をぼかして表示し、「会員登録すると見られます」というUIです。CSSのblurフィルターとposition:absoluteの重ね合わせで実装します。登録率向上のCVR施策として有効です。

必要な知識と対応テーマ

必要な知識： HTML・CSSの基本が読める方であれば対応できます。すべてのコードはコピペで動くように作っており、変更が必要な箇所にはコメントで明記しています。

対応テーマ： Dawn・Horizon・Sense・Craft・RefreshなどのShopify公式無料テーマ全般に対応。有料テーマでも基本的な実装方法は同じですが、ファイルパスが異なる場合があります。

年齢確認の法的な位置づけについて

⚠️ 重要： Cookieベースの年齢確認は「ブラウザの記憶を使った確認」であり、法的な年齢認証（身分証確認等）とは異なります。酒類・タバコ・医薬品など法律上の年齢確認が必要な商品では、この実装だけでは不十分なケースがあります。業種・商材に応じて専門家へのご相談を推奨します。

「そこが知りたかった」：よくある疑問に答えます

Q. テーマを更新したら年齢確認が消えてしまった
theme.liquidを直接編集しているため、テーマのメジャーアップデート時にコードがリセットされることがあります。テーマ更新後は必ず動作確認を行ってください。assetsのCSSとJSファイルは消えないので、theme.liquidへの追記だけ再作業すれば復旧できます。
Q. 年齢確認を出さない顧客の条件を追加できる？
Liquidの条件分岐で対応できます。例えば「age_verifiedタグがある顧客には出さない」という条件をtheme.liquidに追加できます。詳細コードはnoteで公開しています。
Q. 会員タグはどうやって付与する？
管理画面から手動で付与するか、Shopify Flowで条件を設定して自動付与するかのどちらかです。例：「累計購入金額3万円超でpremiumタグを自動付与」というFlowを組み合わせると、完全自動化できます。
Q. B2B・卸売向けに「会員のみ価格表示」はできる？
パターン④・⑤を組み合わせることで実現できます。特定タグ（例：wholesale）を持つ顧客にだけ卸価格を表示し、それ以外は申請フォームへ誘導するUIも同じ仕組みで作れます。

エンジニア目線のポイント

Liquidの customer.tags contains 'xxx' による判定はサーバーサイドで処理されます。つまりJavaScriptを無効にしたユーザーにも機能し、ソースコードを見ても会員限定コンテンツは露出しません。これはJSのみで制御する方法と比べてセキュリティ上の大きなメリットです。

ただし「ぼかし表示」パターンはCSSで視覚的にコンテンツを隠しているだけで、HTMLソースには内容が含まれています。本当に機密性が高いコンテンツ（特別価格・個人情報を含む内容等）は、パターン③・④のようにサーバーサイドでコンテンツ自体を出力しない設計にしてください。