FROM CACHE - jp_header
このコミュニティはピアツーピアサポートに移行しました。Shopify サポートは今後、このコミュニティへのサービスを提供いたしません。これからもぜひ、他のマーチャントやパートナーとつながり、サポートし合い、経験を共有してください。 当社の行動規範に違反する行動や削除を希望するコンテンツがありましたら、引き続きご報告ください

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

解決済

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

piko
遊覧客
13 1 0

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

4 件の受理された解決策
piko
遊覧客
13 1 0

成功

上記の方法で

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

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

 

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

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

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

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

元の投稿で解決策を見る

Qcoltd
Shopify Partner
1133 458 449

成功

@piko 様

 

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

 

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

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

 

.slider-buttons {
  display: none;
}

 

お試しください。

(キュー田辺)

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

元の投稿で解決策を見る

Qcoltd
Shopify Partner
1133 458 449

成功

@piko 様

 

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

「テーマ設定」にて、

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

 

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

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

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

 

ここから、

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

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

 

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

(キュー田辺)

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

元の投稿で解決策を見る

Qcoltd
Shopify Partner
1133 458 449

成功

@piko 様

 

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

 

screenshot_20230804_01.png

 

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

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

 

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

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

 

もし、ご要望あれば、

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

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

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

 

ご検討ください。

(キュー田辺)

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

元の投稿で解決策を見る

14件の返信14

Qcoltd
Shopify Partner
1133 458 449

@piko 様

 

Dawn 11.0.0を確認しますと、

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

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

screenshot_20230803_03.png

 

ということは、

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

 

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

 

また、

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

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

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

(キュー田辺)

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

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

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

申し訳ございません。

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

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

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

 

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

 

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

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

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

 

 

Qcoltd
Shopify Partner
1133 458 449

@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がきくはずです。

screenshot_20230803_04.png

 

「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」に追加いただくのが簡単です。

screenshot_20230803_05.png

 

Dawn 11.0.0での解説になっていますが、おそらくDawn 10.0.0でもうまく機能するはずです。

 

ご参考まで。

(キュー田辺)

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

成功

上記の方法で

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

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

 

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

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

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

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

Qcoltd
Shopify Partner
1133 458 449

@piko 様

 

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

 

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

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

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

 

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

 

ご検討ください。

(キュー田辺)

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

IMG_8573.jpeg

モバイル画面の表示で

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

 

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

 

また、sold outの枠線

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

消せれますでしょうか?

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

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

教えて頂きたいです🙇🏼

IMG_8572.jpeg

Qcoltd
Shopify Partner
1133 458 449

成功

@piko 様

 

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

 

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

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

 

.slider-buttons {
  display: none;
}

 

お試しください。

(キュー田辺)

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

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

 

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

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

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

piko
遊覧客
13 1 0

IMG_8577.jpeg

piko
遊覧客
13 1 0

IMG_8578.jpeg

Qcoltd
Shopify Partner
1133 458 449

成功

@piko 様

 

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

「テーマ設定」にて、

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

 

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

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

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

 

ここから、

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

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

 

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

(キュー田辺)

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

テーマ設定の色

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

表示されないままです。

 

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

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

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

Qcoltd
Shopify Partner
1133 458 449

成功

@piko 様

 

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

 

screenshot_20230804_01.png

 

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

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

 

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

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

 

もし、ご要望あれば、

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

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

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

 

ご検討ください。

(キュー田辺)

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

お願いしたいです🙇🏼

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

よいのでしょうか?