# 購入ボタン（buy button）の商品の切り替え **URL:** \ **Category:** 技術的なQ＆A\ **Created:** [February 10, 2021, 7:09am UTC](https://community.shopify.com/t/buy-button/35480 "2021-02-10T07:09:14Z")\ **Posts on this page:** 2\ **Page:** 1 ## AI-generated summary 外部サイト上で、色やサイズの選択に応じて表示商品と購入ボタンを切り替える実装方法が主題です。Shopify管理画面の販売チャネル「Buy Button」で生成した埋め込みタグを、1つのボタンのまま動的に別商品へ切り替えられるかが質問されています。 現時点の回答では、アプリ画面で生成した固定の埋め込みコードを流用するより、BuyButton.js を直接使って動的にボタンを表示する方法が推奨されています。BuyButton.js は Shopify の購入ボタンをコードから描画するためのライブラリです。 提案された実装方針は以下の通りです。 ・外部サーバー側で API を使って商品検索・商品特定を行う ・選択結果に応じて BuyButton.js で対象商品のボタンをレンダリングする そのため、質問にある「既存ボタンの中身だけを簡単に切り替える」よりも、条件に応じて動的生成する方向が現実的と示されています。最終的な具体実装までは示されておらず、議論は継続可能な状態です。
**Author:** ![ryujiu](https://avatars.discourse-cdn.com/v4/letter/r/b38774/32.png) [@ryujiu](https://community.shopify.com/u/ryujiu)\ **Post date:** [February 10, 2021, 7:09am UTC](https://community.shopify.com/t/buy-button/35480/1 "2021-02-10T07:09:14Z")
お世話になります。 現在、Shopifyのサイト内ではなく外部サイトで商品を見せて、 そこから購入ボタンでカートに入れたりチェックアウトしたりする構造を検討しています。 商品のバリエーションが多岐にわたり、商品を一覧で見せるのではなく、 例えばセレクトボックスで色やサイズを選択したらそれに該当する商品を上部の画像で表示し、購入ボタンも表示するような感じです。 その際、演出など少しリッチなコンテンツにするため外部サイトで実装することを考えています。 販売チャネルの Buy Button から購入ボタンのタグを生成してサイトに貼れることはわかったのですが、 商品ごとにボタンを用意するのではなく、一度生成した購入ボタンを流用して商品を切り替えられないかと考えております。 Buy Button のスクリプトの createComponent によって購入ボタンが生成されると思いますが、 この購入ボタンで購入できる商品を動的に切り替えることは可能なものでしょうか。 難しい場合、現実的なのは切り替えたいタイミングで生成されたボタンを削除し、 再度 createComponent で購入ボタンを生成するという方法でしょうか。 ご教示いただければ幸いです。よろしくお願いいたします。 ---
**Author:** ![junichiokamura](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/junichiokamura/32/299737_2.png) [@junichiokamura](https://community.shopify.com/u/junichiokamura)\ **Post date:** [February 18, 2021, 2:04pm UTC](https://community.shopify.com/t/buy-button/35480/2 "2021-02-18T14:04:47Z")
そういった動的なボタンの生成は、アプリの生成コードではなくて、直接BuyButton.jsを使って動的にボタンを表示することをお勧めします。 [https://shopify.github.io/buy-button-js/](https://shopify.github.io/buy-button-js/) 商品検索は、外部サーバー側でAPIを使って行い、結果に基づいてBuyButton.jsでボタンをレンダリングすることはできると思います。