【クリエイターモード】テンプレートWabisabiのカテゴリーページに表示されているカテゴリー名の背景画像をカテゴリー別で変更したいです。方法を教えてください。

テンプレート【Wabisabi】のカテゴリーページでは、カテゴリー別イメージが登録されている場合は、
親カテゴリー（1階層目のカテゴリー）のカテゴリー名の背景画像として高さ222pxで表示されます。

登録がない場合または子カテゴリーには、テンプレートの初期値に指定された画像（下図赤枠部分の背景画像）が表示されるようにデザインされています。

こちらの画像をカテゴリー別イメージか、カテゴリーごとに異なる画像を表示させたい場合は
クリエイターモード用の分岐を
ショップデザイン / テンプレート選択・編集 / クリエイターモード / 商品カテゴリー
「HTML」欄に記述する必要がございます。

手順1）
親カテゴリーページの場合はカテゴリー別イメージを
ショップデザイン / 機能・設定 / 商品・カテゴリ / カテゴリー別イメージの登録
にて登録してください。

オンラインマニュアル：カテゴリー別イメージの登録

カテゴリー別イメージの登録ができない子カテゴリーで表示させたい画像は、
あらかじめファイルサーバーにアップロードしてご用意ください。

■makeshopサポート　画像やCSSファイルをアップロードしたい

いずれの画像も高さ222pxで作成してください。

手順2）
ショップデザイン / テンプレート選択・編集 / クリエイターモード / 商品カテゴリー
「CSS」欄　に下記を追記してください。

追記例）

.category-image {
 height: 222px;
}
.category-image::before {
 display: none!important;
}
.category-title {
 color: #6E6E6E;
}

手順3）
ショップデザイン / テンプレート選択・編集 / クリエイターモード / 商品カテゴリー
「HTML」欄

欄内に一度カーソルを置いた状態で、キーボードのCtrlとFキーを同時に押し表示される検索窓に

wabisabi_cat

と入力（コピー＆ペースト）し、キーボードのEnterキーを押して以下の記述を見つけてください。 

<img src="/view/images/template/6/wabisabi_cat.jpg" alt="<{$category.name}>">

この記述を削除し、削除した箇所に分岐の記述をお試しください。

記述例）ct1での画像指定の場合

<{if $category.code == 'ct1'}>
  <img src="ct1用の画像URL">
<{/if}>

画像URLはアップロードした画像のURLに変更してください。
 

ご参考）
カテゴリIDを使用したソースの書き方は、下記の記事をご参照ください。

■makeshopサポート　クリエイターモードでカテゴリーページを"カテゴリー別にデザイン"したい

関連記事：

【クリエイターモード】テンプレートWabisabiの、カテゴリーページに表示されている画像を変えるにはどうしたらよいですか。