# 商品詳細ページでバリエーションごとにカートに追加ボタンを設置したい **URL:** \ **Category:** 技術的なQ＆A\ **Created:** [March 19, 2021, 5:18pm UTC](https://community.shopify.com/t/topic/40201 "2021-03-19T17:18:06Z")\ **Posts on this page:** 2\ **Page:** 1 ## AI-generated summary 商品詳細ページで、バリエーション選択をプルダウンではなく、各バリエーションごとに個別の「カートに追加」ボタンを表示できるかが主題です。例として「3個セット」「5個セット」ごとに価格とボタンを分けたい、という要望が出ています。 回答では、実現自体は可能とされています。主な方法は以下の2つです。 - `variants` オブジェクトを使って各バリエーション情報を出し分ける - ShopifyのAjax APIの `add.js` を使い、選択なしで対象バリエーションをカート追加するJavaScriptを書く そのままチェックアウトへ進む動作なら、既存のサンプルスレッドを応用できる可能性があるとも案内されています。一方、Debut標準のように「カートに入れるだけ」の動作にしたい場合は、`product-template.liquid` や `theme.js` の読解・改修が必要です。 結論として、開発対応ならテーマ編集で実装可能、非開発者ならアプリ利用や対応テーマの採用が現実的、という整理で、具体的な完成コード提示までは至っていません。
**Author:** ![aysen](https://avatars.discourse-cdn.com/v4/letter/a/a88e4f/32.png) [@aysen](https://community.shopify.com/u/aysen)\ **Post date:** [March 19, 2021, 5:18pm UTC](https://community.shopify.com/t/topic/40201/1 "2021-03-19T17:18:06Z")
Debutをベースにカスタマイズ挑戦中です。 商品の詳細ページで、 バリエーションが複数（入り数違いで値段が変わるなど）ある場合、 デフォルトではバリエーションの入り数をプルダウンで変更してカートに追加する形ですが、 商品タイトル 3個セット AAA円 [カートに追加] 5個セット BBB円 [カートに追加] のようにプルダウン選択でなく、 ボタンを分ける形でカートに追加させることは可能なのでしょうか？ 可能でしたら、サンプルコードなどご教授いただけますと大変助かります。 恐縮ですがどうぞよろしくお願いいたします。 ---
**Author:** ![Jizo\_Inagaki](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/jizo_inagaki/32/149480_2.png) [@Jizo\_Inagaki](https://community.shopify.com/u/Jizo_Inagaki)\ **Post date:** [April 20, 2021, 5:50am UTC](https://community.shopify.com/t/topic/40201/2 "2021-04-20T05:50:35Z")
基本的にはvariantsオブジェクト( [https://shopify.dev/docs/themes/liquid/reference/objects/variant/](https://shopify.dev/docs/themes/liquid/reference/objects/variant/) )を利用しつつJSを書く形になると思います。 カートに入れてそのままチェックアウト画面に移動するような動作であれば、JSを書かずとも下記スレッド内のサンプルを利用して実現できるのではと思いますが。 [https://community.shopify.com/topic/550247](https://community.shopify.com/topic/550247) 上記の動作ではなく、Debutで設置されているボタンのようにカートに入るだけということであれば、以下のドキュメントにあるadd.jsを用いたJSを書く必要があるはずです。 [https://shopify.dev/docs/themes/ajax-api/reference/cart](https://shopify.dev/docs/themes/ajax-api/reference/cart) 他にはテーマ内蔵のJSに処理を追加する方法も考えられはしますが、いずれにしましても、ドキュメントやフォーラムと共にproduct-template.liquidやtheme.jsなどを読まれることをお勧めします。Debut自体がサンプルコードの塊だと思いますので。 なお、サンプルコードと書かれていましたので開発者側という前提で記載しましたが、そうではなくマーチャント側ということでしたら、以下のようなアプリを使うか元からご希望の状態になっているテーマを探された方が良いかと思います。 [https://apps.shopify.com/variant-swatch-king](https://apps.shopify.com/variant-swatch-king)