【クリエイターモード】テンプレート&moreで、トップページの「NewArrival」（新商品）にアイコンを表示させる方法を教えてください。 – makeshop よくある質問

ショップデザイン / テンプレート選択・編集 / クリエイターモード / モジュール管理
モジュール名「ページコンテンツ(new_arrival)」モジュールID：$module.new_arrival

のソース内の、『<figure>～</figure>』が画像を表示するソースです。
この位置にアイコンのHTMLを追記してください。

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

<img src="<{$new_item.list[i].image_M}>"

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

<figure class="product-item-image-wrap">
	<{if $new_item.list[i].is_soldout}>
		<span class="status-soldout">Soldout</span>
	<{/if}>
	<img src="<{$new_item.list[i].image_M}>" alt="<{$new_item.list[i].name}>" class="product-item-image">
</figure>

上記の、赤で示した行の前に以下のようにアイコンを表示するHTMLを追記し保存してください。

＜追記後＞

<figure class="product-item-image-wrap">
	<{if $new_item.list[i].is_soldout}>
		<span class="status-soldout">Soldout</span>
	<{/if}>
	<{if $new_item.list[i].icon.has_item}>
		<div class="item-icons">
			<{section name=j loop=$new_item.list[i].icon.list}>
				<img src="<{$new_item.list[i].icon.list[j].image_url}>" alt="">
			<{/section}>
		</div>
	<{/if}>
	<img src="<{$new_item.list[i].image_M}>" alt="<{$new_item.list[i].name}>" class="product-item-image">
</figure>

おすすめ商品、ランキングにもアイコンを表示させることができます。
それぞれの変数タグに変更して、同様に商品リストに追記してください。

おすすめ商品・・・モジュールID　$module.recommend（変数タグ：$recommend_item）
ランキング・・・モジュールID　$module.ranking（変数タグ：$ranking_item）

■makeshopサポート
クリエイターモードでアイコンを表示しよう！
https://www.support.makeshop.jp/design/?p=12595

関連記事