商品画像モバイル表示

書き込み失礼します。

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

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

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

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

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

よろしくお願いします

小紫豪さま

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

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

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

よろしくお願いします。

フルバランス 園畑

1 Like

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

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

よろしくお願いします

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

https://themes.shopify.com/themes/mr-parker/styles/wardrobe/preview

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

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

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

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

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

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

1 Like

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

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

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

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