コレクションをスワイプ4列表示させる方法を教えてください。

日本語 ディスカッション 技術的なQ＆A
2

十分に検証ができていませんので、

下記の変更で不具合がありましたら、元にお戻しください。

Dawn 7.0.2で確認しました。

コード編集画面を開き、

アセット(assets)のbase.cssを編集します。

以下に示す行数はカスタマイズ状況によって異なるかもしれません。

1164行目付近

.grid--peek .grid__item {
    min-width: 35%;
  }

↓

.grid--peek .grid__item {
    min-width: unset;
  }

1181行目付近

.slider--tablet.grid--peek.grid--2-col-tablet-down .grid__item,
  .grid--peek .grid__item {
    width: calc(50% - var(--grid-mobile-horizontal-spacing) - 3rem);
  }

↓下記のように変更します。

.slider--tablet.grid--peek.grid--2-col-tablet-down .grid__item,
  .grid--peek .grid__item {
    width: calc(25% - var(--grid-mobile-horizontal-spacing));
  }

もし、タブレットサイズでも、4列にされたい場合は、下記のようにします。

1201行目付近

.slider--tablet.grid--peek.grid--2-col-tablet .grid__item,
  .slider--tablet.grid--peek.grid--2-col-tablet-down .grid__item {
    width: calc(50% - var(--grid-desktop-horizontal-spacing) - 3rem);
  }

↓

.slider--tablet.grid--peek.grid--2-col-tablet .grid__item,
  .slider--tablet.grid--peek.grid--2-col-tablet-down .grid__item {
    width: calc(25% - var(--grid-desktop-horizontal-spacing));
  }

なお、上記のようにしますと、

商品名や金額の文字サイズを調整しないと、

見栄えが悪いかもしれません。

それらが必要でしたらお声がけください。

ご参考まで。

(キュー田辺)