2024.9.18公開: 顧客接点を増やすチャンス!特別感が顧客の心を掴むバースデーメール

商品一覧ページの上部にカテゴリ専用のヘッダを表示する方法

カテゴリ専用のヘッダにイメージ画像や説明文を表示させる

 

1 設定作業の前に用意するもの



■カテゴリ専用のイメージ画像や説明文を用意します

  • 商品のご案内文
    該当カテゴリに属する商品の紹介文を用意します。
  • イメージ画像
    お店の利用中のテーマによって、推奨画像サイズは異なります。
    カスタムテンプレートのレスポンシブ-ホワイトの場合は、横幅が900pxが推奨サイズです。

    利用中のテーマが、カスタムテンプレートのE-ホワイトの場合は、横幅720px、ベーシックテンプレートの場合は、横幅を670pxが推奨サイズです。


推奨画像サイズについては、他のページでご案内しています。
>> 詳しくは、オンラインサポートで検索「198」


全角5,000文字まで入力できます。
カテゴリ専用フッタも同様に編集できます。

2 カテゴリ専用ヘッダを編集する

■カテゴリ専用ヘッダを表示するカテゴリを選びます

  1. カテゴリ専用ヘッダを表示するカテゴリをクリックします。
  2. カテゴリを選択した状態で、「編集」をクリックします。

■カテゴリ専用ヘッダの入力欄まで移動します


「カテゴリ専用ヘッダ」の「画像挿入」をクリックします。

■登録する画像を選びます

  1. 「ファイルを選択」をクリックします。
  2. 画像ファイルを選択するダイアログボックスが開きます。
  3. あらかじめ用意した画像を選びます。
  4. 「開く」をクリックします。
  5. 選択した画像のファイル名が反映されていることを確認します。

■画像のHTMLタグを挿入します

  1. 「ファイル名」は、拡張子を含めた半角英数で入力します。
    選択した画像ファイルが「日本語のファイル名」の場合などに利用します。


    選択した画像ファイル名が半角英数の場合は入力不要です。

    <例>
    バナー画像.jpg ・・・ファイル名が日本語のため画像挿入できません。
    banner.jpg  ・・・画像挿入できます。


    代替テキストはHTMLのalt属性に反映されます。

  2. 画像を挿入します。

  3. 画像のHTMLタグが挿入されると同時に、画像台帳にも登録されます。
    管理画面メニュー「お店運営 > 画像管理 > 画像台帳」から、登録画像が確認できます。

  1. カテゴリ専用ヘッダには画像の他、カテゴリの説明文も入力できます。


    Eストアーモバイル(スマートフォンサイト) の商品一覧ページを利用している場合は、「スマートフォン用」の 入力欄に同じ手順で画像を挿入します。

  2. ページ下部にある「カテゴリを保存」をクリックします。
  3. 右上の「設定を保存」をクリックします。
  4. 画面下の「設定を保存」をクリックします。

■HTMLタグを編集して、リンク先も指定できます

カテゴリ専用ヘッダの欄はHTML編集ができるので、画像を表示する以外にリンク指定ができます。
下のHTMLタグの青色部分をお店の情報に合わせて変更し、「カテゴリ専用ヘッダ」の欄に入力します。

  • 画像にリンクを張る場合のHTMLタグ
    <a href="リンク先のURL"><img src="/pic-labo/画像ファイル名" alt="代替テキスト"></a>
  • 文字にリンクを張る場合のHTMLタグ
    <a href="リンク先のURL">文字</a>

  • リンク先のURL
    画像や文字をクリックした後に表示させたいページのURLです。
    リンク先のURLは、管理画面メニュー「サーバー > URL一覧」 から確認できます。
  • 画像ファイル名、代替テキスト
    画像台帳に登録したときのファイル名です。
    管理画面メニュー「お店運営 > 画像管理 > 画像台帳」から確認できます。
  • 文字
    見出しとなるテキストを自由に入力してください。
知っておくと便利なHTMLタグについて、他のページで詳しくご案内しています。
>>オンラインサポートで検索「179」