商品詳細ページのHTMLを編集することで、追加商品画像もサブ画像と同じようにクリックで拡大表示させることができます。
※2025/12/23以前に追加したデザインセットをご利用の場合は、先に以下のページを参照し、拡大表示を導入してください。
■よくある質問
【クリエイターモード】テンプレートCompleteの商品詳細ページで、商品画像を「拡大（ピンチアウト）」表示する方法を教えてください。
＜手順＞
編集する前にデザインセットのコピーボタンをクリックしてバックアップを保管し、元の状態に戻せるように準備したうえで作業をおこなってください。
■makeshopサポート
ショップデザインバックアップしてますか？！
※すでにデザインセットが5個以上ある場合は以下を参照してください。
■よくある質問
【クリエイターモード】デザインセットが5個以上あるとコピーできません。バックアップを取る方法を教えてください。
ショップデザイン / テンプレート選択・編集 / クリエイターモード / 商品詳細
「HTML」入力欄内に一度カーソルを置いた状態でキーボードの Ctrl と F キーを同時に押し、表示される検索窓に
add-image-list
と入力（コピー＆ペースト）し、キーボードの Enter キーを押して以下の記述を見つけてください。
※デザインセットの追加時期によっては記述内容が異なることがあります
<div class="add-image-list">
<img src="<{$item.add_image.list[i].image_url}>" alt="<{$item.name|escape:html}>" loading="lazy">
<div class="add-description"><{$item.add_image.list[i].description}></div>
</div>この<img>タグを、クリックで拡大表示させるためのリンク（<a>タグ）で囲んでください。
＜変更例＞
<div class="add-image-list">
<a href="<{$item.add_image.list[i].image_url}>" class="glightbox" data-caption="<{$item.name|escape:html}>">
<img src="<{$item.add_image.list[i].image_url}>" alt="<{$item.name|escape:html}>" loading="lazy">
</a>
<div class="add-description"><{$item.add_image.list[i].description}></div>
</div>
上記の方法では、メイン画像・サブ画像と同じグループとして拡大表示されます。
別グループとして扱いたい場合は、追記した<a>タグにdata-gallery="add-image"のような属性を追加してください。
＜記述例＞
<div class="add-image-list">
<a href="<{$item.add_image.list[i].image_url}>" class="glightbox" data-caption="<{$item.name|escape:html}>" data-gallery="add-image">
<img src="<{$item.add_image.list[i].image_url}>" alt="<{$item.name|escape:html}>" loading="lazy">
</a>
<div class="add-description"><{$item.add_image.list[i].description}></div>
</div>
＜ご注意＞
上記は対処策の一例です。あくまでもひとつの例として参考にしてください。
カスタマイズが難しい場合は、有料の制作代行プランのご利用を検討してください。