カートのチェックボックス

カートページとカートドロワーに表示する年齢確認チェックボックスの設定方法をご案内します。

この画面は、AgeCheckの左メニュー「年齢確認設定」を開き、上部の「カート」タブから移動できます。

機能の概要

年齢確認の対象商品がカートに入っている場合に、カートページまたはカートドロワーへ注意書きとチェックボックスを表示します。お客様がチェックを入れるまで「ご購入手続きへ」ボタンは動作せず、エラーメッセージが表示されます。

対象商品がカートに入っていない場合、チェックボックスは表示されません。
対象商品の指定方法は「対象商品の指定」をご覧ください。
カート内の商品が変わった場合（数量変更・追加・削除）、ページの再読み込みなしでも自動的にチェックボックスの表示・非表示が更新されます（数秒程度のタイムラグが生じる場合があります）。
カートページとカートドロワーの両方を有効にした場合、チェック状態は自動的に同期されます。

カートページへの設置（初回のみ）

チェックボックスを表示するには、テーマエディタでアプリブロックをカートページに追加する必要があります。

「カートの設定」画面の「テーマエディタを開く」ボタンをクリックします（カートページが表示されます）。

サイドバーで対象セクションを展開し、「ブロックを追加」をクリックします。
「アプリ」タブから「年齢確認チェックボックス」を選びます。
「ご購入手続きへ」ボタンの上など、見やすい位置に配置して保存します。

カートページのデザイン設定

テーマエディタでブロックを選択すると、以下を変更できます。

配置（左・中央・右）
チェックボックスのカラー
文字カラー
チェックボックス文言・注意書きのフォントサイズ
エラーメッセージのカラー

テーマエディタで追加できない場合

テーマが「Online Store 2.0」形式に対応していない場合、ブロックの追加ボタンがエラーになることがあります。その場合は「旧形式テーマのカートページへ手動設置する」をご覧ください。

カートドロワーへの設置（初回のみ）

スライド式のカートドロワーへ表示する場合は、テーマエディタで専用のアプリ埋め込みを有効にします。

「カートの設定」画面の「カートドロワーを有効にする」をクリックします。
テーマエディタの「アプリ埋め込み」で「年齢確認（カートドロワー）」をオンにします。
対象商品をカートへ追加し、右上のカートアイコンを押してカートドロワーを開きます。
購入ボタンの上にチェックボックスが表示されることを確認します。

チェック前は年齢確認が購入ボタンの直前に表示され、購入手続きへ進めない状態になります。

チェックを入れると、購入手続きへ進める状態になります。
テーマを保存します。

通常は設定変更不要です

「カートの表示形式」は「自動判定（推奨）」のままご利用ください。この設定は、テーマのカート表示形式自体を変更するものではありません。

カートドロワーを開いても年齢確認が表示されない場合だけ、次の順で確認します。

「カートの表示形式」を「カートドロワーを使用」へ変更します。
カートドロワーを閉じてから、もう一度開きます。
それでも表示されない場合は、次の「自動検出できない場合」の手順へ進みます。

カートドロワーを使用しないテーマでは、アプリ埋め込みをオフにしてください。アプリ埋め込みを残したままドロワー機能を停止したい場合は、「カートページを使用」を選択します。

主要なカートドロワーは自動検出されるため、通常はCSSセレクターを入力する必要はありません。テーマエディタのプレビュー左下には、確認結果が表示されます。

購入ボタンを自動検出できた
入力したCSSセレクターが見つかった
CSSセレクターが見つからない、または形式が正しくない
自動検出できないためCSSセレクターが必要

自動検出できない場合

AgeCheckが実際のテーマを解析し、プレビュー左下へ購入ボタン候補を表示します。CSSやHTMLを調べる必要はありません。

プレビュー左下に赤い案内で「表示位置を自動検出できませんでした」と表示された場合が、カスタムCSSセレクターの設定が必要な状態です。この赤い案内はテーマエディタだけに表示され、ストアを訪れたお客様には表示されません。

右上のカートアイコンを押し、カートドロワーを開きます。候補を正しく確認するため、先にカートドロワーを開いた状態にしてください。
赤い案内に表示された候補の「対象を確認」を押します。
カートドロワー内の購入ボタンが緑色の枠で表示されたことを確認します。意図しないボタンが囲まれた場合は、その候補を使用しないでください。

上の画像にある「③ この候補を試す」を押し、注意書きとチェックボックスが購入ボタンの上に表示されることを確認します。この時点では一時的な確認のため、まだテーマには保存されていません。
表示位置に問題がなければ「コピー」を押し、左側の「購入ボタンのCSSセレクター」へ貼り付けます。

カートドロワーをもう一度開き、チェックボックスが購入ボタンの上に表示されることを確認してから、テーマを保存します。

購入ボタン自体だけでなく、購入ボタンを囲む要素を指定した既存設定にも対応しています。AgeCheckが要素内の購入ボタンを探し、可能な限りボタン領域の直前へ配置します。

Liquidコードの貼り付けは必要ですか？

カートドロワーはアプリ埋め込みだけで動作するため、Liquidテンプレートへのコード貼り付けは不要です。カスタムCSSセレクターを使用する場合も、テーマエディタの設定欄へ貼り付けるだけで、テーマコードは変更しません。

旧形式のテーマでも、Shopifyのアプリ埋め込みは利用できます。Liquidコードの手動設置が必要になるのは、旧形式のカートページで「年齢確認チェックボックス」アプリブロックを追加できない場合だけです。詳しくは「旧形式テーマのカートページへ手動設置する」をご覧ください。

カートドロワーのデザイン設定

アプリ埋め込みの設定から、カートページ用ブロックと同じデザイン項目を変更できます。カートページとカートドロワーは、それぞれ個別のデザインに設定できます。

「配置」の左・中央・右を変更すると、注意書き、チェックボックスの文言、エラーメッセージを含む年齢確認欄全体の文字位置が変わります。カスタムCSSセレクターを使用している場合も、年齢確認欄そのものは購入ボタンの上へ配置され、その中の文字位置をこの設定で調整できます。

アプリ側の設定項目

項目	説明
カートに年齢確認チェックボックスを表示する	オフにすると、カートページとカートドロワーの両方で表示されません
注意書きの文言	チェックボックスの上に表示される説明文（空欄で非表示）
チェックボックスの文言	チェックボックスの横に表示される文言
未チェック時のエラーメッセージ	チェックせずに購入手続きへ進もうとした場合に表示

設定画面下部のプレビューで、表示イメージを確認できます。

注意事項

Shop Payなどの外部決済ボタンからの購入は、テーマの構造によってはブロックできない場合があります。確実に確認したい場合はポップアップの併用をおすすめします。
カートドロワーのHTML構造はテーマごとに異なります。自動検出できない場合は「購入ボタンのCSSセレクター」を設定してください。
カートページ用ブロックは1ページに1箇所のみ設置できます。誤って2箇所以上に追加した場合、2つ目以降は自動的に無効になります（テーマエディタのプレビューでは案内メッセージが表示されます）。