コレクションページのモバイル表示の際に、２列で表示したい

[risa1]

Brooklynのテーマを使用しています。

モバイル表示の際、現在は１列で縦に商品が並んで、表示されている状態です。

それを、２列で表示したいのですが、方法はありますでしょうか。

ご教授いただけますと大変助かります。

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

[Hori_Koh]

調べてみたところ、テーマのコードを編集することで対応できるようです。

解決方法

1. 管理メニューの「オンラインストア」→「テーマ」→「アクション」メニューの「コードを編集」をクリックし、コード編集画面を開く。
2. フォルダアイコンの「Snippets」の中にある「product-grid-item.liquid」をクリックして開く。
3. 17〜19行目を以下のように変更し、右上の「保存する」をクリック。

【変更前】

{% unless grid_item_width %}
  {% assign grid_item_width = 'large--one-third medium--one-half' %}
{% endunless %}

【変更後】

{% assign grid_item_width = 'one-half medium--one-half large--one-half' %}

(※前後の {% unless %} と {% endunless %} は削除してください。)

補足説明

「product-grid-item.liquid」のソースファイルで、商品の表示画面を制御しているようです。

shopifyのcssにはグリッドシステム（画面サイズと横幅の組み合わせ）のクラス定義がされているので、その定義から設定したいクラスを選んで、このファイルに記述しています。

私の環境ではうまく動作しましたので、そちらの環境でも大丈夫だと思います。

コードの編集は間違ってしまったときのリスクが大きいので、テーマをコピーしてバックアップを作成してから作業すると安心だと思います。

[risa1]

ご丁寧に回答いただきありがとうございます。

ご教授いただいたコード編集で、モバイル画面では思い通りの仕様にすることができたのですが、

デスクトップ画面にも反映されてしまい、モバイル画面同様に２列の表示になってしまいました。

元々の仕様にする方法はございますでしょうか。

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

[Hori_Koh]

Shopifyの設定で使われている「モバイル画面」「デスクトップ画面」という言葉から誤解されるのも無理はありませんが、ユーザが使っている機器の種類によって画面の表示方法を切り替えることはできません。

CSSの仕組みは、ユーザが使っている機器のディスプレイの横幅 (またはブラウザの横幅)を検出して「〇〇pxより小さければ□列、大きければ△列」としているからです。

そのため、質問者さまが理想とする設定は不可能です。

残念かと思いますが、元々の設定か、私が回答した設定か、どちらかで妥協していただく必要があります。

元々の設定に戻したい場合は、コード編集で編集前のコードに書き換えていただければ戻ります。

[risa1]

ご回答いただきまして、ありがとうございます。

私の知識不足で、初歩的な質問をしてしまい申し訳ございません。

では、Hori_Koh様がおっしゃっている内容は

ディスプレイの画面サイズを指定することで、表示される列を指定できると言うことでしょうか。

閲覧してくださる方が見やすい仕様にしたいので、方法をご存知でしたらご教授いただけますと幸いです。

[Hori_Koh · Accepted solution]

ディスプレイの画面サイズを指定することで、表示される列を指定できると言うことでしょうか。

コード編集画面の「Assets」の中にある「timber.scss.liquid」をクリックして開いていただくと、298行目からグリッドシステムの画面サイズが定義されています。この中の「$small」の値を変更することで、質問者さまが希望する動作にできるかもしれません。

【現状】

$small: 590px;

→顧客の画面サイズが590px以下なら1列、591px以上なら2列で表示

(※私が最初に回答した内容を元に戻している前提です)

【変更例】

$small: 400px;

→顧客の画面サイズが400px以下なら1列、401px以上なら2列で表示
(※私が最初に回答した内容を元に戻している前提です)

ただし、この設定はコレクションページ以外の全てのページで共通の設定です。コレクションページはご希望の表示になったとしても、他のページでの表示がご希望に沿わなくなる可能性もあります。

閲覧する人の見やすさを考慮するのは良いことですが、閲覧者の環境は多種多様です。全ての人をカバーしようとして「あちらを立てればこちらが立たず」に陥ることもありますのでご注意を。

[risa1]

諸々、ご丁寧に回答いただきありがとうございます。

試してみたところ、私が確認できた閲覧環境ですと希望の仕様にすることができました。

今回は大変お世話になりました。

ありがとうございました。