【クリエイターモード】テンプレートCompleteの商品詳細ページで、商品画像を「拡大（ピンチアウト）」表示する方法を教えてください。 – makeshop よくある質問

HTMLの記述内容の変更とCSS、JavaScriptの追記で可能です。
※2025/12/23（火）以降にデザインセットをあらたに追加されている場合は、
あらかじめ記述が入っていますので、対応不要です。

手順1）
メイン画像とサムネイル画像のループ記述の変更をおこなってください。

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

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

<{if $item.multi_image.has_item}>

と入力（コピー＆ペースト）し、キーボードのEnterキーを押して、メイン画像・サムネイル画像の記述を見つけてください。
HTML欄　61から76行目付近　

<{if $item.multi_image.has_item}>
    <ul class="gallery">
        <li><div class="main-image clearfix"><img src="<{$item.image_L}>" alt="" class="item-image"></div></li>
        <{section name=i loop=$item.multi_image.list}>
            <li><img src="<{$item.multi_image.list[i].image_L}>" class="item-image" alt=""></li>
        <{/section}>
    </ul>
    <ul class="choice-btn">
        <li><div><img src="<{$item.image_L}>" alt="" class="item-image"></div></li>
        <{section name=i loop=$item.multi_image.list}>
            <li><img src="<{$item.multi_image.list[i].image_L}>" class="item-image" alt=""></li>
        <{/section}>
    </ul>
<{else}>
    <div class="main-image clearfix"><img src="<{$item.image_L}>" alt="" class="item-image"></div>
<{/if}>

上記を以下へ変更してください。

記述例）

<{if $item.multi_image.has_item || $item.is_option_image}>
    <ul class="gallery">
        <{section name=i loop=$item.multi_image.list}>
            <li>
                <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}>" class="item-image" alt="<{$item.name|escape:html}>">
                </a>
            </li>
        <{/section}>
    </ul>
    <ul class="choice-btn">
        <{section name=i loop=$item.multi_image.list}>
            <li><img src="<{$item.multi_image.list[i].image_L}>" class="item-image" alt="" loading="lazy"></li>
        <{/section}>
    </ul>
<{else}>
    <div class="main-image clearfix">
        <a href="<{$item.image_L}>" class="glightbox" data-caption="<{$item.name|escape:html}>">
            <img src="<{$item.image_L}>" alt="<{$item.name|escape:html}>" class="item-image">
        </a>
    </div>
<{/if}>

※1枚目に商品画像、2枚目以降にサブ画像を表示するデザインの場合はこちら

記述例）

<{if $item.multi_image.has_item || $item.is_option_image}>
    <ul class="gallery">
        <li>
        <a href="<{$item.image_L}>" class="glightbox" data-caption="<{$item.name|escape:html}>">
        <img src="<{$item.image_L}>" class="item-image" alt="<{$item.name|escape:html}>">
        </a>
        </li>
        <{section name=i loop=$item.multi_image.list}>
            <li>
                <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}>" class="item-image" alt="<{$item.name|escape:html}>">
                </a>
            </li>
        <{/section}>
    </ul>
    <ul class="choice-btn">
        <li><img src="<{$item.image_L}>" class="item-image" alt="" loading="lazy"></li>
        <{section name=i loop=$item.multi_image.list}>
            <li><img src="<{$item.multi_image.list[i].image_L}>" class="item-image" alt="" loading="lazy"></li>
        <{/section}>
    </ul>
<{else}>
    <div class="main-image clearfix">
        <a href="<{$item.image_L}>" class="glightbox" data-caption="<{$item.name|escape:html}>">
            <img src="<{$item.image_L}>" alt="<{$item.name|escape:html}>" class="item-image">
        </a>
    </div>
<{/if}>

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

<script src="<{$page.javascript}>"></script>

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

HTML欄641行目付近

<script src="<{$page.javascript}>"></script>

上記の前に以下を追記してください。

記述例）

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/glightbox/dist/css/glightbox.min.css" />
<script src="https://cdn.jsdelivr.net/npm/glightbox/dist/js/glightbox.min.js"></script>

※上記の行数は、テンプレートを初期状態のままご利用の場合の目安です。
デザインをカスタマイズされている場合は、該当する記述の位置（行数）が異なる場合があります。

手順2）
同じ画面のCSS欄の最後尾に以下を追記してください。

記述例）

.glightbox-clean .gclose {
  top: 90px!important;
}

.glightbox-clean .gnext {
  top: 45%!important;
  right: 10px!important;
  width: 35px!important;
  height: 45px!important;
}
.glightbox-clean .gprev {
  top: 45%!important;
  left: 10px!important;
  width: 35px!important;
  height: 45px!important;
}
@media (min-width: 768px) {
  .glightbox-clean .gclose {
    top: 15px!important;
  }
  .glightbox-clean .gnext {
    right: 30px;
    width: 40px;
    height: 50px;
    }
  }

手順3）
同じ画面のJavaScript欄の最後尾に以下を追記してください。

記述例）

//商品画像の拡大
const lightbox = GLightbox({
    loop: true,
    touchNavigation: true,
    draggable: true
});

if (typeof slider !== 'undefined') {
    slider.on('observerUpdate', function() {
        lightbox.reload();
    });
    slider.on('slideChangeTransitionEnd', function() {
        lightbox.reload();
    });
}

ショップデザインの構成やカスタマイズ状況によっては、上記のHTML修正およびCSS・JavaScriptの追記をおこなっても、想定どおりの表示や動作とならない場合があります。
その場合は、ショップ様のデザインにあわせて、追加のソース調整が必要となります。

関連記事