buy bottonのwordpress埋め込み

日本語 ディスカッション 技術的なQ＆A
, ,

Topic summary

WordPressのStorefrontテーマを使用したショッピングサイトで、購入ボタン（buy button）を埋め込み、スマホ画面でも商品を2列横並びで表示したいという技術的な質問。

提案された解決策:

結果:

  • 質問者は問題解決が困難と判断し、無料お試し期間終了とともにShopifyの利用を中止
  • 投稿を削除しようとしたが、削除の仕方が分からず投稿が残った状態
  • 提案された解決策の検証はできず、未解決のまま終了
Summarized with AI on November 16. AI used: claude-sonnet-4-5-20250929.
1

wordpressのstorefrontテーマを使用して作ったショッピングサイトに、but buttonを埋め込んで商品一覧とカテゴリー別の商品ページを作ろうと考えています。

商品数が多いため、スマホ画面でも２商品横並びで表示したいのですが、どうしてもできません。

本来、スタータープランでやりたかったですが、コレクション機能なら横並びできそうでしたのでプラン変更しましたが、PC表示は横並びできてもスマホは無理でした。

コードの知識はありませんが、解決策はありますでしょうか？

2

@gamama 様

興味があり調査してみました。

おそらくスタータープランでもCSSの調整でモバイル表示でも2カラムにすることはできるのではないかと思いますが、

取り急ぎ、コレクションの購入ボタンをモバイル表示で2カラムにする方法をお伝えします。

購入ボタンのコードの中に下記のような記述はないでしょうか？

"product": {
    "styles": {
      "product": {
        "@media (min-width: 601px)": {
          "max-width": "calc(25% - 20px)",
          "margin-left": "20px",
          "margin-bottom": "50px",
          "width": "calc(25% - 20px)"
        },

もし、上記があるようでしたら、下記の内容に書き換えてみてください。

"product": {
    "styles": {
      "product": {
        "@media (max-width: 600px)": {
          "min-width": "unset",
          "max-width": "calc(50% - 20px)"
        },
        "@media (min-width: 601px)": {
          "max-width": "calc(25% - 20px)",
          "margin-left": "20px",
          "margin-bottom": "50px",
          "width": "calc(25% - 20px)"
        },

これで、モバイル表示でも2カラムになるはずです。

下記のサイトに詳しいカスタマイズ方法が記載されていますので、ご覧いただくと良いかもしれません。

https://shopify.github.io/buy-button-js/advanced/

ご参考まで。

(キュー田辺)

3

ご返信ありがとうございます。
解決策をご教授くださり大変ありがたいのですが、問題の解決は困難だと判断して、無料お試し期間の終了とともにshopifyをやめてしまいました。
その時にこちらの投稿も削除したかったのですが、どうにも削除の仕方がわからなかったので残ったままになっておりました。
ですので、申し訳ありませんが結果を検証することができません。

このたびはお手数をおかけしてしまってすみませんでした。

1 Like
4

@gamama 様

左様でしたか。

私の回答が遅かったのでお気になさらないでください。

もし、何かの機会でまたShopifyを触ることあれば、お気軽にご相談ください。

(キュー田辺)

1 Like