Shopify でセット販売を行う方法を調べてみた
はじめに
今回は、Shopify でセット販売を行う際の実装方法について調べてみました。
商品のメタフィールド等を用いて、コーディングでセット販売を実現する方法を解説していきます。
それでは、頑張っていきましょう。
セット販売とは
まずは、セット販売とはそもそも何なのかについて解説していきます。
Shopify におけるセット販売とは、複数の商品を一つのパッケージとしてまとめて販売する戦略です。複数の商品を一つのパッケージとしてまとめて販売することで、顧客単価の向上させることができます。
上記の画像のようなセット販売は、様々な EC サイトで見ますよね。
今回は、上記のようなセット販売を実現するための方法について解説しています。
この記事を書くにあたって、以下の記事が参考になりました。
また、メタフィールド周りの記述・コーディングは以下の記事を参考にしています。
それでは、解説していきます。
メタフィールドに値を設定する
まずは、メタフィールドに値を設定していきましょう。
「設定 > カスタムデータ」 より、カスタムデータ設定画面に移動します。
ここから、メタフィールドの設定を行いましょう。
商品のメタフィールドを選択しましょう。
カスタムデータの商品 を選択しましょう。
定義を追加 を選択しましょう。
また、商品のメタフィールドには、以下のように設定して下さい。
名前は set_data、ネームスペースとキーにはset_app.set_dataデータのタイプにはJSONを入力します。
そして、JSONスキーマには以下の値を入力して下さい。
{
"product_ids": []
}
ここまでが完了したら、保存をクリックしてください。
上記のように、商品メタフィールドの定義を設定することができました。
次に、商品ページに移動して手動でメタフィールドを設定しましょう。
任意の商品を選択してください。
一番下に移動して、メタフィールドを手動で設定しましょう。
以下のように、product_idsを設定して下さい。
{
"product_ids": [9217618641217]
}
上記の9217618641217という数字は、商品ページの URL から取得して下さい。
ここまで完了したら、保存しましょう。
次に、コードの編集ページに移動しましょう。
コードを編集する
テーマの三点リーダーのコードを編集から、コードの編集画面に移動しましょう。
コードの編集画面委移動したら、main-product.liquidに移動しましょう。
以下のコードで、メタフィールドに設定した値にアクセスすることができます。
product.set_app.set_data.value
上記のオブジェクトにアクセスしたら、product_idsから商品の id の配列を取得して下さい。
商品の id を product_idという変数に格納した後は、以下のコードで商品オブジェクトのアクセスすることができます。
assign product_obj = collections.all.products | where: 'id', product_id
assign set_product = product_obj[0]
これで、商品オブジェクトを取得することができたので、後は variant を配列表示すれば大丈夫です。
{% for variant in set_product.variants %}
...
メタフィールドに格納した商品の id に応じて、商品ページにセット販売を実現することができました。
といっても、ここまでの作業を Liquid の知識が無い人が行うのは大変なので、実際にはアプリを使用することになるかと思います。
アプリを使ってセット販売を実現する方法
それでは次に、アプリを使ってセット販売を実現する方法について解説します。
以下の記事が大変詳しく、参考になりました。
この記事をもとに、アプリについて解説していきます。
シンプルセット販売｜お手軽クロスセル
今回使用するアプリは、シンプルセット販売｜お手軽クロスセルという日本製の Shopify アプリです。
上記の見た目のセット販売を実現することができます。
また、割引条件等も設定することができます。
簡単に使い方を解説していきます。
アプリの概要の解説
こちらのアプリは、セット販売を作成することができます。
といっても、商品にセット販売を実現するというよりは、セット販売というオブジェクトを作成して、そのオブジェクトに商品をと割引条件を紐づける、という形で行われるようです。
それでは、具体的にアプリの使い方について解説していきます。
アプリのインストール後
アプリのインストール後、下記の画面が表示されます。
こちらの画面は、設定したセット販売オブジェクト一覧が表示されます。
ということで、右上のセット販売を作成より、セット販売を作成するページに移動しましょう。
セット販売を作成
こちらの画面で、セット販売オブジェクトを作成していきます。
設定するものは、セット販売名・セット販売商品・割引設定・ステータスとなります。
こちらを設定することで、設定した商品のそれぞれに、セット販売が表示されることになります。また、その際にこちらで設定した割引設定が表示されることになります。また、ステータスが存在するので、セット販売を表示させたい場合は公開中を選択してください。
これで、セット販売の設定は完了です。次に、この設定を Shopify のストアフロントに反映させましょう。
セット販売の設定を Shopify のストアフロントに反映
それでは、先ほどのセット販売の設定を Shopify のストアフロントに反映させていきましょう。
設定より、ストアにセット販売を表示するためのページに遷移して下さい。
こちらの画面から、テーマ選択して商品ページに追加をクリックすれば完了です。
最後に
ここまでで、コーディングを用いてセット販売を実現する方法と、アプリを用いてセット販売を実現する方法について解説しました。
お疲れさまでした。
Discussion