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

[ma15]

ショッピファイ初心者です><

以下画像丸枠内のように、

コレクションスワイプのサイズを

モバイルで横4列で表示させたいです。

 今dawnのデザインを使用してます。

コレクションだと2列が最大で縦幅かなりとってしまうのが気になり、画像のような4列幅に変更するdawnのコード変更方法など教えていただけたら幸いです！

よろしくお願い致します。

[Qcoltd]

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

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

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));
  }

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

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

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

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

ご参考まで。

(キュー田辺)