# 商品画像モバイル表示

**URL:** <https://community.shopify.com/t/topic/143981>\
**Category:** 技術的なQ＆A\
**Created:** [August 17, 2022, 3:01pm UTC](https://community.shopify.com/t/topic/143981 "2022-08-17T15:01:38Z")\
**Posts on this page:** 5\
**Page:** 1

## AI-generated summary

Shopifyの海外テーマMr.Parkerで、スマホ表示の商品・コレクション画像のグリッドを2列から3～4列に増やす方法を相談。多くのテーマは標準で2列のため、管理画面だけでは変更できず、コード編集が必要という認識で一致。

提案された対応：
- CSSの@media (max-width: 739px)で、.sm-span-6.autoのgrid-columnを調整。
  - span 3で4列表示、span 4で3列表示。
- 公式デモストアを参考にした暫定案で、実ファイル未確認。画像とコードスニペットが理解に重要。

最新の状況と課題：
- 試適用したところ、意図する「Featured collection」を3列化したいのに、「collection list」が3列になってしまう。
- セクションごとに適用範囲を絞るため、Featured collection固有のセレクタ（セクションIDやクラス）を用いたターゲット指定が必要。

決定事項・結論：
- 具体的なテーマ構造に依存するため、より詳細なセレクタの特定が次のアクション。
- 解決は未了。テーマ内の該当セクションのHTML/CSS構造提示が求められる可能性。

<div class="post-metadata">

**Author:** ![Anonymous\_66227082d3dc79ffda091df7c52cd37d](https://avatars.discourse-cdn.com/v4/letter/a/e480ec/32.png) [@Anonymous\_66227082d3dc79ffda091df7c52cd37d](https://community.shopify.com/u/Anonymous_66227082d3dc79ffda091df7c52cd37d)\
**Post date:** [August 17, 2022, 3:01pm UTC](https://community.shopify.com/t/topic/143981/1 "2022-08-17T15:01:38Z")

</div>

書き込み失礼します。

商品画像やコレクション画像をモバイル表示

2列ではなく3、4列と増やしたいのですが

同じ質問をされている方の通りに実装を試みたのですが記載されているコードが見当たりませんでした。

海外のテーマを選択しているからでしょうか？

海外のテーマを選択してた場合の商品画像をモバイル表示で2列ではなく3.4列と増やす仕方を知りたいです。

よろしくお願いします

---

<div class="post-metadata">

**Author:** ![Anonymous\_44fbe07fc59d9ccaacd70575fd5a5155](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/anonymous_44fbe07fc59d9ccaacd70575fd5a5155/32/194200_2.png) [@Anonymous\_44fbe07fc59d9ccaacd70575fd5a5155](https://community.shopify.com/u/Anonymous_44fbe07fc59d9ccaacd70575fd5a5155)\
**Post date:** [August 18, 2022, 1:03am UTC](https://community.shopify.com/t/topic/143981/2 "2022-08-18T01:03:43Z")

</div>

小紫豪さま

基本的にどのテーマでもモバイル表示は2列なので、カスタマイズ画面から変更できないことが多いですよね。。

ですがコードの編集を行えば、列数の変更は基本的にどのテーマでも対応可能です。

ただ、テーマによってコード内容が異なるため、使用されているテーマをご提示いただけますと詳しく回答がしやすいかと思います。

よろしくお願いします。

フルバランス 園畑

---

<div class="post-metadata">

**Author:** ![Anonymous\_66227082d3dc79ffda091df7c52cd37d](https://avatars.discourse-cdn.com/v4/letter/a/e480ec/32.png) [@Anonymous\_66227082d3dc79ffda091df7c52cd37d](https://community.shopify.com/u/Anonymous_66227082d3dc79ffda091df7c52cd37d)\
**Post date:** [August 18, 2022, 4:19am UTC](https://community.shopify.com/t/topic/143981/3 "2022-08-18T04:19:38Z")

</div>

ご返信ありがとうございます。

お使いのテーマはMr.Parker です。

よろしくお願いします

---

<div class="post-metadata">

**Author:** ![Anonymous\_44fbe07fc59d9ccaacd70575fd5a5155](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/anonymous_44fbe07fc59d9ccaacd70575fd5a5155/32/194200_2.png) [@Anonymous\_44fbe07fc59d9ccaacd70575fd5a5155](https://community.shopify.com/u/Anonymous_44fbe07fc59d9ccaacd70575fd5a5155)\
**Post date:** [August 19, 2022, 12:55am UTC](https://community.shopify.com/t/topic/143981/4 "2022-08-19T00:55:36Z")

</div>

Mr.Parkerを使用したことがないため、デモストアを参考に回答させていただきます。

[https://themes.shopify.com/themes/mr-parker/styles/wardrobe/preview](https://themes.shopify.com/themes/mr-parker/styles/wardrobe/preview)

コレクションページのデフォルトでは下記添付のように表示されているかと思います。

 ![スクリーンショット 0004-08-19 9.49.35.png](https://canada1.discourse-cdn.com/shopifyforum/original/4X/2/0/5/205dbc4faeb1c55f22716a53ee204d62e3cfb88c.jpeg)

下記のコードをcssファイルに読み込むことで、4列になります。

```markup
@media (max-width: 739px) {
  .sm-span-6.auto {
    grid-column: auto / span 3!important;
  }
}

```

 ![スクリーンショット 0004-08-19 9.53.18.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/d/2/d2949efefe02f7c74d3bb547b1e986baf4b0df98.png)

また、下記コードで3列にすることも可能かと存じます。

```markup
@media (max-width: 739px) {
  .sm-span-6.auto {
    grid-column: auto / span 4!important;
  }
}

```

 ![スクリーンショット 0004-08-19 9.53.25.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/1/5/150f2395f5b042d35943ccea9428b9611fdbabae.png)

実際にファイルを参照したわけではないため、参考程度にしていただけますと幸いです。

---

<div class="post-metadata">

**Author:** ![Anonymous\_66227082d3dc79ffda091df7c52cd37d](https://avatars.discourse-cdn.com/v4/letter/a/e480ec/32.png) [@Anonymous\_66227082d3dc79ffda091df7c52cd37d](https://community.shopify.com/u/Anonymous_66227082d3dc79ffda091df7c52cd37d)\
**Post date:** [August 22, 2022, 3:20am UTC](https://community.shopify.com/t/topic/143981/5 "2022-08-22T03:20:12Z")

</div>

ご回答ありがとうございます。

実際試みたのですが希望の箇所がありそこを3列にしたいのですが別の箇所が3列になってしまいます。

セクションの Featured collection を3列したいのですがcollection listが3列になってしまいます。

その場合はどうすればよろしいでしょうか？