FutureShop2 虎の巻

Home > └スマホ用サンプル | カスタマイズ[SP店舗] | スマートフォン改善 | モバイル | 売上アップに | 裏ワザ/カスタマイズ > ◎[SP]おすすめ商品を横に2つ(3つ)の商品を並べたい

◎[SP]おすすめ商品を横に2つ(3つ)の商品を並べたい

スマートフォンでおすすめ商品を、1段に2つ(3つ)の商品を並べるCSSをご紹介します。

1段に「2つ」の商品を並べる場合

two.png

モバイル>デザイン設定に、下記CSSを追記ください。

場合によっては、最後の行の商品が欠けてしまいますので、
モバイル>ページ設定>基本設定>1ページに表示する商品数を、
偶数個にして、表示数をご調整ください。

モバイル>デザイン設定

今後『商品ページ』でもこの「おすすめ商品」を表示される予定がございましたら、
下記もご設置くださいませ。

モバイル設定>デザイン設定
【ご注意】
CSSでのカスタマイズは思わぬ挙動をする場合が ございますので、設定後、購入が正しく行えるかなど 必ず動作確認をお願いいたします。

1段に「3つ」の商品を並べる場合

three.png

モバイル>デザイン設定に、下記CSSを追記ください。

※場合によっては、最後の行の商品が欠けてしまいますので、
モバイル>ページ設定>基本設定>1ページに表示する商品数
を、3の倍数にして、表示数をご調整ください。

モバイル設定>デザイン設定

2列同様に『商品ページ』でもこの「おすすめ商品」を3列で表示される予定がございましたら、
下記もご設置くださいませ。

モバイル設定>デザイン設定
【ご注意】
CSSでのカスタマイズは思わぬ挙動をする場合が ございますので、設定後、購入が正しく行えるかなど 必ず動作確認をお願いいたします。