Developers

Developers

  • BASE API
  • BASE Template

›Apps

BASE Template

  • はじめに
  • 更新情報
  • テーマの作成方法

    • テーマの作成・管理方法
    • テーマエディタの使い方

    テーマの販売方法(デザインマーケット)

    • テーマを販売したい方へ
    • デザイナー登録
    • デザインガイドライン
    • デモ用ショップに関する注意事項
    • 新規テーマの販売申請
    • テーマのアップデート申請
    • テーマ申請チェックリスト

    基本設定

    • 全体構成
    • 必須タグ
    • <head>仕様
    • <body>仕様
    • ナビゲーションに関する仕様

    各ページの仕様

    • ページ構成

    商品ページ

    • 商品ステータス
    • 購入ボタンの制御
    • 商品情報
    • Pay ID あと払いウィジェット
    • モーダル

    テンプレートタグ

    • 非表示
    • ページ
    • デザインオプション
    • ショップ
    • url
    • イテレータ
    • 商品
    • ソーシャル
    • 関連商品
    • コンテンツ
    • sandboxタグ

    Apps

    • 商品検索App
    • カテゴリ管理App
    • ラベルApp
    • Blog App
    • セールApp
    • 英語・外貨対応App
    • ショップコインApp
    • BASEロゴ非表示App
    • デジタルコンテンツApp
    • レビューApp
    • 販売期間設定App
    • 予約販売App
    • メッセージApp
    • 送料詳細設定App
    • 商品説明カスタムApp
    • 抽選販売App
    • テイクアウトApp
    • 商品オプションApp
    • コミュニティApp
    • メンバーシップ App
    • 再入荷自動通知App
    • 年齢制限App
    • お知らせバナーApp
    • メールマガジンApp

    よくある質問

    • FAQ

年齢制限App

年齢制限Appについて

年齢制限Appを利用すると、未成年に提供できない酒類や電子タバコなどを販売する際に、商品ページに注意文言を表示したり購入時に年齢確認を求めることが可能になります。

タグ一覧

Appのコンテンツを表示するために必要なタグ一覧です。

変数

コンテンツ

タグ説明
{AppsAgeVerificationWarningTag}年齢制限Appで「酒類」を取り扱うショップとして設定した場合、商品詳細ページに酒類取り扱いの注意文言を表示するタグ

対応が必要な箇所一覧

  • 商品詳細ページ(酒類販売時の注意文言)
  • 商品詳細ページ(年齢確認用のモーダル)
  • コミュニティAppをご利用の場合
  • 再入荷自動通知appをご利用の場合

商品詳細ページ(酒類販売時の注意文言)

商品詳細ページに酒類取り扱いの注意文言を表示するには、表示したい位置に{AppsAgeVerificationWarningTag}タグを記述します。

[ご注意ください]

国税庁による酒類販売における表示基準を遵守するため、{AppsAgeVerificationWarningTag}タグで表示される注意文言は、
商品価格よりも大きいフォントサイズを指定いただく必要があります。

※ フォントファミリーの指定次第では小さく見える場合があるので、国税庁の判断により修正をご依頼する可能性があります。

また、表示位置は購入ボタンの上部を推奨しております。
購入ボタンがページ内に複数ある場合は、{AppsAgeVerificationWarningTag}タグはメインとなる購入ボタン付近の見易い位置に配置してください。
(例)メインコンテンツエリアの購入ボタン付近に{AppsAgeVerificationWarningTag}タグを設置し、フローティングエリアの購入ボタン付近には設置しない。

表示例

酒類販売時の注意文

実装例

{block:PurchaseForm}
    {ItemSelectTag}
    {AppsAgeVerificationWarningTag}
    {PurchaseButton}
{/block:PurchaseForm}

実際のページではこのようにHTMLが出力されます。

<form id="purchase_form" ...>
    ... {ItemSelectTag}の内容 ...
    <p class="ageVerificationWarning"><i class="si-attentionTriangle"></i>このショップでは酒類を取り扱っています。20歳未満の者の飲酒は法律で禁止されています。</p>
    ... {PurchaseButton}の内容 ...
</form>

CSSセレクタ一覧

主にスタイルを調整するCSSセレクタの一覧です。

