トップの商品表示数を増やしたい

[piko]

素人ですdawnテーマを使用しておりますトップ画面のitem表示数を4列にしたいのですがすでに回答のあるものを試したのですが反映されません。素人にも理解できるよう手順を教えて頂きたいです

[piko · Accepted solution]

上記の方法で

3列になりました！！！！

本当にありがとうございます！！

もう1件お聞きしたいのですが

このような　〈　　　1/2       〉の文字を

削除は行えますでしょうか？？

コレクションリストやマルチカラム等の下部にでてきます。

[Qcoltd · Accepted solution]

@piko 様

補足説明ありがとうございます。

コレクションリストやマルチカラムの「モバイルでスワイプを有効にする」にチェックを入れた際に表示されるコンポーネントを非表示にするには、

それぞれのカスタムCSSに下記を設定されれば良いはずです。

.slider-buttons {
  display: none;
}

お試しください。

(キュー田辺)

[Qcoltd · Accepted solution]

@piko 様

「カートに入れる」が何も表示されていないように見えるのは、

「テーマ設定」にて、

文字色を白に、ボーダーをなくしたからではないでしょうか？

デフォルトのデザインですと、

「カートに入れる」ボタンは下記の状態です。

• ボーダーが黒
• 背景が白
• 文字色が黒

ここから、

ボーダーを無くして、文字色を白にしてしまうと、

何も表示されていないように見えてしまうかもしれません。

念のためご確認ください。

(キュー田辺)

[Qcoltd]

@piko 様

Dawn 11.0.0を確認しますと、

https://themes.shopify.com/themes/dawn/styles/default/preview

商品カードは元々4列表示になっています。

ということは、

質問者様は、上図の部分ではない箇所について言及されていると思うのですが、どの部分のことかをお教えいただいても良いでしょうか？

例えば、スクリーンキャプチャをつけていただいたり、「テーマ > カスタマイズ」の中のセクションやブロックの名称でも大丈夫です。

また、

お使いのDawnのバージョンや、

参考にされた、という記事のURLなども

分かると、より良いです。

(キュー田辺)

[piko]

返信くださりありがとうございます。

質問内容に詳細を書き忘れており

申し訳ございません。

モバイル版での表示を横に3列にしたいです。

4列も可能であれば4列も試したいです。

初期設定では1列か2列しか選べれないです

dawn 10.0.0 と11.0.0を使用しております

https://community.shopify.com/c/技術的なq-a/prestigeでモバイルの商品表示数を３列にしたい/m-p/1874208

https://community.shopify.com/c/技術的なq-a/モバイルでの商品グリットの列数3列で表示させる方法/m-p/2032165

関連のものは全て見ており試してみましたが、、実装されません。。

[Qcoltd]

@piko 様

補足情報ありがとうございます。

Dawnをお使いであればこちらの記事の方が参考になりそうですね。

(もう片方はPrestigeというテーマのカスタマイズについてのようなので、参考にできなさそうです。)

https://community.shopify.com/c/%E6%8A%80%E8%A1%93%E7%9A%84%E3%81%AAq-a/%E3%83%A2%E3%83%90%E3%82%A4%...

さて、上記の投稿で紹介されている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でもうまく機能するはずです。

ご参考まで。

(キュー田辺)

[piko · Accepted solution]

上記の方法で

3列になりました！！！！

本当にありがとうございます！！

もう1件お聞きしたいのですが

このような　〈　　　1/2       〉の文字を

削除は行えますでしょうか？？

コレクションリストやマルチカラム等の下部にでてきます。

[Qcoltd]

@piko 様

私の開発ストアでは下記の文字列の表示を確認できませんでした。

> このような　〈　　　1/2       〉の文字を

> 削除は行えますでしょうか？？

> コレクションリストやマルチカラム等の下部にでてきます。

プライベートメッセージなどで、ストアのURLをお送りいただけますと何か分かるかもしれません。

ご検討ください。

(キュー田辺)

[piko]

モバイル画面の表示で

スワイプをOnにしたときにでます

これを非表示したいです。

また、sold outの枠線

白くなっているのはどうしたら

消せれますでしょうか？

スキームを色々試したのですが

枠線は残ったままでした。

教えて頂きたいです🙇🏼

 

 

[Qcoltd · Accepted solution]

@piko 様

補足説明ありがとうございます。

コレクションリストやマルチカラムの「モバイルでスワイプを有効にする」にチェックを入れた際に表示されるコンポーネントを非表示にするには、

それぞれのカスタムCSSに下記を設定されれば良いはずです。

.slider-buttons {
  display: none;
}

お試しください。

(キュー田辺)

[piko]

sold outの枠線は解決しました🙇‍♀️

商品ページのカートに入れる

ボタンが表示されないのですが

原因はわかりますでしょうか？

[piko]

 

[piko]

 

[Qcoltd · Accepted solution]

@piko 様

「カートに入れる」が何も表示されていないように見えるのは、

「テーマ設定」にて、

文字色を白に、ボーダーをなくしたからではないでしょうか？

デフォルトのデザインですと、

「カートに入れる」ボタンは下記の状態です。

• ボーダーが黒
• 背景が白
• 文字色が黒

ここから、

ボーダーを無くして、文字色を白にしてしまうと、

何も表示されていないように見えてしまうかもしれません。

念のためご確認ください。

(キュー田辺)

[piko]

テーマ設定の色

全て確認し設定もし直したのですが

表示されないままです。

配色スキーム複数作成してますが

何番が商品ページのカートインボタンに

反映されるのでしょうか。

[Qcoltd · Accepted solution]

@piko 様

スキーム1の、アウトラインボタンがボタンの文字色に採用されるようです。

もし、この設定に問題がない場合ですが、

今の状態での、これ以上のアドバイスは難しいです。

設定をご自身で変更されているようなので、

実際にストアを拝見してみないと調査が難しいです。

もし、ご要望あれば、

コラボレーターアクセスをいただいて、

私たちが直接ストアにログインして確認してみることはできます。

(解決のお約束はできませんが。)

ご検討ください。

(キュー田辺)

[piko]

お願いしたいです🙇🏼

コラボレーターアクセスはどうしたら

よいのでしょうか？