コレクションリストをモバイル表示でも2列で表示させたいです。

nakanotakuya
観光客
11 0 2

現在Dawnテーマを使っております。

コレクションリストに4つのコレクションを追加しました。

デスクトップだと2列×2行で表示されるのですが

モバイルだと1列で表示します。

 

モバイルも2列で表示させるにはどうすれば良いのでしょうか?

 

お手数ですがどなたかご教授お願いします。

3件の返信3
shota_kobayashi
観光客
6 0 1

テーマの確認いたしました。

表示するコレクション数に応じて表示の列数が動的に変わるようになっており

カスタマイズ画面からはカラム数の調整ができない仕様になっています。

モバイルでも2列で表示させるためには、コード編集でLiquidとCSSで調整する必要があるかと存じます。

 

もしもモバイルで表示がコレクションリストが縦に長くなってしまうのが気になるのであれば

「モバイルでスワイプを有効にする」にすることで表示コレクションの列と行が一つになり右スワイプで次のコレクションが表示される形式に変更できますのでお試しください。

nakanotakuya
観光客
11 0 2

@shota_kobayashi 返答ありがとうございます!

カスタマイズ画面からはできないですよね。。。

コード編集だとどこを編集すれば良いかわかりますか?

 

質問続きで申し訳ございません。

shota_kobayashi
観光客
6 0 1

ご返信遅くなり申し訳ございません。

こちらですが

管理画面>オンラインストア>テーマ>アクション>コード編集

上記から下記のCSSを編集することで微調整可能です。

 

section-collection-list.css

 

スワイプ有効時

 

 

@media screen and (max-width: 989px) {
  .collection-list.slider .collection-list__item {
    max-width: 100%;
  }
}

 

 

 

 

@media screen and (max-width: 989px) {
  .collection-list.slider .collection-list__item {
    max-width: 50%;
  }
}

 

 

スワイプ無効時

 

 

@media screen and (max-width: 749px) {
  .collection-list .collection-list__item {
    width: calc(100% - 3rem);
  }

  .collection-list__item.grid__item {
    padding-bottom: 1rem;
  }

 

 

 

 

@media screen and (max-width: 749px) {
  .collection-list .collection-list__item {
    width: calc(50% - 3rem);
  }

  .collection-list__item.grid__item {
    padding-bottom: 1rem;
    padding-left: 1rem;
  }

 

 

 

上記のように変更することで2×2に変更可能です。

コード編集が難しい場合は、エキスパートやパートナーなどにご依頼されることをお勧めいたします。