【クリエイターモード】テンプレートBRothersの新商品の枠内に表示される数を変更する方法はありますか。 – makeshop よくある質問

テンプレートBRothersでは新商品（NEW ARRIVAL）の箇所はJavaScriptの記述で制御されているため、下記の編集をおこなうことで表示数の変更が可能です。

・表示数を変更し、スワイプする動作を残す場合

ショップデザイン / テンプレート選択・編集 / クリエイターモード / トップ
「JavaScript」欄内の記述、

slidesPerView: 4,

こちらの数字を表示させたい数に変更してください。

下記画像は

slidesPerView: 5,

に変更した場合の表示例です。

スマホでの表示数を変更したい場合は、

同じ画面の「JavaScript」欄内、

slidesPerView: 2

こちらの数値を変更することで横に並ぶ数の変更が可能です。

・表示数を１つのみに変更し、スワイプする動作を削除する場合

ショップデザイン / テンプレート選択・編集 / クリエイターモード / トップ
「JavaScript」欄の下記記述を削除してください。

$(function() {
  var newitem = new Swiper('.new-item-swiper-container', {
    effect: 'slide',
    autoplay: {
      delay: 3000
    },
    spaceBetween: 2,
    loop: true,
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev'
    },
    speed: 600,
    slidesPerView: 4,
    breakpoints: {
       768: {
         slidesPerView: 2
       }
    }
  });
});

上記対応後、商品は1つのみの表示となりますが、ページ幅にあわせて大きく表示されてしまうため
調節が必要な場合は
ショップデザイン / テンプレート選択・編集 / クリエイターモード / トップ
「CSS」欄　にサイズ指定を追記してください。

追記例）

.new-item-swiper-box{
  max-width:200px;
  height:auto;
}

幅の指定などはショップ様のお好みで変更してください。

関連記事