フリーページに購入ボタン（個数入力付き）を設置したい

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

Topic summary

フリーページに数量入力付きの購入UIを設置したいという問い。チェックアウトリンクは数量選択非対応、ShopifyのBuy Buttonは非推奨のため不使用。

提示された解法:

  • パーマリンクで数量指定が可能。/cart/#{variant_id}:#{quantity} 形式で複数商品はカンマ区切り。具体例が示され、リンクでカートに所望数量を投入できる（コード例が理解の中心）。
  • フォーム＋ボタンでの実装:
    • 「カートに追加」はShopifyのAJAX Cart API（カート操作用の非同期API）で実装可能。テーマの既存コード流用も可。
    • 「今すぐ購入」はJavaScriptで数量セレクタの値をパーマリンクのquantityに反映し、そのURLへ遷移させる。
  • 代替として、該当機能を提供するアプリの利用も選択肢。

用語補足:

  • パーマリンク: カートURLにvariant_idとquantityを含め、カートに直接追加する方式。

結論/現状: 提案に質問者が納得し解決。スレッドは実質的に収束。

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

フリーページに購入ボタン（個数入力付き）を設置したいです。

チェックアウトリンクで商品ページ以外にも購入リンクが設置できるのは知っているのですが、それだと個数の選択がないので個数の選択も付けたボタンを設置したいのですが、どのようなタグを書けば良いでしょうか？

もしくは個数の選択付きのカートボタンの設置は無理でしょうか？

buybuttonはShopifyが推奨していないという事で使用を避けます。

2

パーマリンクで個数の指定は可能です。

下記ページを参照ください。

https://community.shopify.com/topic/613702

サンプル:

http://your-store.myshopify.com/cart/70881412:1,70881382:1

フォーマット:

http://yourstore.com/cart/#{variant_id}:#{quantity}
3

ご回答ありがとうございます。

パーマリンクではなく、フォームでお客様が個数を入力して「カートに追加する」「今すぐ購入する」のボタンを設置する事は可能でしょうか？

4

「カートに追加する」はCart API( https://shopify.dev/api/ajax/reference/cart )で実現可能です。

またはご利用のテーマ内のファイルやコードをどうにかして流用する形でも可能かもしれません。

「今すぐ購入する」はJSでパーマリンクのquantityを数量セレクタと連動させればよいと思います。

他方、アプリで対応できる可能性もありますので探されることもお勧めします。

例: https://apps.shopify.com/browse/conversion-cart-modification-add-to-cart?locale=ja

1 Like
5

よく分かりました！ご回答ありがとうございましたm(_ _)m