書き込み失礼します。
商品画像やコレクション画像をモバイル表示
2列ではなく3、4列と増やしたいのですが
同じ質問をされている方の通りに実装を試みたのですが記載されているコードが見当たりませんでした。
海外のテーマを選択しているからでしょうか？
海外のテーマを選択してた場合の商品画像をモバイル表示で2列ではなく3.4列と増やす仕方を知りたいです。
よろしくお願いします
Topic summary
Shopifyの海外テーマMr.Parkerで、スマホ表示の商品・コレクション画像のグリッドを2列から3～4列に増やす方法を相談。多くのテーマは標準で2列のため、管理画面だけでは変更できず、コード編集が必要という認識で一致。
提案された対応：
- [email removed] (max-width: 739px)で、.sm-span-6.autoのgrid-columnを調整。
- span 3で4列表示、span 4で3列表示。
- 公式デモストアを参考にした暫定案で、実ファイル未確認。画像とコードスニペットが理解に重要。
最新の状況と課題：
- 試適用したところ、意図する「Featured collection」を3列化したいのに、「collection list」が3列になってしまう。
- セクションごとに適用範囲を絞るため、Featured collection固有のセレクタ（セクションIDやクラス）を用いたターゲット指定が必要。
決定事項・結論：
- 具体的なテーマ構造に依存するため、より詳細なセレクタの特定が次のアクション。
- 解決は未了。テーマ内の該当セクションのHTML/CSS構造提示が求められる可能性。
小紫豪さま
基本的にどのテーマでもモバイル表示は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列になってしまいます。
その場合はどうすればよろしいでしょうか？