shopify初心者です！
現在、Galleriaのテーマを使っているのですがモバイル版での商品表示が2列になっています。
こちらを3列にしたいのですが、調べてみてもやり方がいまいち分からず困っております。
どなたかご回答お願いいたします(ToT)
Topic summary
Galleriaテーマを使用しているユーザーが、モバイル版での商品表示を2列から3列に変更したいと質問。
提案された解決方法:
- テーマカスタマイズ画面からコレクション設定を変更する方法
- カスタムCSSにコードを追加する方法
発生している問題:
- 質問者のテーマバージョンが最新版(3.3.1)と異なるため、提案された設定画面が表示されない
- カスタムCSSにコードを追加したが、モバイル表示が3列に変わらない
現在の状況:
回答者がテーマファイルを直接確認するため、Shopifyコラボレーターリクエストの申請を提案。そのために必要な情報(ストアのURL「XXXXX.myshopify.com」のXXXXX部分と4桁コード)をプライベートメッセージで共有するよう依頼。
質問者は該当情報の確認方法とプライベートメッセージの送信方法について追加質問中。未解決の状態が継続しており、直接的なテーマファイル編集が必要な可能性が高い。
ご質問いただいている商品表示を2列から3列にしたい件ですが、対象箇所はコレクション等の商品一覧での表示との認識で回答させていただきます。
前提条件として、お使いのテーマが有料テーマのためトライアルのプレビュー確認となりますので、実際に動かない場合もございますのでご了承ください。
対応方法1. テーマのカスタマイズボタンをクリック
-
上部のホームページからコレクション > デフォルトのコレクションを選択
-
テンプレートのProductsをクリック
-
カスタムCSSに下記コードを追加し保存ボタンをクリック
@media (max-width: 991px) {
collection-product-grid > div {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
また、対象箇所が違う場合は方法が異なりますので、カスタマイズボタンを押した先の対象ページ名をご連絡いただければもう少し確認ができるかと思います。
ご参考まで
(キュー小坂)
ご回答ありがとうございます！！
確認したところ、私の方にはデフォルトのコレクションの表示、テンプレートの欄にProductsの表示もありませんでした。
いろいろ見てみたところカスタムcssというものはあったのですが、こちらに記入するので合ってますでしょうか？
お手数おかけしますが、よろしくお願いいたします。
unsually 福島
@Unsually 福島様
Galleriaテーマは3.3.1の最新版で確認させていただきましたので、テーマのバージョンが異なっている可能性がございます。
バージョンが異なっておりましたら、ご連絡いただきましたカスタムCSSの部分に追加いただいても、テーマのタグ構造が異なっている場合があり、追加したCSSが動かない場合もございます。
テーマのバージョンが異なる場合は、対象ページのURLをいただけましたら、サイトの表示側から確認できるかもしれません。
対応できない場合もございますので、ご了承ください。
ご参考まで
(キュー小坂)
@Unsually 福島様
いただいたURLを拝見させていただきました。
やはりコードの作りが最新のテンプレートと異なっているようです。
先ほどご連絡いただきました、テーマ設定のカスタムCSSに下記コードを追加すると『https://unsually.com/collections/トップス』などの商品一覧ページをスマートフォンで見た際 、3列表示になるかと思われます。
@media (max-width: 991px) {
.template-collection .collection-row {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.template-collection .collection-products-wrapper {
width:100%;
}
}
いただいたURLをプレビューしての確認となりますので、スマートフォンの実機での確認はできておりませんので、実際に動かない場合もございますのでご了承ください。
ご参考まで
(キュー小坂)
わかりやすくご回答ありがとうございます(ToT)
カスタムcssに記載してくださったコードを入力したのですが、携帯の方で見ても3列に変わりませんでした。
もう方法はないのでしょうか？
unsually 福島
@Unsually 福島様
カスタムCSS以外にもテーマファイルのCSSを編集する方法はございますが、有料テーマかつ現在の最新バージョンでは無いようですので、どのファイルを修正すれば良いかのご説明が難しいです。
もし御社のShopifyへコラボレーターリクエストさせていただき管理画面を確認させていただくことができれば、もう少し対応方法のご説明も可能かと思います。
ご参考まで
(キュー小坂)
かしこまりました。
お手数おかけして誠に申し訳ございません。
こちらはどのようにしたらよろしいでしょうか？
@Unsually 福島様
コラボレーターリクエスト問題ないとのことでしたら、御社Shopifyの『XXXXX.myshopify.com』の『XXXXX』部分をお教えいただけましたら、コラボレーターリクエストの申請をさせていただきますので、プライベートメッセージでご連絡いただければと思います。
また、設定 > ユーザーと権限 にて、
下記画像のように、
リクエスト送信にコードが必要な状態になっていましたら、
添付画像のように4桁のコードが記載されていると思いますので、
そちらの4桁のコードも合わせてお教えください。
対応ありがとうございます。
『XXXXX.myshopify.com』の『XXXXX』部分とはどこで確認できますでしょうか？
あと、プライベートメッセージはどちらから送ることができますか？
担当が変わり何もわからない状態でして、ご迷惑をおかけして申し訳ございません。
よろしくお願いいたします。
福島