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

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

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

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

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

main-image

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

HTML欄　62行目付近

<li>
   <div class="main-image clearfix"><img src="<{$item.image_L}>" alt="<{$item.name}>" class="item-image"></div>
</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}>" alt="<{$item.name|escape:html}>">
   </a>
</li>
<{/section}>

HTML欄　82行目付近

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

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

記述例）

<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}>">
   </a>
</div>

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

<script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

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

HTML欄　694行目付近

<script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.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欄で以下の対応をおこなってください。

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

.product-detail .item-image-block .main-image img.item-image {

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

CSS欄　20行目付近

.product-detail .item-image-block .main-image img.item-image {
   width: 100%;
}

上記を削除してください。

（２）
CSS欄の最後尾に以下を追記（コピー＆ペースト）してください。

記述例）

/*商品画像の拡大*/
.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欄で以下の対応をおこなってください。

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

$('img.option-image').on('click', function() {

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

JavaScript欄　24行目付近

$('img.option-image').on('click', function() {
   showOptionImage($(this).attr('data-option-image'));
});

上記の後ろに以下を追記（コピー＆ペースト）してください。

記述例）

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

関連記事