商品詳細画面で、商品画像をクリックで拡大する表示は
クリエイターモードの「＆more」テンプレートに
実装されていますので、
「＆more」をデザインセットにひとつご追加いただき、
（ショップには適用せずに）ソースをご参照ください。
ご作成が難しい場合は「＆more」テンプレートをご利用ください。
表示例）
https://tplandmore.makeshop.jp/view/item/000000000015
関連リンク：
【Complete】デザインセットの例ですが、下記にて画像をモーダル表示は可能です。
手順1）
ショップデザイン / テンプレート選択・編集 / クリエイターモード / 商品詳細
「HTML」欄の初期値では79行目付近
★
<!--追加商品画像-->
★の位置に下記を追記
追記例）
<div id="imgModal" class="modal">
<!-- モーダルの内容 -->
<div class="modal-content">
<span class="modal-content-close">×</span>
<img id="modal-image" src="">
</div>
</div>
手順2）
ショップデザイン / テンプレート選択・編集 / クリエイターモード / 商品詳細
「CSS」欄 の末尾に下記を追記
/* 画像拡大モーダル用のスタイル*/
.modal {
display: none;
position: fixed;
z-index: 15;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0,0,0,0.4);
}
.modal-content {
margin: 0 auto;
padding: 20px;
max-width: 800px; /* 最大幅 */
width: 100%;
}
/* モーダルの閉じるボタンのスタイル */
.modal-content-close {
color: #fff;
float: right;
font-size: 40px;
font-weight: bold;
}
.modal-content-close:hover,
.modal-content-close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
/* モーダル内部のスタイル */
.modal-content img{
max-width: 100%;
height: auto;
display: block;
margin: 0 auto;
}
@media screen and (max-width: 768px) {
.modal-content {
margin: 50% auto;
max-width: 90%;
}
}
手順3）
ショップデザイン / テンプレート選択・編集 / クリエイターモード / 商品詳細
「JavaScript」欄 の初期値では23行目付近
$('img.option-image').on('click', function() {
showOptionImage($(this).attr('data-option-image'));
});
☆
☆の箇所に下記を追記
追記例）
// モーダルを表示するための処理
$('#imgModal').on('click', function(event) {
var modalImg = $('#modal-image');
if ($(event.target).is(modalImg)) {
$('#imgModal').fadeOut();
}
});
// 画像クリックでモーダル表示
$('.main-image.clearfix img.item-image, .item-image ul.gallery img.item-image').on('click', function() {
var src = $(this).attr('src');
$('#modal-image').attr('src', src);
$('#imgModal').fadeIn();
});
// 閉じるボタン、モーダル以外の場所がクリックされた時の処理
$(".modal-content-close, .modal-bg").on("click", function() {
$("#imgModal").fadeOut();
});
表示例）
【ご注意】
jQuery（JavaScript）の実装については、
今後のシステムアップデート時に影響がでることも想定されるため、
サポート対象外となります。
当該のご案内いたしましたjQuery（JavaScript）に関する質問につきましても、
お答えできかねますので、あらかじめご了承ください。
- - - - - - - - - - - - - - - - - - - -
【Complete】の追加商品画像もクリックで拡大したい場合は、
「JavaScript」欄のclass指定に下記の赤字部分を追記してください。
// 画像クリックでモーダル表示
$('.main-image.clearfix img.item-image, .item-image ul.gallery img.item-image, .add-image-list img').on('click', function() {