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

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

解決方法1. 管理メニューの「オンラインストア」→「テーマ」→「アクション」メニューの「コードを編集」をクリックし、コード編集画面を開く。

  1. フォルダアイコンの「Snippets」の中にある「product-grid-item.liquid」をクリックして開く。
  2. 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にはグリッドシステム(画面サイズと横幅の組み合わせ)のクラス定義がされているので、その定義から設定したいクラスを選んで、このファイルに記述しています。

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

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