FROM CACHE - jp_header

商品表示列の変更

Unsually
新規メンバー
14 0 0

shopify初心者です!

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

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

 

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

10件の返信10

Qcoltd
Shopify Partner
1051 429 413

@Unsually

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

 

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

 

対応方法

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

 

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

 

 

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

 

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

株式会社Q (キュー)
グラフィックデザイン、アパレル事業、Web制作など色々やっている渋谷区代々木の会社です。ShopifyでのECサイトの運営・開発も行なっています。
私たちについて: https://web.q-co.jp/ テックブログ: https://techlab.q-co.jp/
Unsually
新規メンバー
14 0 0

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

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

IMG_8712.jpeg

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

 

IMG_8711.jpeg

 

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

 

unsually 福島 

Qcoltd
Shopify Partner
1051 429 413

@Unsually福島様

 

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

 

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

 

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

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

 

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

株式会社Q (キュー)
グラフィックデザイン、アパレル事業、Web制作など色々やっている渋谷区代々木の会社です。ShopifyでのECサイトの運営・開発も行なっています。
私たちについて: https://web.q-co.jp/ テックブログ: https://techlab.q-co.jp/
Unsually
新規メンバー
14 0 0

 

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

https://unsually.com/

こちらになります!

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

 

unsually福島

Qcoltd
Shopify Partner
1051 429 413

@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をプレビューしての確認となりますので、スマートフォンの実機での確認はできておりませんので、実際に動かない場合もございますのでご了承ください。

 

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

株式会社Q (キュー)
グラフィックデザイン、アパレル事業、Web制作など色々やっている渋谷区代々木の会社です。ShopifyでのECサイトの運営・開発も行なっています。
私たちについて: https://web.q-co.jp/ テックブログ: https://techlab.q-co.jp/
Unsually
新規メンバー
14 0 0

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

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

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

 

unsually 福島

Qcoltd
Shopify Partner
1051 429 413

@Unsually福島様

 

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

 

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

 

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

株式会社Q (キュー)
グラフィックデザイン、アパレル事業、Web制作など色々やっている渋谷区代々木の会社です。ShopifyでのECサイトの運営・開発も行なっています。
私たちについて: https://web.q-co.jp/ テックブログ: https://techlab.q-co.jp/
Unsually
新規メンバー
14 0 0

かしこまりました。

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

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

Qcoltd
Shopify Partner
1051 429 413

@Unsually福島様

 

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

 

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

screenshot_20230803_06.png

株式会社Q (キュー)
グラフィックデザイン、アパレル事業、Web制作など色々やっている渋谷区代々木の会社です。ShopifyでのECサイトの運営・開発も行なっています。
私たちについて: https://web.q-co.jp/ テックブログ: https://techlab.q-co.jp/
Unsually
新規メンバー
14 0 0

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

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

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

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

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

 

福島