【クリエイターモード】テンプレートCompleteの各商品一覧でアイコンを表示したいです。タグを記述する場所を教えてください。 – makeshop よくある質問

テンプレートCompleteでアイコンを表示するには、表示したい商品一覧のHTMLにソースを追記し、CSSで表示サイズを調整します。

※テンプレートCompleteの商品リストにある「SALE」「SOLD OUT」の表示は、商品に設定したアイコンとは別の表示です。

手順1)　商品にアイコンを設定する

商品リストに表示するアイコンを、商品ごとに指定します。すでに設定している場合は、手順2)に進んでください。

商品管理 / 商品一覧 / 商品登録・編集（オンラインマニュアル）

表示したいアイコンにチェックを入れて保存します。ショップページには、1商品につき最大3つまで表示されます。

手順2)　HTMLにアイコンを表示するソースを追記する

設定したアイコンを、各商品リストの商品名の前に表示するための記述を追加します。

※ソースコードを編集する前に、必ずデザインセットのバックアップを取ってから実施してください。バックアップがない場合は、元の状態に戻せないことがあります。
【クリエイターモード】デザインセット（ソースコード）をバックアップする方法を教えてください。

表示したい場所ごとに、ショップデザイン / テンプレート選択・編集 / クリエイターモード /　の各画面のHTMLを編集します。

表示場所	編集する画面	変数タグ
新商品	モジュール管理「新商品」	$new_item
おすすめ商品	モジュール管理「おすすめ商品」	$recommend_item
スペシャル商品	モジュール管理「スペシャル商品」	$special_item
ランキング	モジュール管理「ランキング」	$ranking_item
最近チェックしたアイテム	モジュール管理「最近チェックした商品」	$recently_item
商品カテゴリーページの商品一覧	商品カテゴリー「HTML」欄	$category.item
商品検索結果ページの商品一覧	商品検索結果「HTML」欄	$search.item

表示場所ごとの「検索キーワード」と「追記例」は、下記の項目をクリックして開いてください。
編集画面のHTML欄内に一度カーソルを置いた状態で、キーボードのCtrlとFキーを同時に押し、
表示される検索窓に「検索キーワード」を入力してEnterキーを押すと、該当の行が見つかります。

新商品（クリックで展開）

編集する画面

ショップデザイン / テンプレート選択・編集 / クリエイターモード / モジュール管理「新商品」

検索キーワード

$new_item.list[i].name

商品名を表示している、次のような行が見つかります。

<p class="item-name"><a href="<{$new_item.list[i].url}>"><{$new_item.list[i].name|escape:html}></a></p>

この行の前に、次のソースを追記して保存してください。

<{if $new_item.list[i].icon.has_item}>
  <ul class="item-list-icon">
    <{section name=j loop=$new_item.list[i].icon.list}>
      <li><img src="<{$new_item.list[i].icon.list[j].image_url}>" alt=""></li>
    <{/section}>
  </ul>
<{/if}>

おすすめ商品（クリックで展開）

編集する画面

ショップデザイン / テンプレート選択・編集 / クリエイターモード / モジュール管理「おすすめ商品」

検索キーワード

$recommend_item.list[i].name

商品名を表示している、次のような行が見つかります。

<p class="item-name"><a href="<{$recommend_item.list[i].url}>"><{$recommend_item.list[i].name|escape:html}></a></p>

この行の前に、次のソースを追記して保存してください。

<{if $recommend_item.list[i].icon.has_item}>
  <ul class="item-list-icon">
    <{section name=j loop=$recommend_item.list[i].icon.list}>
      <li><img src="<{$recommend_item.list[i].icon.list[j].image_url}>" alt=""></li>
    <{/section}>
  </ul>
<{/if}>

スペシャル商品（クリックで展開）

編集する画面

ショップデザイン / テンプレート選択・編集 / クリエイターモード / モジュール管理「スペシャル商品」

検索キーワード

$special_item.list[i].name

商品名を表示している、次のような行が見つかります。

<p class="item-name"><a href="<{$special_item.list[i].url}>"><{$special_item.list[i].name|escape:html}></a></p>

この行の前に、次のソースを追記して保存してください。

<{if $special_item.list[i].icon.has_item}>
  <ul class="item-list-icon">
    <{section name=j loop=$special_item.list[i].icon.list}>
      <li><img src="<{$special_item.list[i].icon.list[j].image_url}>" alt=""></li>
    <{/section}>
  </ul>
<{/if}>

ランキング（クリックで展開）

編集する画面

ショップデザイン / テンプレート選択・編集 / クリエイターモード / モジュール管理「ランキング」

