【クリエイターモード】テンプレート&moreに、SKU（項目ごとに買い物かごを表示）の在庫を表示させたいです。方法を教えてください。 – makeshop よくある質問

「カートに入れる」ボタンの下にSKUの在庫を表示させる場合

（１）HTMLを追加します。
ショップデザイン / テンプレート選択・編集 / クリエイターモード / 商品詳細

「HTML」欄内にカーソルを一度置いた状態でキーボードの「Ctrl＋F」キーを押し、表示される検索窓に

sku-cart

と入力し、Enterキーを押して、SKU（バリエーション）のソースの中から「カートに入れる」の以下の記述を探してください。

<div class="sku-cart">
    <{if $item.option_sku.list[i].is_soldout}>
    <!-- 在庫切れの場合 -->
        (中略)
    <{else}>
    <!-- 在庫ありの場合 -->
        <{if $item.is_subscription_only}>
        <!-- 定期購入のみの場合 -->
            (中略)
        <{elseif $item.is_subscription}>
        <!-- 定期購入可の場合 -->
            (中略)
        <{else}>
        <!-- 通常購入の場合 -->
            <{if $item.option_sku.list[i].is_small_stock}>
                (中略)
            <{else}>
                <div class="cart-btn <{if $item.is_reservation_sale}>reservation-color<{/if}>">
                    <a href="<{$item.option_sku.list[i].cart_entry_url}>">
                        カートに入れる
                    </a>
                </div>
            <{/if}>
        <{/if}>
    <{/if}>
    ★★★
</div>

★★★の位置に以下をコピー＆ペーストし保存してください。

＜追記例＞

<{if $item.option_sku.list[i].is_soldout}>
    <p class="item-stock-sku">×在庫なし</p>
<{else}>
    <{if $item.option_sku.list[i].is_stock_unlimited}>
        <p class="item-stock-sku">〇在庫あり</p>
    <{else}>
        <{if $item.option_sku.list[i].is_small_stock}>
        <p class="item-stock-sku">△残り<{$item.option_sku.list[i].stock_quantity}>個</p>
        <{else}> 
        <p class="item-stock-sku">〇在庫あり</p>
        <{/if}> 
    <{/if}>
<{/if}>

「在庫あり/なし」、「〇△×」、「残り<{$item.option_sku.list[i].stock_quantity}>個」などの記述は、必要に応じて変更・削除してください。

（２）テキストのサイズなどはCSSで指定して調整してください。

「CSS」欄に記述してください。

＜追記例＞

.item-stock-sku{
    font-size:12px;
    padding:0;
    text-align:center;
}

■クリエイターモードタグリファレンス
SKU
https://reference.makeshop.jp/creator-mode/contents/detail/index.html#detail-sku

編集の際は、かならずデザインセットのコピーボタンをクリックしてバックアップを保管し、もとに戻せる状態にしたうえで作業をおこなってください。

■makeshopサポート
ショップデザインバックアップしてますか？！

関連記事