# スマホ時に、商品表示を2列にしたい

**URL:** <https://community.shopify.com/t/topic/48802>\
**Category:** 技術的なQ＆A\
**Created:** [June 6, 2021, 1:21am UTC](https://community.shopify.com/t/topic/48802 "2021-06-06T01:21:52Z")\
**Posts on this page:** 13\
**Page:** 1

## AI-generated summary

スマホ表示で特集コレクションの商品を2列にしたいという相談。Narrativeテーマでの設定箇所が論点。

当初はcollection-template.liquidのmobileColumnsを'1'→'2'に変更する提案。保存済みでも1列のままで原因候補としてファイルの対象違いとブラウザキャッシュが指摘。

トップページの特集コレクションの場合はfeatured-collection.liquidの14行付近で{%- assign mobileColumns = '1' -%}を'2'へ変更するのが正解。これで問題は解決。

用語補足：featured-collection.liquidはトップの特集コレクション用テンプレート。collection-template.liquidはコレクションページ（/collections/all）用。mobileColumnsはスマホ時の列数指定。

確認手段として、対象画面のURL共有（必要ならパスワードをPM）によるストアフロント確認が提案。

後続で別ユーザーがBrooklynと思われるテーマで「コレクションページを2列化」希望。featured-collection.liquidに該当コードが見当たらず、管理画面での確認依頼。

現状の成果：Narrativeの特集コレクションは2列化に成功。Brooklynのコレクションページ件は未解決・継続中。

アクション：対象ページとテーマに応じて正しいテンプレートを編集。必要に応じてURL共有で追加確認。

<div class="post-metadata">

**Author:** ![nanchoro](https://avatars.discourse-cdn.com/v4/letter/n/ecd19e/32.png) [@nanchoro](https://community.shopify.com/u/nanchoro)\
**Post date:** [June 6, 2021, 1:21am UTC](https://community.shopify.com/t/topic/48802/1 "2021-06-06T01:21:52Z")

</div>

お世話になっております。

Narrativeテーマを使用しております。  
スマホにて、特集コレクションの商品表示を2列にしたいです。

どなたかお分かりになる方、よろしくお願いいたします。

 ![スクリーンショット 2021-06-06 10.17.43.png](https://canada1.discourse-cdn.com/shopifyforum/original/4X/8/6/6/866367b05171dbbc062af18517a479494d8d393f.png)

---

<div class="post-metadata">

**Author:** ![KOICHI\_KAMIZURU](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/koichi_kamizuru/32/120990_2.png) [@KOICHI\_KAMIZURU](https://community.shopify.com/u/KOICHI_KAMIZURU)\
**Post date:** [June 7, 2021, 10:43am UTC](https://community.shopify.com/t/topic/48802/2 "2021-06-07T10:43:42Z")

</div>

はじめまして。

以下手順で2列にすることが可能です。

1. コードの編集画面でcollection-template.liquidを開く

2. 66行目あたりの以下を変更

```markup
{%- assign mobileColumns = '1' -%}

```

↓に変更

```markup
{%- assign mobileColumns = '2' -%}

```

ご参考になりましたら幸いです。

---

<div class="post-metadata">

**Author:** ![nanchoro](https://avatars.discourse-cdn.com/v4/letter/n/ecd19e/32.png) [@nanchoro](https://community.shopify.com/u/nanchoro)\
**Post date:** [June 7, 2021, 12:02pm UTC](https://community.shopify.com/t/topic/48802/3 "2021-06-07T12:02:43Z")

</div>

上水流様

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

1. コードの編集画面でcollection-template.liquidを開く

2. 66行目あたりの以下を変更

```auto
{%- assign mobileColumns = '1' -%}

```

Copy

↓に変更

```auto
{%- assign mobileColumns = '2' -%}

```

Copy

こちら変更したのですが1列のままでした。

何か他に原因がありますかね？

ソースは上記アドバイス以外何も触っていません。

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

---

<div class="post-metadata">

**Author:** ![KOICHI\_KAMIZURU](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/koichi_kamizuru/32/120990_2.png) [@KOICHI\_KAMIZURU](https://community.shopify.com/u/KOICHI_KAMIZURU)\
**Post date:** [June 7, 2021, 11:08pm UTC](https://community.shopify.com/t/topic/48802/4 "2021-06-07T23:08:14Z")

</div>

ご確認ありがとうございます。

手順に含めておりませんでしたので念のため確認させていただきたいのですが、コードを編集後に「保存する」ボタンはクリックされましたでしょうか？

---

<div class="post-metadata">

**Author:** ![nanchoro](https://avatars.discourse-cdn.com/v4/letter/n/ecd19e/32.png) [@nanchoro](https://community.shopify.com/u/nanchoro)\
**Post date:** [June 8, 2021, 1:16am UTC](https://community.shopify.com/t/topic/48802/5 "2021-06-08T01:16:17Z")

</div>

上水流様

おはようございます。

はい、保存は押しております。

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

---

<div class="post-metadata">

**Author:** ![KOICHI\_KAMIZURU](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/koichi_kamizuru/32/120990_2.png) [@KOICHI\_KAMIZURU](https://community.shopify.com/u/KOICHI_KAMIZURU)\
**Post date:** [June 8, 2021, 10:08am UTC](https://community.shopify.com/t/topic/48802/6 "2021-06-08T10:08:41Z")

</div>

承知いたしました。

あとは考えられる原因としては、以下になります。

1. 対象ページのファイルがcollection-template.liquidでは無い

※私のストアでは以前の手順で2列になることは確認できております

1. ブラウザキャッシュが残っている

こちらは可能性が低いと思いますが、Google Chromeのシークレットウインドウのようなキャッシュに左右されない環境で確認ができます

可能であればストアフロントを確認させていただけるともう少し解決策の幅が広がるかと思います。

宜しくお願い致します。

---

<div class="post-metadata">

**Author:** ![nanchoro](https://avatars.discourse-cdn.com/v4/letter/n/ecd19e/32.png) [@nanchoro](https://community.shopify.com/u/nanchoro)\
**Post date:** [June 8, 2021, 10:27am UTC](https://community.shopify.com/t/topic/48802/7 "2021-06-08T10:27:12Z")

</div>

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

＞ストアフロントを確認させていただけるともう少し解決策の幅が広がるかと思います。

こちらお願いしたいのですがどのように確認していただくのでしょうか？

---

<div class="post-metadata">

**Author:** ![KOICHI\_KAMIZURU](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/koichi_kamizuru/32/120990_2.png) [@KOICHI\_KAMIZURU](https://community.shopify.com/u/KOICHI_KAMIZURU)\
**Post date:** [June 9, 2021, 2:50am UTC](https://community.shopify.com/t/topic/48802/8 "2021-06-09T02:50:10Z")

</div>

今回2列にしたい画面のURLをいただけると、私の方でも確認することができます。

もしストアフロントにパスワードをかけられているようでしたら、私のプロフィール画面からプライベートメッセージにてパスワードをお教えください。

宜しくお願いいたします。

---

<div class="post-metadata">

**Author:** ![KOICHI\_KAMIZURU](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/koichi_kamizuru/32/120990_2.png) [@KOICHI\_KAMIZURU](https://community.shopify.com/u/KOICHI_KAMIZURU)\
**Post date:** [June 9, 2021, 5:02am UTC](https://community.shopify.com/t/topic/48802/9 "2021-06-09T05:02:00Z")

</div>

以前お伝えしていたファイルはコレクションページ(/collections/all)のものでした。

トップページの特集コレクションをスマホ時に2列にする場合は、以下の手順で修正をお願いします。

1. コードの編集画面でfeatured-collection.liquidを開く

2. 14行目あたりの以下を変更

```markup
{%- assign mobileColumns = '1' -%}

```

↓に変更

```markup
{%- assign mobileColumns = '2' -%}

```

宜しくお願い致します。

---

<div class="post-metadata">

**Author:** ![nanchoro](https://avatars.discourse-cdn.com/v4/letter/n/ecd19e/32.png) [@nanchoro](https://community.shopify.com/u/nanchoro)\
**Post date:** [June 9, 2021, 5:04am UTC](https://community.shopify.com/t/topic/48802/10 "2021-06-09T05:04:40Z")

</div>

ありがとうございます。

無事変更ができました！

---

<div class="post-metadata">

**Author:** ![kakaemaru](https://avatars.discourse-cdn.com/v4/letter/k/df788c/32.png) [@kakaemaru](https://community.shopify.com/u/kakaemaru)\
**Post date:** [August 5, 2021, 3:17pm UTC](https://community.shopify.com/t/topic/48802/11 "2021-08-05T15:17:53Z")

</div>

失礼致します。。

brookrnテーマを使用しております。  
スマホにて、コレクションページでの商品表示を2列にしたいです。

是非、ご教授頂けますと幸いです。

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

---

<div class="post-metadata">

**Author:** ![nanchoro](https://avatars.discourse-cdn.com/v4/letter/n/ecd19e/32.png) [@nanchoro](https://community.shopify.com/u/nanchoro)\
**Post date:** [August 6, 2021, 1:18pm UTC](https://community.shopify.com/t/topic/48802/12 "2021-08-06T13:18:28Z")

</div>

こんばんは。

コードの編集画面でfeatured-collection.liquidを開き

{%- assign mobileColumns = ‘1’ -%}

こちらのコードを検索して数字を変更

{%- assign mobileColumns = ‘2’ -%}

これでいけるかと思いますがおかがでしょうか？

---

<div class="post-metadata">

**Author:** ![kakaemaru](https://avatars.discourse-cdn.com/v4/letter/k/df788c/32.png) [@kakaemaru](https://community.shopify.com/u/kakaemaru)\
**Post date:** [August 7, 2021, 4:25am UTC](https://community.shopify.com/t/topic/48802/13 "2021-08-07T04:25:12Z")

</div>

nanchoroさま

ご返信ありがとうございます。  
featured-collection.liquidにて

{%- assign mobileColumns = ‘1’ -%}を検索したのですが、

見当たらず、一度管理画面でご確認いただくことは可能でしょうか？

お手数をお掛け致しますが、

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