来訪時のトップページ等でポップアップ型でカテゴリリストを表示します。任意に階層（例：大カテゴリ>中カテゴリ>少カテゴリ）を階層拡張が可能で、任意の項目（カテゴリやブランドなど）リンク先を設定できます。

はじめる前に

以下の準備が事前に必要になります。

• 事前に表示するカテゴリの構成を設計してください

  • 例：アパレル
    • 第1階層：大カテゴリ：ジャケット/アウター、トップス、パンツ、その他
    • 第2階層：サブカテゴリ（ジャケット）：ブルゾン、コート、ジャケット、その他
    • 第3階層：性別：レディース、メンズ、キッズ

• 接客サービス内に利用したい適切なサイズの素材画像をご用意ください。

  • 接客サービスを作成する際の画像に容量やサイズの制限はありますか？

利用の手順

接客シナリオのインストール

• ストアから接客シナリオのインストールを行ってください。

接客サービスの設定

アクション

• 最小化（ステート1）時の設定
  • 「最小化見出し」に見出しのテキストを入力します。
  • 「最小化詳細テキスト」にサブテキストのテキストを入力します。
  • 「ボタン テキスト」にボタン内のテキストを入力します。
  • 「コンテンツ 最小高」にサイズ（pix）を指定します。

• スタイルの設定
  • 各要素のカラーを指定します。

• カテゴリリスト>カテゴリー選択（ステート2）時の設定
  • 「見出し」に見出しのテキストを入力します。
  • 「説明テキスト」にサブテキストのテキストを入力します。

• カテゴリのコンテンツ設定

  • カテゴリ（テキスト/画像/リンク先UR）は、カスタマイズ>Scriptに直接設定します。
    • title：カテゴリ名
    • url：リンク先URL（下の階層に遷移さえる場合は設定なし）
    • image：画像（タイトルの左）を設定したい場合設定します
      • 画像（image）は静的変数を利用しアクション内で画像をアップロードすることが可能です

• サンプル

  var categories = [
    {
        title : '大カテゴリー 1',
        image : '//img-cf.karte.io/image/5da689ea381e3100114e35a9::img01.png',
        items : [{
            title : '中カテゴリー 1',
            items : [{
                title : '小カテゴリー 1',
                url   : '/apparel/items/hats.html?category=1'
            }, {
                title : '小カテゴリー 2',
                url   : '/apparel/items/hats.html?category=2'
            }, {
                title : '小カテゴリー 3',
                url   : '/apparel/items/hats.html?category=3'
            }]
        }, {
            title : '中カテゴリー 2',
            items : [{
                title : '小カテゴリー 4',
                url   : '/apparel/items/hats.html?category=4'
            }, {
                title : '小カテゴリー 5',
                url   : '/apparel/items/hats.html?category=5'
            }, {
                title : '小カテゴリー 6',
                url   : '/apparel/items/hats.html?category=6'
            }]
        }, {
            title : '中カテゴリー 3',
            items : [{
                title : '小カテゴリー 7',
                url   : '/apparel/items/hats.html?category=7'
            }, {
                title : '小カテゴリー 8',
                url   : '/apparel/items/hats.html?category=8'
            }, {
                title : '小カテゴリー 9',
                url   : '/apparel/items/hats.html?category=9'
            }]
        }]
    }, {
        title : '大カテゴリー 2',
        image : '//img-cf.karte.io/image/5da6bb2fa0fad500116a38d7::img02.png',
        items : [{
            title : '中カテゴリー 4',
            image : '//img-cf.karte.io/image/5da6bb2fa0fad500116a38d7::img02.png',
            items : [{
                title : '小カテゴリー 10',
                url   : '/apparel/items/hats.html?category=10'
            }, {
                title : '小カテゴリー 11',
                url   : '/apparel/items/hats.html?category=11'
            }, {
                title : '小カテゴリー 12',
                url   : '/apparel/items/hats.html?category=12'
            }]
        }, {
            title : '中カテゴリー 5',
            items : [{
                title : '小カテゴリー 13',
                url   : '/apparel/items/hats.html?category=13'
            }, {
                title : '小カテゴリー 14',
                url   : '/apparel/items/hats.html?category=14'
            }, {
                title : '小カテゴリー 15',
                url   : '/apparel/items/hats.html?category=15'
            }]
        }, {
            title : '中カテゴリー 6',
            items : [{
                title : '小カテゴリー 16',
                url   : '/apparel/items/hats.html?category=16'
            }, {
                title : '小カテゴリー 17',
                url   : '/apparel/items/hats.html?category=17'
            }, {
                title : '小カテゴリー 18',
                url   : '/apparel/items/hats.html?category=18'
            }]
        }]
    }, {
        title : '大カテゴリー 3',
        image : '//img-cf.karte.io/image/5da6bb390ece50001148d809::img03.png',
        items : [{
            title : '中カテゴリー 7',
            items : [{
                title : '小カテゴリー 19',
                url   : '/apparel/items/hats.html?category=19'
            }, {
                title : '小カテゴリー 20',
                url   : '/apparel/items/hats.html?category=20'
            }, {
                title : '小カテゴリー 21',
                url   : '/apparel/items/hats.html?category=21'
            }]
        }, {
            title : '中カテゴリー 8',
            items : [{
                title : '小カテゴリー 22',
                url   : '/apparel/items/hats.html?category=22'
            }, {
                title : '小カテゴリー 23',
                url   : '/apparel/items/hats.html?category=23'
            }, {
                title : '小カテゴリー 24',
                url   : '/apparel/items/hats.html?category=24'
            }]
        }, {
            title : '中カテゴリー 9',
            items : [{
                title : '小カテゴリー 25',
                url   : '/apparel/items/hats.html?category=25'
            }, {
                title : '小カテゴリー 26',
                url   : '/apparel/items/hats.html?category=26'
            }, {
                title : '小カテゴリー 27',
                url   : '/apparel/items/hats.html?category=27'
            }]
        }]
    }
  ];

その他、対象ユーザーや対象イベントを設定してご利用ください。
商品ページにアクセス毎に配信することを推奨しております。

なお、本シナリオでは、エレメントビルダーで編集するアクションのみが設定されています。