ランディングページの商品選択で個数選択をさせたい

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

Topic summary

ランディングページ上で商品ページへ遷移せずに個数選択してカート投入したいという要望。標準のShopify「Buy Button」では個数選択が表示されないのが課題。

提案された解決策: Buy Buttonのコード内 options.product に contents: { quantity: true } を追加すると数量入力フィールドが表示可能。提示されたコード断片が理解の中心で、詳しいカスタマイズ方法は公式ドキュメント（shopify.github.io/buy-button-js/customization）に言及。

注意点: 追加直後のUIは見栄えが良くないうえ、一般的なプラス/マイナス式ではないため、CSS/JSでの追加カスタマイズが望ましい。

現在の状況: 質問者は「試してみます」と回答。具体的な動作確認・最終的な解決可否は未報告で、議論は継続中。

Summarized with AI on February 16. AI used: gpt-5.
1

現在ページ機能でランディングページを作成しているのですが、

商品ページに飛ばさすに商品の個数選択をさせてカートインさせることは可能でしょうか？

「Buy Button」を使うと個数選択ができないため、商品ページに飛ばす以外で良い方法がないかと思っています。

よろしくお願いいたします。

2

良い方法がたくさんありそうですので、他の方からも回答があればそちらを参考にした方が良いかもしれません。

Buy Buttonにも、数量入力を表示できるため、その方法をお伝えします。

Buy Buttonのコードの中に下記のような部分があるかと思います。(質問者様のカスタマイズ状況によって多少異なる可能性があります。)

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

こちらを下記のようにすることで、数量入力を表示できます。

options: {
  "product": {
    "styles": {
      "product": {
        "@media (min-width: 601px)": {
          "max-width": "calc(25% - 20px)",
          "margin-left": "20px",
          "margin-bottom": "50px"
        }
      }
    },
    "text": {
      "button": "Add to cart"
    },
    "contents": {
      "quantity": true
    }
  },

最後の方に、3行ほど追加しました。

こうすることで、数量入力フィールドを追加できます。

ただし、初期状態では見た目があまり良くありませんし、UIも、よく見るプラスマイナス式のものではありません。

さらにカスタマイズすれば、見た目を近づけることも可能かと思います。

下記のページにカスタマイズ方法がまとめられていますので、記載しておきます。

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

参考まで。

(キュー田辺)

1 Like
3

ご返信を頂きありがとうございます！

試してみます！