# コレクションリストをモバイル表示でも２列で表示させたいです。

**URL:** <https://community.shopify.com/t/topic/81987>\
**Category:** Shopify テーマ\
**Created:** [December 1, 2021, 8:43am UTC](https://community.shopify.com/t/topic/81987 "2021-12-01T08:43:46Z")\
**Posts on this page:** 4\
**Page:** 1

## AI-generated summary

Dawnテーマのコレクションリストで、デスクトップは2列×2行表示だがモバイルでは1列表示になる問題についての相談。テーマ仕様として、表示コレクション数に応じて列数が動的に変わり、管理画面のカスタマイズ画面からはモバイルのカラム数を調整できない点が共有された。

対応案は2つ：
- 代替策：｢モバイルでスワイプを有効にする｣をONにし、横スワイプで次のコレクションを見せる形式にする。
- 根本対応：コード編集でCSSを調整し、モバイルでも2列表示にする。

具体的には、管理画面の「オンラインストア＞テーマ＞アクション＞コード編集」から section-collection-list.css を編集し、スワイプ有効時は .collection-list.slider の item の max-width を100%→50%に、スワイプ無効時は item の width を100%相当→50%相当に変更（必要に応じてpaddingも調整）する方法が提示された。難しければエキスパート/パートナーへの依頼も推奨され、解決策は提示された状態。

<div class="post-metadata">

**Author:** ![nakanotakuya](https://avatars.discourse-cdn.com/v4/letter/n/ee7513/32.png) [@nakanotakuya](https://community.shopify.com/u/nakanotakuya)\
**Post date:** [December 1, 2021, 8:43am UTC](https://community.shopify.com/t/topic/81987/1 "2021-12-01T08:43:46Z")

</div>

現在Dawnテーマを使っております。

コレクションリストに４つのコレクションを追加しました。

デスクトップだと２列×２行で表示されるのですが

モバイルだと１列で表示します。

モバイルも２列で表示させるにはどうすれば良いのでしょうか？

お手数ですがどなたかご教授お願いします。

---

<div class="post-metadata">

**Author:** ![shota\_kobayashi](https://avatars.discourse-cdn.com/v4/letter/s/dbc845/32.png) [@shota\_kobayashi](https://community.shopify.com/u/shota_kobayashi)\
**Post date:** [December 1, 2021, 10:29am UTC](https://community.shopify.com/t/topic/81987/2 "2021-12-01T10:29:47Z")

</div>

テーマの確認いたしました。

表示するコレクション数に応じて表示の列数が動的に変わるようになっており

カスタマイズ画面からはカラム数の調整ができない仕様になっています。

モバイルでも２列で表示させるためには、コード編集でLiquidとCSSで調整する必要があるかと存じます。

もしもモバイルで表示がコレクションリストが縦に長くなってしまうのが気になるのであれば

「モバイルでスワイプを有効にする」にすることで表示コレクションの列と行が一つになり右スワイプで次のコレクションが表示される形式に変更できますのでお試しください。

---

<div class="post-metadata">

**Author:** ![nakanotakuya](https://avatars.discourse-cdn.com/v4/letter/n/ee7513/32.png) [@nakanotakuya](https://community.shopify.com/u/nakanotakuya)\
**Post date:** [December 1, 2021, 1:18pm UTC](https://community.shopify.com/t/topic/81987/3 "2021-12-01T13:18:04Z")

</div>

@shota_kobayashi 返答ありがとうございます！

カスタマイズ画面からはできないですよね。。。

コード編集だとどこを編集すれば良いかわかりますか？

質問続きで申し訳ございません。

---

<div class="post-metadata">

**Author:** ![shota\_kobayashi](https://avatars.discourse-cdn.com/v4/letter/s/dbc845/32.png) [@shota\_kobayashi](https://community.shopify.com/u/shota_kobayashi)\
**Post date:** [December 21, 2021, 11:52am UTC](https://community.shopify.com/t/topic/81987/4 "2021-12-21T11:52:27Z")

</div>

ご返信遅くなり申し訳ございません。

こちらですが

管理画面＞オンラインストア＞テーマ＞アクション＞コード編集

上記から下記のCSSを編集することで微調整可能です。

section-collection-list.css

スワイプ有効時

```css
@media screen and (max-width: 989px) {
  .collection-list.slider .collection-list__item {
    max-width: 100%;
  }
}

```

↓

```css
@media screen and (max-width: 989px) {
  .collection-list.slider .collection-list__item {
    max-width: 50%;
  }
}

```

スワイプ無効時

```css
@media screen and (max-width: 749px) {
  .collection-list .collection-list__item {
    width: calc(100% - 3rem);
  }

  .collection-list __item.grid__ item {
    padding-bottom: 1rem;
  }

```

↓

```css
@media screen and (max-width: 749px) {
  .collection-list .collection-list__item {
    width: calc(50% - 3rem);
  }

  .collection-list __item.grid__ item {
    padding-bottom: 1rem;
    padding-left: 1rem;
  }

```

上記のように変更することで2×2に変更可能です。

コード編集が難しい場合は、エキスパートやパートナーなどにご依頼されることをお勧めいたします。