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

日本語 ディスカッション 技術的なQ＆A
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

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

試してみます！