検索キーワード

$ranking_item.list[i].name

商品名を表示している、次のような行が見つかります。

<p class="item-name"><a href="<{$ranking_item.list[i].url}>"><{$ranking_item.list[i].name|escape:html}></a></p>

この行の前に、次のソースを追記して保存してください。

<{if $ranking_item.list[i].icon.has_item}>
  <ul class="item-list-icon">
    <{section name=j loop=$ranking_item.list[i].icon.list}>
      <li><img src="<{$ranking_item.list[i].icon.list[j].image_url}>" alt=""></li>
    <{/section}>
  </ul>
<{/if}>

最近チェックしたアイテム（クリックで展開）

編集する画面

ショップデザイン / テンプレート選択・編集 / クリエイターモード / モジュール管理「最近チェックした商品」

検索キーワード

$recently_item.list[i].name

商品名を表示している、次のような行が見つかります。

<p class="item-name"><a href="<{$recently_item.list[i].url}>"><{$recently_item.list[i].name|escape:html}></a></p>

この行の前に、次のソースを追記して保存してください。

<{if $recently_item.list[i].icon.has_item}>
  <ul class="item-list-icon">
    <{section name=j loop=$recently_item.list[i].icon.list}>
      <li><img src="<{$recently_item.list[i].icon.list[j].image_url}>" alt=""></li>
    <{/section}>
  </ul>
<{/if}>

商品カテゴリーページの商品一覧（クリックで展開）

編集する画面

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

検索キーワード

$category.item.list[i].name

商品名を表示している、次のような行が見つかります。

<p class="item-name"><a href="<{$category.item.list[i].url}>"><{$category.item.list[i].name|escape:html}></a></p>

この行の前に、次のソースを追記して保存してください。

<{if $category.item.list[i].icon.has_item}>
  <ul class="item-list-icon">
    <{section name=j loop=$category.item.list[i].icon.list}>
      <li><img src="<{$category.item.list[i].icon.list[j].image_url}>" alt=""></li>
    <{/section}>
  </ul>
<{/if}>

商品検索結果ページの商品一覧（クリックで展開）

編集する画面

ショップデザイン / テンプレート選択・編集 / クリエイターモード / 商品検索結果「HTML」欄

検索キーワード

$search.item.list[i].name

商品名を表示している、次のような行が見つかります。

<p class="item-name"><a href="<{$search.item.list[i].url}>"><{$search.item.list[i].name|escape:html}></a></p>

この行の前に、次のソースを追記して保存してください。

<{if $search.item.list[i].icon.has_item}>
  <ul class="item-list-icon">
    <{section name=j loop=$search.item.list[i].icon.list}>
      <li><img src="<{$search.item.list[i].icon.list[j].image_url}>" alt=""></li>
    <{/section}>
  </ul>
<{/if}>

※クラス名「item-list-icon」は任意の名前に変更できます。ただし、「item-icon」はテンプレートCompleteが「SALE」「SOLD OUT」の表示に使用しているため、使用しないでください。

手順3)　CSSでアイコンの表示サイズを調整する

テンプレートCompleteの初期のCSSでは、商品リスト内の画像が枠の幅いっぱいに表示されます。追記したアイコン画像が大きく表示されて表示が崩れるため、アイコンのサイズを元の大きさに戻すCSSを追記します。

ショップデザイン / テンプレート選択・編集 / クリエイターモード / 全ページ共通「CSS」

CSS欄の最後に、次のCSSを追記して保存してください。

追記例）

.item-list-icon li {
  width: auto;
  margin: 0;
  display: inline-block;
}
.item-list-icon li img {
  width: auto;
  height: auto;
}

※アイコンの大きさを指定したい場合は、「.item-list-icon li img」の「width: auto;」を「width: 30px;」のように変更してください。

※CSSは、必ず既存のCSSよりあとに追記してください。既存のCSSより前に記述すると、反映されないことがあります。

■makeshopサポート記事
クリエイターモードでアイコンを表示しよう！

【クリエイターモード】「ショップでの表示場所」を指定した商品にアイコンを表示させることはできますか。

■マニュアル
商品の登録・編集（アイコン）
商品アイコン一括設定

■タグリファレンス
クリエイターモードタグリファレンス（全ページ共通）

手順1) 商品にアイコンを設定する

手順2) HTMLにアイコンを表示するソースを追記する

手順3) CSSでアイコンの表示サイズを調整する

関連記事

手順1)　商品にアイコンを設定する

手順2)　HTMLにアイコンを表示するソースを追記する

手順3)　CSSでアイコンの表示サイズを調整する