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

アイコンを表示する記述を追加してください。

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

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

$item.name

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

<h2 class="item-name"><{$item.name}></h2>

こちらが「商品名」のソースです。
この前または後ろなど、アイコンを表示させたい位置に、アイコン表示のHTMLを追記してください。

追記例）

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

アイコンを横に並べるCSSを「CSS」に追記し保存してください。

/* icon */
.item-icon-list{
  display: flex;
  justify-content: right;
  margin: 0;
}
.item-icon-list li{
  margin-left: 6px;
}

CSSを記述する位置は管理しやすい場所か、特に決まらなければ末尾に追記してください。

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

関連記事