デザインテンプレート【Basics】では、ソースを追記することでSKU（バリエーション）ごとの画像の表示が可能になります。
※編集の際はかならずデザインセットのコピーを保管してからソースを変更してください。
■makeshopサポート
ショップデザインバックアップしてますか？！
https://www.support.makeshop.jp/design/?p=849
＜ソースを追加する手順＞
【商品詳細】
（１）HTMLを追加
ショップデザイン / テンプレート選択・編集 / クリエイターモード / 商品詳細
「HTML」欄内にカーソルを一度置いた状態でキーボードの「Ctrl＋F」キーを押し、表示される検索窓に
$item.option_sku.list[i].name1
をコピー＆ペーストし、Enterキーを押して以下のソースを探してください。
<td><{$item.option_sku.list[i].name1}></td>
このソースを変数タグの位置で改行し、
<td>
<{$item.option_sku.list[i].name1}>
★
</td>
として、★の位置に以下の赤文字の部分を追記（コピー＆ペースト）してください。
＜追記後＞
<td>
<{$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}>
</td>
（２）CSSを追加
ショップデザイン / テンプレート選択・編集 / クリエイターモード / 商品詳細
「CSS」欄の末尾に以下をコピー＆ペーストしてください。
/* SKU image */
.sku .option-image {
display:block;
margin-top: 10px;
}
【買い物かご】
ショップデザイン / テンプレート選択・編集 / クリエイターモード /買い物カゴ
HTML欄
変更前：
<div class="img">
<a href="<{$cart.list[i].url}>"><img src="<{$cart.list[i].image_M}>" alt="<{$cart.list[i].name}>"></a>
</div>
を以下に変更（太字の部分を追加）し、保存してください。
変更後：
<div class="img">
<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}>
<a href="<{$cart.list[i].url}>"><img src="<{$cart.list[i].image_M}>" alt="<{$cart.list[i].name}>"></a>
<{/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（バリエーション）ごとの画像を表示させることはできますか。