バリエーションごとに「再入荷お知らせ」ボタンを設置したい

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

AI-generated summary

目的: 各バリエーション（例: ネイビー×S/M/L）ごとに「売り切れ」時のボタンを「再入荷お知らせ」に切り替えたい。

課題: 複数のバリエーションを個別ボタンで並べるカスタムUIでは、在庫をバリエーション単位で認識して複数の通知ボタンを出すことが多くのアプリで困難。

技術ポイント: Back In Stock（Shopifyアプリ）は、デフォルトの商品フォーム最下部にJavaScript（JS）で1つの再入荷ボタンを挿入する仕組み。複数ボタンを持つカスタムフォームには非対応。

提案された選択肢:

  • カスタムフォームに対応し、バリエーション単位の在庫連動・複数ボタン表示が可能な専用アプリを新規開発/実装する。
  • Shopifyのデフォルトのオプション切り替え（単一フォーム）に戻し、Back In Stock等の既存アプリを利用する。

補足: 現在のUI（複数ボタン表示）のスクリーンショットが理解に重要。

現状: 具体的な採用方針は未決定。カスタム開発かデフォルトUIへの回帰かの二択で検討継続。

1

バリエーションごとに「カートに追加」ボタン（売り切れの場合は「売り切れ」ボタン）を設置しているのですが、バリエーションごとの売り切れのボタンを「再入荷お知らせ」に変更したいと考えています。

さまざまなアプリに問い合わせてみましたが、バリエーションごとに在庫を認識して複数ボタンを設置するという動きは難しいようです。

何か良い方法はないのでしょうか？

2

意図している仕様かどうかはわかりませんが、普通にこのアプリでできませんか？
https://apps.shopify.com/back-in-stock?locale=ja

3

私も当初こちらの利用を検討していたのですが、問い合わせてみたところ、バリエーションごとにボタンを分けてしまうと在庫状況が確認できないようなんです…

現在私のサイトでは、

ネイビー × S 【ADD TO BAG】
× M 【SOLD OUT】
× L 【ADD TO BAG】

のようにそれぞれボタンを表示しているので、このように分けてしまうとアプリの機能では対応できないようです。

こちらスクリーンショットになります。

スクリーンショット 2021-09-29 3.23.39.png
スクリーンショット 2021-09-29 3.23.39.png3358×1566 296 KB

4

なるほど、そういうことなんですね。

Back In Stockはデフォルト状態のフォームの最下部に再入荷ボタンをJSで出力する仕組みだと思いますので、複数表示にカスタマイズされたフォームには対応していないんだと思います。

カスタマイズしたフォーム対応のアプリを開発するか、デフォルトのオプション切り替えに戻してBack In Stockなどのアプリを使うか2択だと思います。