商品表示列の変更

[Unsually]

shopify初心者です！

現在、Galleriaのテーマを使っているのですがモバイル版での商品表示が2列になっています。

こちらを3列にしたいのですが、調べてみてもやり方がいまいち分からず困っております。

どなたかご回答お願いいたします(ToT)

[Qcoltd]

@Unsually様

ご質問いただいている商品表示を2列から3列にしたい件ですが、対象箇所はコレクション等の商品一覧での表示との認識で回答させていただきます。

前提条件として、お使いのテーマが有料テーマのためトライアルのプレビュー確認となりますので、実際に動かない場合もございますのでご了承ください。

対応方法

1. テーマのカスタマイズボタンをクリック
2. 上部のホームページからコレクション > デフォルトのコレクションを選択
   
3. テンプレートのProductsをクリック
   
4. カスタムCSSに下記コードを追加し保存ボタンをクリック
   

@media (max-width: 991px) {
  collection-product-grid > div {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

また、対象箇所が違う場合は方法が異なりますので、カスタマイズボタンを押した先の対象ページ名をご連絡いただければもう少し確認ができるかと思います。

ご参考まで
(キュー小坂)

[Unsually]

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

確認したところ、私の方にはデフォルトのコレクションの表示、テンプレートの欄にProductsの表示もありませんでした。

 

いろいろ見てみたところカスタムcssというものはあったのですが、こちらに記入するので合ってますでしょうか？

お手数おかけしますが、よろしくお願いいたします。

unsually 福島 

[Qcoltd]

@Unsually福島様

Galleriaテーマは3.3.1の最新版で確認させていただきましたので、テーマのバージョンが異なっている可能性がございます。

バージョンが異なっておりましたら、ご連絡いただきましたカスタムCSSの部分に追加いただいても、テーマのタグ構造が異なっている場合があり、追加したCSSが動かない場合もございます。

テーマのバージョンが異なる場合は、対象ページのURLをいただけましたら、サイトの表示側から確認できるかもしれません。

対応できない場合もございますので、ご了承ください。

ご参考まで
(キュー小坂)

[Unsually]

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

https://unsually.com/

こちらになります！

よろしくお願いいたします！

unsually福島

[Qcoltd]

@Unsually福島様

いただいたURLを拝見させていただきました。

やはりコードの作りが最新のテンプレートと異なっているようです。

先ほどご連絡いただきました、テーマ設定のカスタムCSSに下記コードを追加すると『https://unsually.com/collections/%E3%83%88%E3%83%83%E3%83%97%E3%82%B9』などの商品一覧ページをスマートフォンで見た際 、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をプレビューしての確認となりますので、スマートフォンの実機での確認はできておりませんので、実際に動かない場合もございますのでご了承ください。

ご参考まで
(キュー小坂)

[Unsually]

わかりやすくご回答ありがとうございます(ToT)

カスタムcssに記載してくださったコードを入力したのですが、携帯の方で見ても3列に変わりませんでした。

もう方法はないのでしょうか？

unsually 福島

[Qcoltd]

@Unsually福島様

カスタムCSS以外にもテーマファイルのCSSを編集する方法はございますが、有料テーマかつ現在の最新バージョンでは無いようですので、どのファイルを修正すれば良いかのご説明が難しいです。

もし御社のShopifyへコラボレーターリクエストさせていただき管理画面を確認させていただくことができれば、もう少し対応方法のご説明も可能かと思います。

ご参考まで
(キュー小坂)

[Unsually]

かしこまりました。

お手数おかけして誠に申し訳ございません。

こちらはどのようにしたらよろしいでしょうか？

[Qcoltd]

@Unsually福島様

コラボレーターリクエスト問題ないとのことでしたら、御社Shopifyの『XXXXX.myshopify.com』の『XXXXX』部分をお教えいただけましたら、コラボレーターリクエストの申請をさせていただきますので、プライベートメッセージでご連絡いただければと思います。

また、設定 > ユーザーと権限 にて、
下記画像のように、
リクエスト送信にコードが必要な状態になっていましたら、
添付画像のように4桁のコードが記載されていると思いますので、
そちらの4桁のコードも合わせてお教えください。

 

[Unsually]

対応ありがとうございます。

『XXXXX.myshopify.com』の『XXXXX』部分とはどこで確認できますでしょうか？

あと、プライベートメッセージはどちらから送ることができますか？

担当が変わり何もわからない状態でして、ご迷惑をおかけして申し訳ございません。

よろしくお願いいたします。

福島