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

**URL:** <https://community.shopify.com/t/topic/165831>\
**Category:** 技術的なQ＆A\
**Tags:** css\
**Created:** [November 7, 2022, 3:38pm UTC](https://community.shopify.com/t/topic/165831 "2022-11-07T15:38:15Z")\
**Posts on this page:** 2\
**Page:** 1

## AI-generated summary

Shopifyの初心者ユーザーが、モバイル表示でコレクションスワイプを4列表示にする方法を質問しています。現在はDawnテーマを使用しており、デフォルトでは最大2列の縦幅表示になっているため、画像のように横4列に変更したいとのことです。

**提案された解決方法（Dawn 7.0.2で確認済み）:**

base.cssファイルを以下のように編集:

- **1164行目付近**: `.grid--peek .grid__item`の`min-width: 35%`を`min-width: unset`に変更
- **1181行目付近**: 幅の計算式を`calc(50% - var(--grid-mobile-horizontal-spacing) - 3rem)`から`calc(25% - var(--grid-desktop-horizontal-spacing))`に変更
- **1201行目付近**: タブレットサイズでも4列表示にする場合の追加調整

**注意点:**
- 十分な検証が行われていないため、不具合が発生した場合は元に戻すことを推奨
- 商品名や金額の文字サイズを調整しないと見栄えが悪くなる可能性あり
- 必要に応じて追加のフィードバックを求めている

<div class="post-metadata">

**Author:** ![ma15](https://avatars.discourse-cdn.com/v4/letter/m/9dc877/32.png) [@ma15](https://community.shopify.com/u/ma15)\
**Post date:** [November 7, 2022, 3:38pm UTC](https://community.shopify.com/t/topic/165831/1 "2022-11-07T15:38:15Z")

</div>

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

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

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

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

 ![8F0E22B9-2572-41FE-9CF7-FFBF8A162F72.jpeg](https://canada1.discourse-cdn.com/shopifyforum/original/4X/8/a/a/8aaecbb26d8d227118c7f067b8f610d5fdda74ac.jpeg)

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

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

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

---

<div class="post-metadata">

**Author:** ![Qcoltd](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/qcoltd/32/900_2.png) [@Qcoltd](https://community.shopify.com/u/Qcoltd)\
**Post date:** [November 9, 2022, 11:26am UTC](https://community.shopify.com/t/topic/165831/2 "2022-11-09T11:26:41Z")

</div>

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

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

Dawn 7.0.2で確認しました。

コード編集画面を開き、

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

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

1164行目付近

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

```

↓

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

```

1181行目付近

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

```

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

```css
.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行目付近

```css
.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);
  }

```

↓

```css
.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));
  }

```

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

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

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

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

ご参考まで。

(キュー田辺)