デザインテンプレート【BRothers】では、最新のデザインセットをショップに適用することで
バリエーションの項目ごと（SKU）の画像が表示されます。
2023年4月23日の追加リリース以前よりご利用のショップ様におかれましては、
新しいデザインセットを追加して適用するか、またはソースを追記することでSKU（バリエーション）ごとの画像の表示が可能になります。
※編集の際はかならずデザインセットのコピーを保管してからソースを変更してください。
■makeshopサポート
ショップデザインバックアップしてますか？！
https://www.support.makeshop.jp/design/?p=849
＜ソースの確認方法＞
デザインセットに【BRothers】テンプレートをひとつ追加し、ショップに適用はせずに、必要なソース（HTMLとCSS）を参照してください。
＜ソースを追加する手順＞
【商品詳細】
（１）HTMLを追加
ショップデザイン / テンプレート選択・編集 / クリエイターモード / 商品詳細
「HTML」欄内にカーソルを一度置いた状態でキーボードの「Ctrl＋F」キーを押し、表示される検索窓に
$item.option_sku.list[i].name1
をコピー＆ペーストし、Enterキーを押して以下のソースを探してください。
<{$item.option_sku.list[i].name1}>
このソースの後ろに以下を追記（コピー＆ペースト）してください。
追記例）
<{if $item.option_sku.list[i].image_S != ''}>
<img src="<{$item.option_sku.list[i].image_S}>" data-option-image="<{$item.option_sku.list[i].image_L}>" class="option-image">
<{/if}>
（２）CSSを追加
ショップデザイン / テンプレート選択・編集 / クリエイターモード / 商品詳細
「CSS」欄の末尾に以下をコピー＆ペーストしてください。
/* SKU image */
.sku .option-image { display:block; } .sku .option-image:hover { cursor:pointer; }
（３）JavaScriptを追加
ショップデザイン / テンプレート選択・編集 / クリエイターモード / 商品詳細
「JavaScript」欄に、以下の内容を参照して必要な記述を追加し、保存してください。
（太字の部分を追加してください。）
function MakeShop_afterItemOptionChange(data) {
if (data.isSoldout) {
$('.instock').removeClass('on').addClass('off');
$('.outstock').removeClass('off').addClass('on');
} else {
$('.instock').removeClass('off').addClass('on');
$('.outstock').removeClass('on').addClass('off');
}
showOptionImage(data.imageL);
}
function MakeShop_afterCartEntry(data) {
if (data.result) {
$('.header-cart-count').text(data.totalQuantity).fadeIn(300);
} else {
data.method.modal(data.error.message);
}
return false;
}
$(function() {
var itemimage = new Swiper('.swiper-container', {
loop: true,
speed: 600,
effect: 'slide',
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
},
pagination: {
el: '.swiper-pagination',
type: 'bullets',
clickable: true
}
});
$('img.option-image').on('click', function() {
showOptionImage($(this).attr('data-option-image'));
});
});
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 + 1);
}
}
【買い物かご】
ショップデザイン / テンプレート選択・編集 / クリエイターモード /買い物カゴ
変更前：
<div class="cart-item-image">
<a href="<{$cart.list[i].url}>"><img src="<{$cart.list[i].image_S}>" alt="<{$cart.list[i].name}>"></a>
</div>
を以下に変更（太字の部分を追加）し、保存してください。
変更後：
<div class="cart-item-image">
<a href="<{$cart.list[i].url}>">
<{if $cart.list[i].selected_option.image_L}>
<img src="<{$cart.list[i].selected_option.image_L}>" alt="<{$cart.list[i].name}>">
<{else}>
<img src="<{$cart.list[i].image_S}>" alt="<{$cart.list[i].name}>">
<{/if}>
</a>
</div>
■マニュアル
バリエーションの登録・編集
https://manual.makeshop.jp/hc/ja/articles/18692070935321
■クリエイターモードタグ
SKU
https://reference.makeshop.jp/creator-mode/contents/detail/index.html#detail-sku
＜関連記事＞
【クリエイターモード】テンプレートCompleteでSKU（バリエーション）ごとの画像を表示させることはできますか。