素人ですdawnテーマを使用しておりますトップ画面のitem表示数を4列にしたいのですがすでに回答のあるものを試したのですが反映されません。素人にも理解できるよう手順を教えて頂きたいです
Topic summary
Dawnテーマを使用しているユーザーが、モバイル版のトップ画面で商品表示を3列（または4列）にする方法を質問。
解決した問題：
- 初期設定では1列か2列のみ選択可能だったが、カスタムCSSを追加することで3列表示を実現
- 具体的なCSSコード（
grid--2-col-tablet-downのメディアクエリ設定）が提供され、成功 - sold out商品の枠線問題も自己解決
新たな課題：
- モバイルでスワイプ機能をOnにした際の「1/2」などのページ表示を非表示にしたい →
.slider-buttons { display: none; }のCSS追加で対応可能 - 商品ページの「カートに入れる」ボタンが表示されない問題が発生
- テーマ設定で文字色やボーダーを変更したが改善せず
- 配色スキーム1のアウトラインボタン設定が影響している可能性を指摘
現状：
回答者が直接ストアを確認するため、コラボレーターアクセスの提供を検討中。設定変更が複雑なため、実際のストア確認が必要な段階。
@piko 様
Dawn 11.0.0を確認しますと、
https://themes.shopify.com/themes/dawn/styles/default/preview
商品カードは元々4列表示になっています。
ということは、
質問者様は、上図の部分ではない箇所について言及されていると思うのですが、どの部分のことかをお教えいただいても良いでしょうか？
例えば、スクリーンキャプチャをつけていただいたり、「テーマ > カスタマイズ」の中のセクションやブロックの名称でも大丈夫です。
また、
お使いのDawnのバージョンや、
参考にされた、という記事のURLなども
分かると、より良いです。
(キュー田辺)
返信くださりありがとうございます。
質問内容に詳細を書き忘れており
申し訳ございません。
モバイル版での表示を横に3列にしたいです。
4列も可能であれば4列も試したいです。
初期設定では1列か2列しか選べれないです
dawn 10.0.0 と11.0.0を使用しております
https://community.shopify.com/post/1874208
https://community.shopify.com/post/2032165
関連のものは全て見ており試してみましたが、、実装されません。。
@piko 様
補足情報ありがとうございます。
Dawnをお使いであればこちらの記事の方が参考になりそうですね。
(もう片方はPrestigeというテーマのカスタマイズについてのようなので、参考にできなさそうです。)
https://community.shopify.com/post/2032165
さて、上記の投稿で紹介されているCSSをどこに追加するか、でも変わってきてしまうのですが、適切な位置に追加されている場合、下図のように「テーマカスタマイズ」画面にて、モバイルでの列数が「2列」になっていれば、うまくCSSがきくはずです。
「1列」になっている場合は、「2列」にご変更ください。
さて、上記のやり方ですと、意図した見た目にならないかもしれません。
例えば、3列表示で、11個商品がある場合、最後の段の2商品は2列表示になるかと思います。
そうしたくない場合は、下記のように、max-widthを追加されると良いです。
max-widthとwidthに同じ内容を設定してください。
@media screen and (max-width: 749px) {
.grid--2-col-tablet-down .grid__item {
width: calc(33% - var(--grid-mobile-horizontal-spacing) / 2);
max-width: calc(33% - var(--grid-mobile-horizontal-spacing) / 2);
}
}
また、
もしCSSの追加場所に悩まれるようでしたら、下図のように「カスタムCSS」に追加いただくのが簡単です。
Dawn 11.0.0での解説になっていますが、おそらくDawn 10.0.0でもうまく機能するはずです。
ご参考まで。
(キュー田辺)
上記の方法で
3列になりました！！！！
本当にありがとうございます！！
もう1件お聞きしたいのですが
このような 〈 1/2 〉の文字を
削除は行えますでしょうか？？
コレクションリストやマルチカラム等の下部にでてきます。
@piko 様
私の開発ストアでは下記の文字列の表示を確認できませんでした。
このような 〈 1/2 〉の文字を
削除は行えますでしょうか？？
コレクションリストやマルチカラム等の下部にでてきます。
プライベートメッセージなどで、ストアのURLをお送りいただけますと何か分かるかもしれません。
ご検討ください。
(キュー田辺)
モバイル画面の表示で
スワイプをOnにしたときにでます
これを非表示したいです。
また、sold outの枠線
白くなっているのはどうしたら
消せれますでしょうか？
スキームを色々試したのですが
枠線は残ったままでした。
教えて頂きたいです??
sold outの枠線は解決しました? 
商品ページのカートに入れる
ボタンが表示されないのですが
原因はわかりますでしょうか？
@piko 様
補足説明ありがとうございます。
コレクションリストやマルチカラムの「モバイルでスワイプを有効にする」にチェックを入れた際に表示されるコンポーネントを非表示にするには、
それぞれのカスタムCSSに下記を設定されれば良いはずです。
.slider-buttons {
display: none;
}
お試しください。
(キュー田辺)
@piko 様
「カートに入れる」が何も表示されていないように見えるのは、
「テーマ設定」にて、
文字色を白に、ボーダーをなくしたからではないでしょうか？
デフォルトのデザインですと、
「カートに入れる」ボタンは下記の状態です。
- ボーダーが黒
- 背景が白
- 文字色が黒
ここから、
ボーダーを無くして、文字色を白にしてしまうと、
何も表示されていないように見えてしまうかもしれません。
念のためご確認ください。
(キュー田辺)
テーマ設定の色
全て確認し設定もし直したのですが
表示されないままです。
配色スキーム複数作成してますが
何番が商品ページのカートインボタンに
反映されるのでしょうか。
@piko 様
スキーム1の、アウトラインボタンがボタンの文字色に採用されるようです。
もし、この設定に問題がない場合ですが、
今の状態での、これ以上のアドバイスは難しいです。
設定をご自身で変更されているようなので、
実際にストアを拝見してみないと調査が難しいです。
もし、ご要望あれば、
コラボレーターアクセスをいただいて、
私たちが直接ストアにログインして確認してみることはできます。
(解決のお約束はできませんが。)
ご検討ください。
(キュー田辺)
お願いしたいです??
コラボレーターアクセスはどうしたら
よいのでしょうか？