リワイアでアプリ開発をしています、ayaです。
前回、Shopifyのバンドルアプリについて「バンドルとはなんぞや?」というところからお話しました。
第2回目の実践編となる今回は、実際にバンドルを作成してみたいと思います!
1.実際にバンドルを作成してみた~セットアップ
インストールするとシンプルな画面が表示されます。
![](https://rewired.cloud/wp-content/uploads/2023/12/バンドル2_1差替1-1024x664.png)
バンドルを作成するボタンをクリックすると編集ページへ遷移します。
![](https://rewired.cloud/wp-content/uploads/2023/12/バンドル2_2差替-1024x573.png)
商品を選択ボタンを押すとピッカーが表示され、バンドルさせたい商品が選択可能です。バリエーションのある商品ない商品を混在させられます。
![](https://rewired.cloud/wp-content/uploads/2023/12/バンドル2_3差替1-1024x576.jpg)
特定のバリエーションを除外も可能(超しっとりの部分)。
![](https://rewired.cloud/wp-content/uploads/2023/12/バンドル2_4差替1-1024x576.jpg)
「オプションで数量を追加する」と、特定の数量をオプションとして用意できます。
![](https://rewired.cloud/wp-content/uploads/2023/12/バンドル2_5差替1-1024x576.jpg)
![](https://rewired.cloud/wp-content/uploads/2023/11/バンドル2_6.png)
保存して実行するを押下するとこのバンドルが商品として登録されます。
![](https://rewired.cloud/wp-content/uploads/2023/11/バンドル2_7-1024x613.png)
余談ですが、ここにアプリからのカードを入れられる部分、7月発表の「Shopify Editions Summer ‘23」にあったAdmin UI extensionsが使われていますね。
![](https://rewired.cloud/wp-content/uploads/2023/12/バンドル2_8差替1-1024x516.png)
2. ストアフロント〜チェックアウトでの表示と体験
このバンドルの商品ページを見て見ましょう。
![](https://rewired.cloud/wp-content/uploads/2023/11/バンドル2_9差替1-1024x576.jpg)
金額は何もいじらないと単純に合計した金額がセットされています(シャンプーとコンディショナーは1,000円、保湿剤は1,500円)。注意点として、バリエーションが存在しない保湿剤はここに表示されないため、商品説明や画像などでエンドユーザーに工夫して伝える必要がありそうですね。
コンディショナーは現在は超しっとり以外は在庫がないので、選べないようになっています。
![](https://rewired.cloud/wp-content/uploads/2023/12/バンドル2_10差替1-1024x576.jpg)
カートへ追加してみます。
![](https://rewired.cloud/wp-content/uploads/2023/11/バンドル2_11.png)
![](https://rewired.cloud/wp-content/uploads/2023/11/バンドル2_12-1024x604.png)
カート内では1バンドルが1商品として扱われています。下部にはバリエーションしか出ないので商品名に工夫が必要そうですね。
よく見かける、こういう商品名(下画像)にした方がいいのかもしれません……!
![](https://rewired.cloud/wp-content/uploads/2023/11/バンドル2_13.png)
使用中のテーマ・Dawnで確認するうえでは、コンディショナーのバリエーション2つが分かれているのが気になりました。
チェックアウトに進んでみます。
![](https://rewired.cloud/wp-content/uploads/2023/11/バンドル2_14-1024x723.png)
![](https://rewired.cloud/wp-content/uploads/2023/11/バンドル2_15-1024x634.png)
サンクスページまでくると、個々の商品として表示されました。
![](https://rewired.cloud/wp-content/uploads/2023/11/バンドル2_16差替1-1024x576.jpg)
注文管理画面はどうなっているのでしょう……。確認すると、きちんと個々の商品として取り扱われていました。
![](https://rewired.cloud/wp-content/uploads/2023/11/バンドル2_17-1024x885.png)
なのでフルフィルメントをしてみると……
![](https://rewired.cloud/wp-content/uploads/2023/11/バンドル2_18.png)
個々の商品から在庫が差し引かれていました!(下画像)
![](https://rewired.cloud/wp-content/uploads/2023/12/バンドル2_19差替2-1024x576.jpg)
セットアップと、チェックアウトの体験までやってみました。Shopify Bundles、シンプルな設計なら導入も簡単そうだな……と個人的には感じています。
次回はバンドルアプリを使ってみて、気になったところを振り返ってみたいと思います!