テンプレート【＆more】ではHTMLの記述変更と、CSSの追記を行うことで表示の調節は可能です。
登録商品の設定：
商品のバリエーションがS,M,Lの3サイズ、4色の12通りの表示例です。
縦幅表示を減らすため、Sサイズのみバリエーション画像を登録しています。
＜PCページ表示例＞
＜スマホ表示例＞
【＆more】でのソース変更例
手順1）
ショップデザイン / テンプレート選択・編集 / クリエイターモード / 商品詳細
「HTML」欄内にカーソルをあわせた状態でキーボードのCtrl＋Fキーを押し、 表示される検索欄に
<li class="sku-img-top"></li>
を入力し、Enterキーを押すと以下のソースが見つかりますので、
<ul>
<li class="sku-img-top"></li>
<li class="sku-option1 sku-option-top"><{$item.option_sku.option1_label}></li>
<{if $item.option_sku.has_option2}>
<li class="sku-option2 sku-option-top"><{$item.option_sku.option2_label}></li>
<{/if}>
<li class="sku-price-cart"></li>
</ul>
<{section name=i loop=$item.option_sku.list}>
<ul>
こちらを削除し、下記に変更してください。
変更例）
<!--SKUごとの表示を変更-->
<style type="text/css">.item-name-wrap .favorite{display:none;}</style>
<{section name=i loop=$item.option_sku.list}>
<ul>
<li class="sku-favorite">
<a href="<{$item.option_sku.list[i].favorite_entry_url}>">
<i class="material-icons"></i>
<span></span>
</a>
</li>
変更内容：通常のお気に入りボタン部分の非表示、バリエーション1,バリエーション2の項目名の削除(表示エリア拡大のため)、SKUごとのお気に入りボタン追加
手順2）
ショップデザイン / テンプレート選択・編集 / クリエイターモード / 商品詳細
「CSS」欄 の末尾に下記を追記し、4列の表示になるように調節を行ってください。
CSS例）
/* --- SKU表示の変更 --- */
.item-select {
display: flex;
flex-wrap: wrap;
gap: 8px; /* カード間の隙間 */
justify-content: flex-start;
margin-top: 5px;
}
/* --- SKUカード --- */
.item-select ul {
list-style: none;
display: flex;
flex-direction: column;
justify-content: flex-start;
width: calc((100% - 8px*3)/4); /* PC横4列表示 */
min-height: 150px;
padding: 12px;
border: 1px solid #ddd;
border-radius: 10px;
background: #fff;
box-sizing: border-box;
overflow: hidden;
transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.item-select ul:hover:not(:has(.sku-favorite:hover)) {
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.sku-option1,
.sku-option2 {
font-weight: 600;
font-size: 14px;
color: #333;
margin-bottom: 0;
word-break: break-all;
}
.sku-price {
margin: 8px 0 6px;
}
.sku-price h3 {
font-size: 16px;
color: #000;
margin: 0;
line-height: 1.4;
text-align: center;
}
.annotation {
font-size: 12px;
color: #666;
}
/* --- SKUカート部分 --- */
.sku-price-cart,
.sku-cart {
display: flex;
flex-direction: column;
align-items: stretch;
width: 100%;
}
.cart-btn {
width: 100%;
}
@media screen and (max-width: 768px) {
.item-select {
justify-content: center;
gap: 5px;
}
.item-select ul {
width: 24%!important; /* スマホ4列表示 */
min-height: auto;
padding: 0;
}
.sku-option1,
.sku-option2 {
font-size: 13px;
}
.sku-price h3 {
font-size: 12px;
}
.cart-btn a {
font-size: 12px;
padding: 5px 0;
}
}
@media screen and (max-width: 768px) {
.item-select .sku-cart {
width: 100% !important;
}
.item-select .cart-btn {
width: 100% !important;
margin: 0;
}
}
@media screen and (max-width: 480px) {
.item-select ul {
width: 100%;
max-width: 300px;
}
.item-select li.sku-price-cart {
flex-wrap: nowrap;
width: 100%;
display: flex;
flex-direction: column;
align-items: stretch;
box-sizing: border-box;
}
.item-select .sku-cart {
min-width: auto;
}
.item-select .cart-btn a {
font-size: 8px;
}
.item-select .sku-price {
width: 85px!important;
margin: 0 auto!important;
text-align: center;
min-width: auto!important;
}
.sku-img-top,
.sku-img {
width: auto!important;
}
.cart-btn.thanks a span.thanks-text {
font-size: 12px!important;
}
}
li.sku-favorite{
position:absolute;
padding-left:47px;
}
.sku-favorite a .material-icons {
color: #f65372;
width: 24px;
}
.sku-favorite a .material-icons::after {
content: "favorite";
display: inline-block;
}
ご参考）
列の指定は下記の箇所で行っているため、
width: calc((100% - 8px3)/4); / PC横4列表示 */
width: 24%!important; /* スマホ4列表示 */
列の数を変更したい場合は
ショップ様側で数値の変更をお試しください。
関連記事：【クリエイターモード】バリエーションSKUの項目ごとに表示の場合にページが縦に長くなるので、解消方法を教えてください。