# 商品コレクションのモバイル表示における列数を増やしたい

**URL:** <https://community.shopify.com/t/topic/90923>\
**Category:** 技術的なQ＆A\
**Created:** [January 13, 2022, 2:17am UTC](https://community.shopify.com/t/topic/90923 "2022-01-13T02:17:52Z")\
**Posts on this page:** 8\
**Page:** 1

## AI-generated summary

主題はDawnテーマのモバイル商品グリッドを2列固定から3〜4列へ変更する方法。コード編集が前提だが、テーマエディタから列数を調整できる設定を追加して対応。

- 特集コレクション（トップ）: Sections/featured-collection.liquidを編集。29行付近のgridクラスをgrid--{{ section.settings.products_rows }}-colへ置き換え、101行付近のproducts_to_show設定の後にproducts_rows（range: 1–4、step: 1、default: 2、ラベル「モバイル表示列」）を追加。これによりエディタで列数を選択可能。

- コレクションページ: Sections/main-collection-product-grid.liquidを同様に編集。37行のgrid--2-colをgrid--{{ section.settings.products_rows }}-colへ変更し、77行のproducts_per_page設定の後にproducts_rows設定を追加。

- フォントサイズ: テーマ設定の「タイポグラフィ」で見出し・本文は調整可能。より細かな要素単位の変更はコード修正が必要で、別スレ推奨。

- 追加課題と解決: 3列表示で商品画像が長方形にクロップ→カスタマイズ画面左カラムで画像比率を「正方形」に設定し解消。画像添付で操作場所の案内あり。

- 現状: 特集・コレクション両方で列数調整が実現し、画像表示も解決。スレッドは解決済み。

<div class="post-metadata">

**Author:** ![curry313](https://avatars.discourse-cdn.com/v4/letter/c/13edae/32.png) [@curry313](https://community.shopify.com/u/curry313)\
**Post date:** [January 13, 2022, 2:17am UTC](https://community.shopify.com/t/topic/90923/1 "2022-01-13T02:17:52Z")

</div>

DAWNテーマを使用しています

トップ画面での特集コレクション、

およびコレクションページでの商品表示ですが、

現在モバイルでの表示方法が横２列に固定されているかと思います。

これを変更し、３列、もしくは４列に調整する方法はありませんでしょうか。

コード編集はあまり詳しくなく、指定箇所を指定通りにそのまま編集することがある程度です。

---

<div class="post-metadata">

**Author:** ![koji\_matsumoto](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/koji_matsumoto/32/296013_2.png) [@koji\_matsumoto](https://community.shopify.com/u/koji_matsumoto)\
**Post date:** [January 17, 2022, 3:36am UTC](https://community.shopify.com/t/topic/90923/2 "2022-01-17T03:36:50Z")

</div>

@curry313 様

オンラインストア→テーマ→アクション→コード編集→Sections→featured-collection.liquidを編集することで可能です。

作業としては2点となります。

①29行目こちらのコードを

```markup

```

変更後として下記に変更。

```markup

```

そして、

②101行目のコードのあとに、

```javascript
{
      "type": "range",
      "id": "products_to_show",
      "min": 2,
      "max": 12,
      "step": 2,
      "default": 4,
      "label": "t:sections.featured-collection.settings.products_to_show.label"
    },

```

下記コードを追加してください。

```javascript
{
      "type": "range",
      "id": "products_rows",
      "min": 1,
      "max": 4,
      "step": 1,
      "default": 2,
      "label": "モバイル表示列"
    },

```

こちらで、添付3枚目のように編集画面で感覚的に調整ができるようになるかと思います。

参考になれば幸いです。

---

<div class="post-metadata">

**Author:** ![curry313](https://avatars.discourse-cdn.com/v4/letter/c/13edae/32.png) [@curry313](https://community.shopify.com/u/curry313)\
**Post date:** [January 17, 2022, 10:49am UTC](https://community.shopify.com/t/topic/90923/3 "2022-01-17T10:49:22Z")

</div>

ありがとうございます！

無事に３列、４列表示が出来ました！

ちなみに

トップページに表示される特集コレクションには反映されたのですが

コレクションページには反映されませんでした。

こちらは難しいでしょうか。

またベンダーのフォントサイズ、商品タイトルのフォントサイズを編集する方法もご教授いただけると幸いです

---

<div class="post-metadata">

**Author:** ![koji\_matsumoto](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/koji_matsumoto/32/296013_2.png) [@koji\_matsumoto](https://community.shopify.com/u/koji_matsumoto)\
**Post date:** [January 19, 2022, 1:33am UTC](https://community.shopify.com/t/topic/90923/4 "2022-01-19T01:33:00Z")

</div>

@curry313 様

オンラインストア→テーマ→アクション→コード編集→Sections→main-collection-product-grid.liquid

にて、前回と同じ要領で実装すれば可能です。

37行目

```markup
grid grid--2-col negative-margin product-grid

```

下記に変更

```markup
grid grid--{{ section.settings.products_rows}}-col negative-margin product-grid

```

77行目

```javascript
"type": "range",
      "id": "products_per_page",
      "min": 8,
      "max": 24,
      "step": 4,
      "default": 16,
      "label": "t:sections.main-collection-product-grid.settings.products_per_page.label"
    },

```

のあとに、

```javascript
{
      "type": "range",
      "id": "products_rows",
      "min": 1,
      "max": 4,
      "step": 1,
      "default": 2,
      "label": "モバイル表示列"
    },

```

を追加で可能です。

> ベンダーのフォントサイズ、商品タイトルのフォントサイズを編集する方法

テーマ設定のタイポグラフィから見出しと本文の調整は可能です。

こちらも画像添付しておきます。

細かい部分の修正となるとコード調整が必要になるので別の内容となってくる可能性が高いですね。

また別途、掲示板に質問としてアップいただければ回答集まるかと思います！

（私もわかりそうな内容であればそちらの質問からお戻ししますね）

ご参考になりますと幸いです。

---

<div class="post-metadata">

**Author:** ![curry313](https://avatars.discourse-cdn.com/v4/letter/c/13edae/32.png) [@curry313](https://community.shopify.com/u/curry313)\
**Post date:** [January 19, 2022, 1:43am UTC](https://community.shopify.com/t/topic/90923/5 "2022-01-19T01:43:47Z")

</div>

ありがとうございます！

こちらも無事に解決しました！

フォントサイズの方は別件で質問させていただきます！

---

<div class="post-metadata">

**Author:** ![curry313](https://avatars.discourse-cdn.com/v4/letter/c/13edae/32.png) [@curry313](https://community.shopify.com/u/curry313)\
**Post date:** [March 16, 2022, 3:36pm UTC](https://community.shopify.com/t/topic/90923/6 "2022-03-16T15:36:00Z")

</div>

こちらで教えていただいた３列表示なのですが、

商品画像が全て若干長方形にクロップされてしまうのですが、

解決策はありませんでしょうか？

---

<div class="post-metadata">

**Author:** ![koji\_matsumoto](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/koji_matsumoto/32/296013_2.png) [@koji\_matsumoto](https://community.shopify.com/u/koji_matsumoto)\
**Post date:** [March 18, 2022, 3:35am UTC](https://community.shopify.com/t/topic/90923/7 "2022-03-18T03:35:07Z")

</div>

@curry313 様

内容確認いたしました。

具体的な事象が把握しきれていない分、半分想像も含めてのご回答となり恐縮ですが、

 ![koji_matsumoto_0-1647574380761.png](https://canada1.discourse-cdn.com/shopifyforum/original/4X/2/c/4/2c475f4f22d486ad051f902f8be4377c2b6e69cc.png)

こちらの左カラム内にある、画像比を正方形に選択することで、正方形表示となるかと思いますが、こちらでご回答となっておりますでしょうか？

もし事象が違うようででしたら、サイトURLやキャプチャいただけると詳細確認できるかと思います。

ご参考になれば幸いです。

---

<div class="post-metadata">

**Author:** ![curry313](https://avatars.discourse-cdn.com/v4/letter/c/13edae/32.png) [@curry313](https://community.shopify.com/u/curry313)\
**Post date:** [March 22, 2022, 2:20pm UTC](https://community.shopify.com/t/topic/90923/8 "2022-03-22T14:20:49Z")

</div>

ありがとうございます！

仰る通りの設定で無事に解決しました！初歩的なミスにも関わらず丁寧に回答いただきありがとうございます！！