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

商品グループを表示するための記述を入れてください。

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

「HTML」欄の末尾付近

</section>

の前に、以下のソースを追記（コピー＆ペースト）し保存してください。

＜HTML例＞

<!-- 商品グループ -->
<{if $item.group.has_item}>
<h2 class="top-h2">Related Item<span>関連する商品</span></h2>
<ul class="item-list-img">
    <{section name=i loop=$item.group.list max=6}>
    <li>
    <a href="<{$item.group.list[i].url}>">
        <{if $item.group.list[i].is_sale}>
        <div class="sale-count"><{$item.group.list[i].sale_rate}>%<span>off</span></div>
        <{else}>
        <{/if}>
        <img src="<{$item.group.list[i].image_L}>" alt="<{$item.group.list[i].name}>">
        <div class="item-list-txt">
        <p class="item-list-name"><{$item.group.list[i].name}></p>
        <{if $item.group.list[i].is_sale}>
        <p class="item-list-price sale">￥<{$item.group.list[i].price|number_format}><span>（税込）</span><span class="item-sale">SALE</span></p>
        <{elseif $item.group.list[i].is_soldout}>
        <p class="item-list-price">￥<{$item.group.list[i].price|number_format}><span>（税込）</span><span class="item-soldout">Sold out</span></p>
        <{else}>
        <p class="item-list-price">￥<{$item.group.list[i].price|number_format}><span>（税込）</span></p>
        <{/if}>
        </div>
    </a>
    </li>
    <{/section}>
</ul>
<{/if}>

表示する個数を指定する場合は、上記の　max=6　の数字を変更してください。

間隔はCSSを追加して調整してください。

＜CSS例＞

「商品詳細」「CSS」に追記

.item-detail-box {
    margin-bottom: 100px;
}

関連記事