お知らせバナーApp

お知らせバナーについて

「お知らせバナー App」は、ショップページ上部の目立つ位置に、お知らせを表示するための Appです。 お知らせする内容やデザインを、自由にカスタマイズすることができ、お客様にアピールしたい内容を効果的に訴求できるようにします。

タグ一覧

ブロック

if(条件を満たす場合に表示)

タグ説明
{block:AppsInformationBanner}「お知らせバナー App」をインストールしていて、かつ「お知らせバナーを表示する」がONとなっている

変数

コンテンツ

タグ説明
{AppsInformationBannerTag}お知らせバナーで設定された内容でコンテンツを表示する

対応が必要な箇所

  • トップページ
  • 商品詳細

※以上のページには、かならず表示してください。そのほかのページに表示することも、問題ありません。

実装方法

ページに「お知らせバナー App」の変数を追加します。

例)

{block:AppsInformationBanner}
    {AppsInformationBannerTag}
{/block:AppsInformationBanner}

お知らせバナーのCSSセレクタ

スタイル指定する場合に、参考にしてください。 お知らせバナーの表示内容やデザインは、デザイン > お知らせバナー から指定します。そのため、スタイルを指定した場合でも、デザイン > お知らせバナー から指定した内容が優先されます。

要素名セレクタ
お知らせバナー全体.informationBanner
x（閉じる）ボタン.informationBanner .informationBannerClose
バナーアイコンとバナーテキストの表示エリア.informationBanner .informationBannerContainer
バナーテキスト.informationBanner .informationBannerText
バナーアイコン.informationBanner .informationBannerIcon
リンクがある場合に表示されるナビゲーションアローアイコン.informationBanner .informationBannerArrow

お知らせバナーの設定メニュー

お知らせバナーのデザインは、デザイン > お知らせバナー から設定することができます。 お知らせバナー設定用のデザインオプションは、作成しないでください。 base

デザインマーケットで販売するテーマを作る時の注意点

App の特性上、以下の内容を守ってテーマを作成してください。

  • ショップを訪問したお客様に効果的にアピールするため、「トップページ」「商品詳細」には、お知らせバナーを必須で表示してください。そのほかのページに表示することも、問題ありません。
  • 各ページは原則、同じ位置にお知らせバナーが表示されるようにしてください。
  • お知らせバナーは、ページを表示したときに、原則としてページの上部30%以内に表示されるデザインとしてください。デザイン都合上30%を超える場合は、理由や意図を添えた上でご申請ください。
    • ※以下のような表示は、販売・アップデート申請で許可をしておりません。
    • ページの下部分に、お知らせバナーを固定表示する。
    • スクロールしないと、お知らせバナーが表示されない。
  • お知らせバナーは、1ページにつき1箇所のみ表示されるデザインとしてください。
  • お知らせバナーに表示するアイコンやテキストは、お知らせバナーメニューから設定します。お知らせバナー設定用のデザインオプション（テーマ設定）は、作成しないでください。
  • 「x」ボタン、右の矢印アイコンは非表示にしないでください。

「x」ボタン動作について

  • 「x」ボタンをクリックしてお知らせバナーを非表示とした時は、ページ遷移ごとに「x」ボタンをクリックする必要がないよう、他のページでも非表示状態が引き継がれるようにしてください。
  • 状態を引き継くための実装は、AppsInformationBannerTag 内で、すでに実装されております。Window.sessionStorage に baseinc.information-banner-visible というキーで状態を保持しています。このキーの値をクリア・改変しないでください。

動作のチェック

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

  • 「お知らせバナー App」が、インストールされていない場合
    • お知らせバナーが表示されないこと
  • 「お知らせバナー App」が、インストールされている場合
    • 「お知らせバナーを表示する」が、OFF の場合
      • お知らせバナーが表示されないこと
    • 「お知らせバナーを表示する」が、ON の場合
      • お知らせバナーが表示されること
      • 「トップページ」「商品詳細」にお知らせバナーが表示されること
      • アイコンやテキストの視認性がよいこと
      • デザイン > お知らせバナー から設定した以下の内容が反映されること
        • テキスト：指定したテキストが表示されること（最大文字数：40文字）。normal/boldの設定が反映されること
        • リンク先：指定があるときに、指定したURLへ遷移すること
        • テキストカラー：選択したカラーで表示されること
        • 背景色：選択カラーで表示されること
        • アイコン表示：OFF の場合
          • アイコンが表示されないこと
        • アイコン表示：ON の場合
          • アイコンの色：選択したカラーで表示されること
          • アイコンの種類：選択したアイコンが表示されること
      • 「x」ボタンクリックで、お知らせバナーが非表示になり、タブを閉じるまでバナーの非表示状態がショップの別ページでも保持されていること
      • 「x」ボタン、右の矢印アイコンが表示されていること
← 年齢制限AppメールマガジンApp →