Buy Buttonの埋め込み先のサイズ選択をドロップダウンではなくボタン表示にする方法

Topic summary

ShopifyのBuy Buttonを外部サイトに埋め込む際、バリアント(サイズ)選択がドロップダウン形式で固定されており、ボタン形式に変更できないという問題が提起されました。

現状の制限:

  • Buy Buttonは現在ドロップダウン形式のみをサポート
  • テーマの商品ページではボタン表示が可能だが、Buy Button経由では不可
  • コード変更を試みても実現できず

提案された代替案:

  • ボタン形式を実現するには、コードを一から書く必要がある
  • カートパーマリンクを使用し、各サイズボタンに対応するURLを設定する方法が紹介された
  • この方法で直接チェックアウト画面に商品を追加可能

結論:
質問者はBuy Buttonでのボタン形式実装を断念し、カートパーマリンクの代替案を参考にすることに決定。スレッドは解決済み。

Summarized with AI on October 27. AI used: claude-sonnet-4-5-20250929.

ShopifyのBuy Buttonを使って、外部サイトに商品を埋め込んでいます。
現在、サイズの選択が「ドロップダウン形式」で表示されているのですが、これを「ボタン形式」(サイズごとのボタン)で表示したいと考えています。テーマの商品ページでは、サイズ表示を「ボタン」に変更できるのですが、Buy Button経由で埋め込んだ場合は、強制的にドロップダウンになってしまいます。

色々コードをいじったりしても「ボタン形式」に変えたりすることができず、この変更方法がわかる方がいれば教えていただけますと嬉しいです。

ドロップダウン形式(現状)↓

ボタン形式(こうしたい)↓

@aa4

shopifyのBuy Buttonのボタン作成手順を確認いたしましたが、

現在はドリップダウン形式しか選択できない様です。

ご提示のボタン形式で表示しようとした場合、対象箇所のコードを一から書く必要がございます。

作成するコードで、下記のカートパーマリンクに合致する形でリンクのURLを作成できれば、チェックアウト画面に商品を追加することも可能です。

https://help.shopify.com/ja/manual/checkout-settings/cart-permalink#katopamarinkuwozuo-cheng-suru

明確な回答とならず恐縮です。

ご参考まで。

(キュー小坂)

1 Like

ご返信ありがとうございます。ドリップダウン形式しか選択できないとのこと承知しました。

また、カートパーマリンクについてもありがとうございます。ボタンを作ってそのリンク先をその該当のサイズのカートパーマリンクに設定するということですよね。

そのやり方は知らなかったの参考になります。

Buy Buttonのボタン形式については一旦諦めます。ありがとうございます。