要素名セレクタ
注意文言.ageVerificationWarning

商品詳細ページ(年齢確認用のモーダル)

商品詳細ページにおいて、購入ボタン押下後に年齢確認用のモーダルが開くようになります。
ただし、最後に年齢確認が完了してから1時間以内であれば、確認モーダルは表示されません。

{block:PurchaseForm} 及び {PurchaseButton} をお使いの場合に自動で表示されるようになります。
PurchaseForm と PurchaseButton の詳しい説明は購入ボタンの制御をご覧ください。

表示例

年齢確認用のモーダル

テーマのデザインに応じて、モーダルのスタイルを調整してください。
基本となるモーダルのHTML構成についてはこちらをご覧ください。

コミュニティAppをご利用の場合

コミュニティAppをご利用の場合、会員限定商品の購入ボタンを押下すると、コミュニティの入会へと誘導するモーダル(以下、コミュニティ購入モーダル)が表示されるケースがあります。
この場合、年齢確認用モーダルはコミュニティ購入モーダル内の各種会員になるボタン押下後に表示されます。
コミュニティAppの詳しい説明はこちらをご覧ください。

再入荷自動通知Appをご利用の場合

年齢制限Appで取り扱い商品を「酒類」にした状態で、再入荷自動通知Appを併用している場合、
在庫がない商品のページで再入荷通知を希望するボタンを押した時に表示されるモーダルウィンドウ内に、
酒類取り扱いの注意文言が表示されます。

酒類販売時の注意文

再入荷自動通知Appの詳しい説明はこちらをご覧ください。

動作のチェック

動作確認するには下記項目を参考にしてください。

商品詳細ページ

酒類販売時の注意文言

年齢制限Appの設定で「酒類」を選択した状態で、

  • 商品ページに「このショップでは酒類を取り扱っています。20歳未満の者の飲酒は法律で禁止されています。」という文言が表示されること
  • 文言には商品価格よりも大きいフォントサイズが指定されており、商品価格よりも大きく表示されること。

年齢確認用のモーダル

  • 商品をカートに入れる際に、年齢確認モーダルが表示されること
    ※「酒類」を設定した場合と、「電子タバコ」または「その他」を設定した場合で表示内容が異なります。それぞれの設定でご確認ください。
  • 年齢確認モーダルが最前面に表示されること
  • 年齢確認モーダルに年齢を入力することができること
  • 年齢確認モーダルに、年齢制限Appで設定した年齢[1]以上の値が入力されている場合、「確認してカートに入れる」ボタンを押すことができること

コミュニティAppに対応する場合

  • コミュニティ限定商品の商品詳細ページにて、コミュニティ購入モーダルが表示された後、コミュニティ購入モーダル内の各種会員になるボタン押下後に年齢確認モーダルが表示されること

再入荷自動通知Appに対応する場合

  • 年齢制限Appの設定で「酒類」を選択した状態で、再入荷のお知らせを希望するモーダル内に酒類取り扱いの注意文言が表示されること

英語・外貨対応Appに対応する場合

  • 酒類販売時の注意文言が翻訳されており、デザインへ悪影響を及ぼしていないこと
  • 年齢確認用のモーダルの文言が翻訳されており、デザインへ悪影響を及ぼしていないこと
    ※「酒類」を設定した場合と、「電子タバコ」または「その他」を設定した場合でそれぞれご確認ください。

  1. 「酒類」と「電子タバコ」を設定した場合は20歳のみ、「その他」を設定した場合は18歳と20歳を設定できます ↩

← 再入荷自動通知Appお知らせバナーApp →
  • 年齢制限Appについて
  • タグ一覧
    • 変数
  • 対応が必要な箇所一覧
    • 商品詳細ページ(酒類販売時の注意文言)
    • 商品詳細ページ(年齢確認用のモーダル)
    • コミュニティAppをご利用の場合
    • 再入荷自動通知Appをご利用の場合
  • 動作のチェック
    • 商品詳細ページ
    • コミュニティAppに対応する場合
    • 再入荷自動通知Appに対応する場合
    • 英語・外貨対応Appに対応する場合
  • API利用規約
  • デザインマーケット利用規約
© 2012-2025 BASE, Inc.