#5App設定(カテゴリーヘッダー、メルマガ、ポップアップバナー設定)

カテゴリーApp(カテゴリーヘッダー画像の設定)

BASEのカテゴリーAppの仕組みとして、「カテゴリーごとに画像を設定する」という機能は存在していませんが、テーマ独自の方法でカテゴリーヘッダーを実現しています。

💡

カテゴリーAppでは、カテゴリー項目は大カテゴリー、中カテゴリー、小カテゴリーと3階層までいくつでも作成できます。しかし、1つ1つすべてのカテゴリーごとに画像を設定するのは設定作業が煩雑になりすぎるため、この機能では「設定できるカテゴリー数は8つまで」としています。

そのため、おすすめの使い方として、「大カテゴリーに設定した画像を、中、小カテゴリーも共有する」という方法にすることで、たくさんのカテゴリーが構造化されたショップでも対応ができます。もし大中小カテゴリー全て含めて8カテゴリー以下であれば、大中小カテゴリー全て別々の画像にすることも可能です。

STEP 1: 「【カテゴリーヘッダー】ON/OF」をONにする

テーマ設定の 「【カテゴリーヘッダー】ON/OF」をONにします。これにより、全カテゴリーページにヘッダー画像レイアウトが適用されます。ONにした場合は全てのカテゴリー画像を設定してください。

STEP 2: カテゴリーのIDを調べて入力する

  1. 自分のショップの設定したいカテゴリーページを表示する
  2. ブラウザのアドレスバーにあるURL「ショップドメイン/categories/0000000」をチェック URLからカテゴリーIDを確認
  3. 最後の7桁の数字「0000000」を選択し、コピーする 7桁のカテゴリーIDをコピー
  4. テーマ設定画面「カテゴリー:ページ番号」欄に、先頭に「cat」をつけた「cat0000000」をペーストする catをつけてペースト

STEP 3: 画像をアップロードする

「カテゴリー1:画像」にそのカテゴリーに合わせたい画像をアップロードします。

カテゴリー画像のアップロード

STEP 4: 確認する

テーマ設定を保存し、先程のカテゴリーページを確認、ヘッダー画像が表示されていれば完了です。

STEP 5: 中・小カテゴリーの設定方法

中・小カテゴリーにも同じ画像を設定するには、7桁の数字の先頭に「cat」をつけ「,.(コンマピリオド)」で繋げます。

例えば、大カテゴリが0000000、中カテゴリーが1111111、小カテゴリーが2222222だった場合、「cat0000000,.cat1111111,.cat2222222」と入力します。まとめていくつでも追加できます。ここにまとめられたカテゴリーページ全てに、対応する画像が表示されます。

複数カテゴリーの設定例
💡

画像が表示されないときのチェック

  • カテゴリーID(7桁の半角数字)が間違っていないか
  • 「cat」(半角)をつけ忘れていないか
  • 複数カテゴリーの時は「,.」(コンマ、ピリオド)が正しく入っているか
  • 複数カテゴリーの時も全てのカテゴリーIDに「cat」がついているか
  • 前後や途中に見えない文字(スペースなど)が入っていないか
💡

ヘッダー画像なので画像はかなり横長の比率で表示されます。またパソコン、スマホによっても表示領域は変化します。全体が見えないと困るような写真ではなく、雰囲気として部分的に表示されていても問題ないものを選ぶのがポイントです。

注意事項

もし将来的にBASEのカテゴリーAppの機能として正式にカテゴリー画像の機能が追加された場合、この機能の提供を終了します。また、BASEの仕様変更によりカテゴリー画像の設定が不可能になる可能性もあります。どうぞご了承ください。

カテゴリーヘッダー設定数を8個としている理由として、デザインテーマはパソコン操作に慣れている方も慣れていない方も利用するものであるため、テーマ設定項目が増えすぎて分かりにくくなること、少なすぎて自由度が低くなること、のバランスをとっています。9個以上に増やしたい場合などは、カスタマイズをご依頼ください。


メルマガApp、ポップアップバナー設定

興味を持ってくれている人、まだ迷っていて購入まではしていない人でも、その後のメルマガによる接点があれば再度ショップに訪れて購入してくれる可能性が非常に高くなります。

このテーマでは「メールマガジンApp」を最大限活用するための拡張機能を利用できます。

登録フォームをフッターに表示

【メルマガApp】フッターに表示ONで表示
⌊ メルマガ購読フォームタイトルメルマガフォームタイトル
⌊ 説明文タイトルに続く紹介文など
⌊ フッター表示デザインフッターメルマガのエリアに背景を設定します。無地の背景色を指定、または画像を設定できます。
⌊ 背景色 ※1背景色を選んだ場合に色を指定します。
⌊ ビジュアル画像 ※2ビジュアル画像を選んだ場合にアップロードします。ポップアップも利用する場合はさまざまな縦横比率で表示することになるため、クロップを想定した雰囲気的なイメージ画像を推奨します。またテキスト、メールアドレス送信フォームが重なっても読みづらくならないような画像であることも大切です。
⌊ テキストカラー背景の状況に合わせて黒文字、白文字を設定します。

メルマガポップアップ表示

サイトアクセスと同時に画面に登録フォームを表示します。このメルマガ登録を積極的に促す見せ方は、海外のECショップでも必ずと言っていいほど採用されています。しっかりとしたメールマガジン運営をする予定であれば、ぜひ活用してください。

【メルマガApp】ポップアップ表示 ON/OFF「【メルマガApp】ポップアップ表示 ON/OFF」を「ON」にし、ショップのトップページにアクセスしてポップアップが表示されることを確認してください。
【メルマガ/バナー】ポップアップ表示頻度このポップアップは、トップページにアクセスすると画面を覆うように表示されます。何度も表示されてしまわぬよう、「ポップアップ表示頻度」にて前回のアクセスからどのくらいの時間が経過したら再表示するかを設定します。

画像ポップアップバナーの表示

メルマガのポップアップ機能と同じように、シンプルな画像バナーをポップアップ表示します。

(画像バナーポップアップは「App設定」ではありませんが、メルマガポップアップの設定内容を共有するためにこちらにて設定を行います。)

【ポップアップ画像バナー】バナー表示バナー画像をアップロードし、「ON」にするとポップアップ表示されます。ショップのトップページにアクセスしてポップアップが表示されることを確認してください。
※メルマガポップアップが「ON」になっている場合はそちらが優先されます。双方を同時に表示することはできません。
⌊ バナー画像バナー画像は極端な縦長横長ではないもの、出来るだけ正方形に近いものをお勧めします。ポップアップは訪問者の立場に立てば、いきなり強制的に見せられるものです。パッと見て何が言いたいのか分かる2,3単語のシンプルなデザイン(SALE 00%OFF、クーポンコードXXXXX)がお勧めです。
【メルマガ/バナー】ポップアップ表示頻度表示頻度の設定はメルマガポップアップと共用です。何度も表示されてしまわぬよう、「ポップアップ表示頻度」にて前回のアクセスからどのくらいの時間が経過したら再表示するかを設定します。