FROM CACHE - jp_header

buy bottonのwordpress埋め込み

gamama
訪問者
2 0 1

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

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

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

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

3件の返信3

Qcoltd
Shopify Partner
1051 431 418

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

 

ご参考まで。

(キュー田辺)

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

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


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

Qcoltd
Shopify Partner
1051 431 418

@gamama 様

 

左様でしたか。

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

 

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

 

(キュー田辺)

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