商品詳細ページで、バリエーション選択をプルダウンではなく、各バリエーションごとに個別の「カートに追加」ボタンを表示できるかが主題です。例として「3個セット」「5個セット」ごとに価格とボタンを分けたい、という要望が出ています。
回答では、実現自体は可能とされています。主な方法は以下の2つです。
variants オブジェクトを使って各バリエーション情報を出し分けるadd.js を使い、選択なしで対象バリエーションをカート追加するJavaScriptを書くそのままチェックアウトへ進む動作なら、既存のサンプルスレッドを応用できる可能性があるとも案内されています。一方、Debut標準のように「カートに入れるだけ」の動作にしたい場合は、product-template.liquid や theme.js の読解・改修が必要です。
結論として、開発対応ならテーマ編集で実装可能、非開発者ならアプリ利用や対応テーマの採用が現実的、という整理で、具体的な完成コード提示までは至っていません。
Debutをベースにカスタマイズ挑戦中です。
商品の詳細ページで、
バリエーションが複数（入り数違いで値段が変わるなど）ある場合、
デフォルトではバリエーションの入り数をプルダウンで変更してカートに追加する形ですが、
商品タイトル
3個セット AAA円
[カートに追加]
5個セット BBB円
[カートに追加]
のようにプルダウン選択でなく、
ボタンを分ける形でカートに追加させることは可能なのでしょうか？
可能でしたら、サンプルコードなどご教授いただけますと大変助かります。
恐縮ですがどうぞよろしくお願いいたします。
基本的にはvariantsオブジェクト( https://shopify.dev/docs/themes/liquid/reference/objects/variant/ )を利用しつつJSを書く形になると思います。
カートに入れてそのままチェックアウト画面に移動するような動作であれば、JSを書かずとも下記スレッド内のサンプルを利用して実現できるのではと思いますが。
https://community.shopify.com/topic/550247
上記の動作ではなく、Debutで設置されているボタンのようにカートに入るだけということであれば、以下のドキュメントにあるadd.jsを用いたJSを書く必要があるはずです。
https://shopify.dev/docs/themes/ajax-api/reference/cart
他にはテーマ内蔵のJSに処理を追加する方法も考えられはしますが、いずれにしましても、ドキュメントやフォーラムと共にproduct-template.liquidやtheme.jsなどを読まれることをお勧めします。Debut自体がサンプルコードの塊だと思いますので。
なお、サンプルコードと書かれていましたので開発者側という前提で記載しましたが、そうではなくマーチャント側ということでしたら、以下のようなアプリを使うか元からご希望の状態になっているテーマを探された方が良いかと思います。