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

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

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

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

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

<{section name=i loop=$item.multi_image.list}>

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

HTML欄　49行目付近

<{section name=i loop=$item.multi_image.list}>
    <div class="swiper-slide"><img src="<{$item.multi_image.list[i].image_L}>" alt="<{$item.name}>"></div>
<{/section}>

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

記述例）

<{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}>

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

<div class="item-image">

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

HTML欄　66行目付近

<div class="item-image">
   <img src="<{$item.image_L}>" alt="<{$item.name}>">
</div>

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

記述例）

<div class="item-image">
   <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>

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

<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

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

HTML欄　645行目付近

<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></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欄で以下の対応をおこなってください。

（１）
1行目に以下を追記してください

記述例）

var slider;

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

function showOptionImage(url) {

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

JavaScript欄　52行目付近

function showOptionImage(url) {
   if (url == '') {
       return;
   }
   var index = $('div.swiper-slide img[src="' + url + '"]').parent().data('swiper-slide-index');
   if (!isNaN(index)) {
       $('.swiper-container').get(0).swiper.slideTo(index);
   }
}

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

記述例）

function showOptionImage(url) {
   var $el = url && slider && $('.slider .swiper-slide img[src*="' + url + '"]').closest('.swiper-slide');
   if ($el && $el.length) {
       slider.slideToLoop($el.attr('data-swiper-slide-index') || $el.index());
   }
}

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

var slider = new Swiper('.slider', {

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

JavaScript欄　77行目付近

var slider = new Swiper('.slider', {

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

記述例）

slider = new Swiper('.slider', {

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

if (quantityInput && quantityDown) {

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

JavaScript欄　100行目付近

   if (quantityInput && quantityDown) {
       quantityDown.addEventListener('click', function () {
           var currentValue = parseInt(quantityInput.value, 10) || 1;
           if (currentValue > 1) {
               quantityInput.value = currentValue - 1;
           }
       });
   }

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

記述例）

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の追記をおこなっても、想定どおりの表示や動作とならない場合があります。
その場合は、ショップ様のデザインにあわせて、追加のソース調整が必要となります。

関連記事