【クリエイターモード】テンプレートPulsefitの商品詳細ページで、サブ画像を登録した商品でもメイン画像を表示させることはできますか。 – makeshop よくある質問

サブ画像を登録した商品でも、商品詳細ページでメイン画像を表示させることは可能です。
※1枚目にメイン画像が表示され、2枚目以降にサブ画像が表示されるようになります。

以下の手順で対応してください。

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

「HTML」欄

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

multi

と入力し、Enterキーを押して以下のソースを探してください。

<div class="swiper-container slider">
    <div class="swiper-wrapper">
    <{section name=i loop=$item.multi_image.list}>
        <div class="swiper-slide">
            <a href="<{$item.multi_image.list[i].image_L}>" class="glightbox" data-caption="<{$item.name|escape:html}>">
            <img src="<{$item.multi_image.list[i].image_L}>" alt="<{$item.name|escape:html}>">
            </a>
        </div>
    <{/section}>
    </div>
    <div class="swiper-button-prev">
    </div>
    <div class="swiper-button-next">
    </div>
</div>
<div class="swiper-container thumbnail">
    <div class="swiper-wrapper">
    <{section name=i loop=$item.multi_image.list}>
        <div class="swiper-slide">
            <img src="<{$item.multi_image.list[i].image_L}>" alt="<{$item.name|escape:html}>">
        </div>
    <{/section}>
    </div>
</div>

このソースに、メイン画像とそのサムネイルを表示するためのHTMLを追記してください。

以下の赤字で表示している記述を、ループの開始（section～）の前の位置にコピー＆ペーストしてください。

＜追記後＞

<div class="swiper-container slider">
    <div class="swiper-wrapper">
    <div class="swiper-slide">
       <a href="<{$item.image_L}>" class="glightbox" data-caption="<{$item.name|escape:html}>">
         <img src="<{$item.image_L}>" alt="<{$item.name|escape:html}>">
       </a>
    </div>
    <{section name=i loop=$item.multi_image.list}>
        <div class="swiper-slide">
            <a href="<{$item.multi_image.list[i].image_L}>" class="glightbox" data-caption="<{$item.name|escape:html}>">
            <img src="<{$item.multi_image.list[i].image_L}>" alt="<{$item.name|escape:html}>">
            </a>
        </div>
    <{/section}>
    </div>
    <div class="swiper-button-prev">
    </div>
    <div class="swiper-button-next">
    </div>
</div>
<div class="swiper-container thumbnail">
    <div class="swiper-wrapper">
    <div class="swiper-slide"><img src="<{$item.image_M}>" alt="<{$item.name|escape:html}>"></div>
    <{section name=i loop=$item.multi_image.list}>
        <div class="swiper-slide">
            <img src="<{$item.multi_image.list[i].image_L}>" alt="<{$item.name|escape:html}>">
        </div>
    <{/section}>
    </div>
</div>

ペーストできたら保存してください。1枚目にメイン画像が表示されます。