メインコンテンツへスキップ

【クリエイターモード】バリエーションSKUの項目ごとに表示の場合にページが縦に長くなるので、解消方法を教えてください。

  • 更新

【Complete】テンプレートではHTMLの記述変更と、CSSの追記を行うことで表示の調節は可能です。

登録商品の設定：
商品のバリエーションがS,M,Lの3サイズ、4色の12通りの表示例です。
縦幅表示を減らすため、Sサイズのみバリエーション画像を登録しています。

 

＜PCページ表示例＞

1.png

＜スマホ表示例＞

2.png

 

【Complete】でのソース変更例
手順1）
ショップデザイン / テンプレート選択・編集 / クリエイターモード / 商品詳細
「HTML」欄内にカーソルをあわせた状態でキーボードのCtrl＋Fキーを押し、 表示される検索欄に

<table class="sku">

を入力し、Enterキーを押すと以下のソースが見つかりますので、

    <!-- SKUごとの表示 -->
    <table class="sku">
    <tr class="sku-option">
        <th></th>
        <th class="sku-option-title"><{$item.option_sku.option1_label}></th>
        <{if $item.option_sku.has_option2}><th class="sku-option-title"><{$item.option_sku.option2_label}></th><{/if}>
        <th></th>
    </tr>
    <{section name=i loop=$item.option_sku.list}>
    <tr>
        <td class="sku-img">
        <{if $item.option_sku.list[i].image_S != ''}>
            <{if $item.option_sku.list[i.index_prev].image_S != $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" loading="lazy">
            <{/if}>
        <{/if}>
        </td>
        <td class="sku-option-name">
        <{if $item.option_sku.list[i.index_prev].name1 != $item.option_sku.list[i].name1}>
            <{$item.option_sku.list[i].name1}>
        <{/if}>
        </td>
        <{if $item.option_sku.has_option2}><td class="sku-option-name"><{$item.option_sku.list[i].name2}></td><{/if}>
        <td class="sku-cart">
        <!-- SKUの定期購入 -->
        <{if $item.is_subscription_only}>
            <{if $item.option_sku.list[i].is_soldout}>
                <div class="favorite-wrap">
                    <div class="disabled-btn btn sku-btn">売り切れ</div>
                    <div class="favorite">
                        <a href="<{$item.option_sku.list[i].favorite_entry_url}>" class="favorite-icon favorite-off <{if $item.option_sku.list[i].is_favorite}>hide<{/if}>"></a>
                        <a href="<{$item.option_sku.list[i].favorite_remove_url}>" class="favorite-icon favorite-on <{if !$item.option_sku.list[i].is_favorite}>hide<{/if}>"></a>
                    </div>
                </div>
            <{else}>
                <{if $item.option_sku.list[i].is_stock_unlimited}>
                    <p class="item-stock item-stock-sku">在庫あり</p>
                <{else}>
                    <{if $item.option_sku.list[i].is_small_stock}>
                        <p class="item-stock item-stock-sku">残りわずか<span class="item-stock-count">／あと<{$item.option_sku.list[i].stock_quantity}>個</span></p>
                    <{else}>
                        <p class="item-stock item-stock-sku">在庫あり<span class="item-stock-count">／あと<{$item.option_sku.list[i].stock_quantity}>個</span></p>
                    <{/if}>
                <{/if}>
                <div class="modal-open">
                    <a href="<{$item.option_sku.list[i].cart_entry_subscription_url}>" class="subscription-only subscription-btn btn sku-btn">定期購入する</a>
                    <div class="favorite">
                        <a href="<{$item.option_sku.list[i].favorite_entry_url}>" class="favorite-icon favorite-off <{if $item.option_sku.list[i].is_favorite}>hide<{/if}>"></a>
                        <a href="<{$item.option_sku.list[i].favorite_remove_url}>" class="favorite-icon favorite-on <{if !$item.option_sku.list[i].is_favorite}>hide<{/if}>"></a>
                    </div>
                </div>
            <{/if}>
        <{elseif $item.is_subscription}>
            <{if $item.option_sku.list[i].is_soldout}>
                <div class="favorite-wrap">
                    <div class="disabled-btn btn sku-btn">売り切れ</div>
                    <div class="favorite">
                        <a href="<{$item.option_sku.list[i].favorite_entry_url}>" class="favorite-icon favorite-off <{if $item.option_sku.list[i].is_favorite}>hide<{/if}>"></a>
                        <a href="<{$item.option_sku.list[i].favorite_remove_url}>" class="favorite-icon favorite-on <{if !$item.option_sku.list[i].is_favorite}>hide<{/if}>"></a>
                    </div>
                </div>
            <{else}>
                <{if $item.option_sku.list[i].is_stock_unlimited}>
                    <p class="item-stock item-stock-sku">在庫あり</p>
                <{else}>
                    <{if $item.option_sku.list[i].is_small_stock}>
                        <p class="item-stock item-stock-sku">残りわずか<span class="item-stock-count">／あと<{$item.option_sku.list[i].stock_quantity}>個</span></p>
                    <{else}>
                        <p class="item-stock item-stock-sku">在庫あり<span class="item-stock-count">／あと<{$item.option_sku.list[i].stock_quantity}>個</span></p>
                    <{/if}>
                <{/if}>
                <div class="modal-open">
                    <a href="<{$item.option_sku.list[i].cart_entry_url}>" class="add-cart-btn btn sku-btn">カートに入れる</a>
                    <div class="favorite">
                        <a href="<{$item.option_sku.list[i].favorite_entry_url}>" class="favorite-icon favorite-off <{if $item.option_sku.list[i].is_favorite}>hide<{/if}>"></a>
                        <a href="<{$item.option_sku.list[i].favorite_remove_url}>" class="favorite-icon favorite-on <{if !$item.option_sku.list[i].is_favorite}>hide<{/if}>"></a>
                    </div>
                </div>
                <div class="modal-open">
                    <a href="<{$item.option_sku.list[i].cart_entry_subscription_url}>" class="subscription-btn btn sku-btn">定期購入する</a>
                </div>
            <{/if}>
        <{else}>
            <div class="sku-price-wrap">
            <p class="price">￥<{$item.option_sku.list[i].price|number_format}><span>（税込）</span></p>
            <{if $item.option_sku.list[i].is_soldout}>
                <div class="favorite-wrap">
                    <{if $item.is_restock_enabled}>
                        <div><a href="<{$item.option_sku.list[i].restock_url}>" class="restock-btn btn sku-btn">再入荷お知らせ</a></div>
                    <{else}>
                        <div class="disabled-btn btn sku-btn">売り切れ</div>
                    <{/if}>
                    <div class="favorite">
                        <a href="<{$item.option_sku.list[i].favorite_entry_url}>" class="favorite-icon favorite-off <{if $item.option_sku.list[i].is_favorite}>hide<{/if}>"></a>
                        <a href="<{$item.option_sku.list[i].favorite_remove_url}>" class="favorite-icon favorite-on <{if !$item.option_sku.list[i].is_favorite}>hide<{/if}>"></a>
                    </div>
                </div>
            <{else}>
                <{if $item.option_sku.list[i].is_stock_unlimited}>
                    <p class="item-stock item-stock-sku">在庫あり</p>
                <{else}>
                    <{if $item.option_sku.list[i].is_small_stock}>
                        <p class="item-stock item-stock-sku">残りわずか<span class="item-stock-count">／あと<{$item.option_sku.list[i].stock_quantity}>個</span></p>
                    <{else}>
                        <p class="item-stock item-stock-sku">在庫あり<span class="item-stock-count">／あと<{$item.option_sku.list[i].stock_quantity}>個</span></p>
                    <{/if}>
                <{/if}>
            </div>
                <div class="modal-open">
                    <a href="<{$item.option_sku.list[i].cart_entry_url}>" class="add-cart-btn btn cart-order-btn sku-btn" data-button-id="cart-order">カートに入れる</a>
                    <div class="favorite">
                        <a href="<{$item.option_sku.list[i].favorite_entry_url}>" class="favorite-icon favorite-off <{if $item.option_sku.list[i].is_favorite}>hide<{/if}>"></a>
                        <a href="<{$item.option_sku.list[i].favorite_remove_url}>" class="favorite-icon favorite-on <{if !$item.option_sku.list[i].is_favorite}>hide<{/if}>"></a>
                    </div>
                </div>
            <{/if}>
        <{/if}>
        </td>
    </tr>
    <{/section}>
    </table>


こちらを下記に変更してください。

変更例）

<!--SKUごとの表示を変更-->
<div class="sku sku-grid">
  <{section name=i loop=$item.option_sku.list}>
    <div class="sku-item">
        <!-- お気に入りボタン -->
        <div class="favorite">
          <a href="<{$item.option_sku.list[i].favorite_entry_url}>" class="favorite-icon favorite-off <{if $item.option_sku.list[i].is_favorite}>hide<{/if}>"></a>
          <a href="<{$item.option_sku.list[i].favorite_remove_url}>" class="favorite-icon favorite-on <{if !$item.option_sku.list[i].is_favorite}>hide<{/if}>"></a>
        </div>
      <div class="sku-img">
        <{if $item.option_sku.list[i].image_S != ''}>
          <{if $item.option_sku.list[i].index_prev == '' || $item.option_sku.list[i].image_S != $item.option_sku.list[i].index_prev.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}>
        <{/if}>
      </div>
      <div class="sku-option-name1">
        <{if $item.option_sku.list[i].index_prev == '' || $item.option_sku.list[i].name1 != $item.option_sku.list[i].index_prev.name1}>
          <{$item.option_sku.list[i].name1}>
        <{/if}>
      </div>
      <{if $item.option_sku.has_option2}>
        <div class="sku-option-name"><{$item.option_sku.list[i].name2}></div>
      <{/if}>
      <div class="sku-cart">
        <{if $item.is_subscription_only}>
          <{if $item.option_sku.list[i].is_soldout}>
              <{if $item.is_restock_enabled}>
              <div class="btn sku-btn"><<a href="<{$item.option_sku.list[i].restock_url}>" class="restock-btn btn sku-btn">再入荷お知らせ</a></div>
              <{else}>
              <div class="disabled-btn btn sku-btn">売り切れ</div>
              <{/if}>
          <{else}>
            <p class="item-stock item-stock-sku">在庫あり</p>
            <a href="<{$item.option_sku.list[i].cart_entry_subscription_url}>" class="subscription-only subscription-btn btn sku-btn">定期購入する</a>
          <{/if}>
        <{elseif $item.is_subscription}>
          <{if $item.option_sku.list[i].is_soldout}>
              <{if $item.is_restock_enabled}>
              <div class="btn sku-btn"><a href="<{$item.option_sku.list[i].restock_url}>" class="restock-btn btn sku-btn">再入荷お知らせ</a></div>
              <{else}>
              <div class="disabled-btn btn sku-btn">売り切れ</div>
              <{/if}>
          <{else}>
            <{if $item.option_sku.list[i].is_stock_unlimited}>
              <p class="item-stock item-stock-sku">在庫あり</p>
            <{else}>
            <{if $item.option_sku.list[i].is_stock_unlimited}>
            <p class="item-stock item-stock-sku">在庫あり</p>
        <{else}>
            <{if $item.option_sku.list[i].is_small_stock}>
                <p class="item-stock item-stock-sku">残りわずか<span class="item-stock-count">／あと<{$item.option_sku.list[i].stock_quantity}>個</span></p>
            <{else}>
                <p class="item-stock item-stock-sku">在庫あり<span class="item-stock-count">／あと<{$item.option_sku.list[i].stock_quantity}>個</span></p>
            <{/if}>
        <{/if}>
            <{/if}>
            <a href="<{$item.option_sku.list[i].cart_entry_url}>" class="add-cart-btn btn sku-btn">カートに入れる</a>
            <a href="<{$item.option_sku.list[i].cart_entry_subscription_url}>" class="subscription-btn btn sku-btn">定期購入する</a>
          <{/if}>
        <{else}>
          <div class="sku-price-wrap">
            <p class="price">￥<{$item.option_sku.list[i].price|number_format}><span>（税込）</span></p>
            <{if $item.option_sku.list[i].is_soldout}>
              <{if $item.is_restock_enabled}>
              <div class="btn sku-btn"><<a href="<{$item.option_sku.list[i].restock_url}>" class="restock-btn btn sku-btn">再入荷お知らせ</a></div>
              <{else}>
              <div class="disabled-btn btn sku-btn">売り切れ</div>
              <{/if}>
            <{else}>
            <{if $item.option_sku.list[i].is_stock_unlimited}>
            <p class="item-stock item-stock-sku">在庫あり</p>
        <{else}>
            <{if $item.option_sku.list[i].is_small_stock}>
                <p class="item-stock item-stock-sku">残りわずか<span class="item-stock-count">／あと<{$item.option_sku.list[i].stock_quantity}>個</span></p>
            <{else}>
                <p class="item-stock item-stock-sku">在庫あり<span class="item-stock-count">／あと<{$item.option_sku.list[i].stock_quantity}>個</span></p>
            <{/if}>
        <{/if}>
              <a href="<{$item.option_sku.list[i].cart_entry_url}>" class="add-cart-btn btn sku-btn">カートに入れる</a>
            <{/if}>
          </div>
        <{/if}>
      </div>
    </div>
  <{/section}>
</div>

手順2）
ショップデザイン / テンプレート選択・編集 / クリエイターモード / 商品詳細
「CSS」欄　の末尾に下記を追記し、4列の表示になるように調節を行ってください。

CSS例）

.sku-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}
.sku-item {
  width: calc(24% - 8px); /* 4列に調整 */
  box-sizing: border-box;
  border: 1px solid #ccc;
  padding: 2px;
  background-color: #f9f9f9;
  font-size: 12px;
}
.sku-img img {
  max-width: 100%;
  height: auto;
  display: block;
}
.sku-option-name1,
.sku-option-name {
  font-weight: bold;
  margin:0;
  padding:0;
  font-size: 10px;
}
.disabled-btn.btn.sku-btn,
.sku-cart,
.sku-cart a{
  width: 100% !important;
  font-size: 9px!important;
  margin: 0;
  padding: 0;
}
.sku-btn {
  padding:2px 0 !important;
}
.sku-item div.favorite a{
  position: absolute;
  margin-left: 40px;
  margin-top: -10px;
}
.sku-price-wrap .price{
  font-size:10px; margin: auto;
}

ご参考）
列の指定は下記の箇所で行っているため、
width: calc(24% - 8px); /* 4列に調整 */
変更したい場合は、こちらの数値を調節してください。

 

記事の改善にご協力ください。この記事は役に立ちましたか？
0人中0人がこの記事が役に立ったと言っています

お役に立てず申し訳ございません。

「いいえ」を選んだ理由をお聞かせください。

ページの先頭へ戻る

関連記事