buy bottonのwordpress埋め込み

[gamama]

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

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

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

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

[Qcoltd]

@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/

ご参考まで。

(キュー田辺)

[gamama]

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

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

[Qcoltd]

@gamama 様

左様でしたか。

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

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

(キュー田辺)