Shopify でセット販売を実現する方法を徹底解説！

はじめに

今回は、Shopify でセット販売を行う 2 つの方法について解説していきます。

1 つ目は、メタフィールドを用いたコーディングでセット販売を行う方法です。
2 つ目は、アプリを用いてセット販売を行う方法です。

それぞれの方法について詳しく解説していきます。

セット販売とは？

セット販売は、異なるアイテムを組み合わせて一つのパッケージで販売することです。

1 つの商品を複数個、例えばティーバッグを 5 個や 10 個セットで提供したり、相補性のあるアイテム、例えばコーヒーマシンと専用のコーヒーカプセル、ミルクフォーマーを 1 つのパッケージとしてまとめて販売したりすることを指します。

メタフィールドを用いたコーティングでセット販売を行う方法

まずは、メタフィールドを用いたコーティングでセット販売を行う方法について解説します。

今回は、GraphQL を用いてメタフィールドを作成していきます。

「Shopify GraphQL App」にアクセスしてください。「Shopify GraphQL App」はストア上で GraphQL を使用できるように Shopify が用意しているアプリです。

上記の Install の部分に Shopify の開発ストアの URL を入力し、Select all をクリックして、「インストール」ボタンを押すと、Shopify の開発ストアに 「Shopify GraphQL App」をインストールすることができます。

ストアのメタフィールドにセット販売の情報を設定する

ストアのメタフィールドにセット販売の情報を設定する方法を解説します。

以下の画像は、今回実装する GraphQL コードです。Mutation の部分と Variables の部分を順に解説していきます。

まずは、Mutation の部分です。以下のコードをそのまま貼り付けてください。

mutation MetafieldsSet($metafields: [MetafieldsSetInput!]!) {
  metafieldsSet(metafields: $metafields) {
    metafields {
      key
      namespace
      value
      createdAt
      updatedAt
    }
    userErrors {
      field
      message
      code
    }
  }
}

metafields ブロックには、登録されたメタフィールドの情報が入ります。
今回は、key・namespace・value を指定して登録されたメタフィールドの情報が正しいものか確認できるようにしています。

userErrorsには GraphQL の実行中に発生したエラーに関する情報が入ります。

次に、Variablesの部分です。

完成形のコードがこちらです。

{
  "metafields": [
    {
      "key": "set_settings",
      "namespace": "set_app",
      "ownerId": "gid://shopify/Shop/67358163174",
      "value": "{\"sets\": [{\"set_id\": 1, \"set_name\": \"setA\", \"product_ids\": [\"8362227761382\", \"8362228089062\", \"discount_type\": \"percentage\", \"discount_amount\": 10}, {\"set_id\": 2, \"set_name\": \"setB\", \"product_ids\": [\"8362227663078\", \"8362227794150\", \"discount_type\": \"fixed\", \"discount_amount\": 1000}]}",
      "type": "json"
    }
  ]
}

各設定項目について詳しくみていきましょう。まずメタフィールドの key と namespace です。今回は、key にset_settings、namespace に set_app を指定しています。

次に、ownerId を設定します。以下の GraphQL クエリを実行して Shop の id を取得してください。

{
  shop {
    id
  }
}


============================================
実行後のレスポンス

{
  "data": {
    "shop": {
      "id": "gid://shopify/Shop/67358163174"
    }
  },
  "extensions": {
    "cost": {
      "requestedQueryCost": 1,
      "actualQueryCost": 1,
      "throttleStatus": {
        "maximumAvailable": 2000,
        "currentlyAvailable": 1895,
        "restoreRate": 100
      }
    }
  }
}

ownerId に、取得した Shop の id を設定してください。

次に、value にセット販売に必要な情報を設定します。これには、セット販売名、割引方法、割引価格などが含まれます。

以下の json データを文字列にエスケープしたものを設定します。

{
  "sets": [
    {
      "set_id": 1,
      "set_name": "setA",
      "product_ids": ["8362227761382", "8362228089062"],
      "discount_type": "percentage",
      "discount_amount": 10
    },
    {
      "set_id": 2,
      "set_name": "setB",
      "product_ids": ["8362227663078", "8362227794150"],
      "discount_type": "fixed",
      "discount_amount": 1000
    }
  ]
}

json データの product_ids には、セット販売する商品の id の配列を設定します。

ストアの管理画面の左側の「商品管理」をクリックしてください。

セット販売したい商品を選択してください。

以下のページの URL の末尾の数字が商品 id です。

gid://shopify/Product/XXXXXXXXXX の XXXXXXXXXX に該当する商品の id を設定してください。

上記で作成した Variables を、「Shopify GraphQL App」に設定してください。

右側の実行ボタンをクリックして、GraphQL を実行してください。

これで、ストアのメタフィールドにセット販売の情報を設定できます。

商品のメタフィールドにセット販売の情報を設定する

次に、商品のメタフィールドにセット販売の情報を設定します。

以下の画像は、今回実装する GraphQL コードです。Mutation の部分と Variables の部分で順に解説します。

まずは、Mutation の部分です。ストアのメタフィールドを設定したときと同じコードを設定してください。

mutation MetafieldsSet($metafields: [MetafieldsSetInput!]!) {
  metafieldsSet(metafields: $metafields) {
    metafields {
      key
      namespace
      value
      createdAt
      updatedAt
    }
    userErrors {
      field
      message
      code
    }
  }
}

次に、Variables の部分です。

完成系のコードがこちらです。

  {
  "metafields": [
    {
      "key": "set_data",
      "namespace": "set_app",
      "ownerId": "gid://shopify/Product/8362227761382",
      "value": "{\"set_id\": 1, \"set_name\": \"setA\", \"product_ids\": [\"8362227761382\", \"8362228089062\"], \"discount_type\": \"percentage\", \"discount_amount\": 10}",
      "type": "json"
    },
    {
      "key": "set_data",
      "namespace": "set_app",
      "ownerId": "gid://shopify/Product/8362228089062",
      "value": "{\"set_id\": 1, \"set_name\": \"setA\", \"product_ids\": [\"8362227761382\", \"8362228089062\"], \"discount_type\": \"percentage\", \"discount_amount\": 10}",
      "type": "json"
    },
    {
      "key": "set_data",
      "namespace": "set_app",
      "ownerId": "gid://shopify/Product/8362227663078",
      "value": "{\"set_id\": 2, \"set_name\": \"setB\", \"product_ids\": [\"8362227663078\", \"8362227794150\"], \"discount_type\": \"fixed\", \"discount_amount\": 1000}",
      "type": "json"
    },
    {
      "key": "set_data",
      "namespace": "set_app",
      "ownerId": "gid://shopify/Product/8362227794150",
      "value": "{\"set_id\": 2, \"set_name\": \"setB\", \"product_ids\": [\"8362227663078\", \"8362227794150\"], \"discount_type\": \"fixed\", \"discount_amount\": 1000}",
      "type": "json"
    }
  ]
}

各設定項目について詳しくみていきましょう。まず、メタフィールドの key と namespace です。今回は、key にset_data、namespace に set_app を指定しています。

次に、ownerId を設定します。gid://shopify/Product/XXXXXXXXXX の XXXXXXXXXX に該当する商品の id を設定してください。

value には、以下の json データを使用します。これには、セット販売名、割引方法、割引価格などが含まれます。

{
  "set_id": 1,
  "set_name": "setA",
  "product_ids": ["8362227761382", "8362228089062"],
  "discount_type": "percentage",
  "discount_amount": 10
}

product_ids に、セット販売する商品の id を入れてください。

set_id が 1 の商品は、上記の json データを文字列にエスケープしたものを設定します。

{
  "set_id": 2,
  "set_name": "setB",
  "product_ids": ["8362227663078", "8362227794150"],
  "discount_type": "fixed",
  "discount_amount": 1000
}

product_ids に、セット販売する商品の id を入れてください。

set_id が 2 の商品は、上記の json データを文字列にエスケープしたものを設定します。

上記で作成した Variables を、「Shopify GraphQL App」に設定してください。

右側の実行ボタンをクリックして、実行してください。

これで、商品のメタフィールドにセット販売の情報を設定できました。

あとは、商品詳細ページで、商品のメタフィールドにセット販売情報が存在する場合に、セット販売商品を表示する処理を追加してください。詳しい処理はかなり難しくなるので、ここでは割愛します。

ここまででコーディングを用いてセット販売を行う方法は終了です。

アプリを用いてセット販売を行う方法

Shopify アプリの「シンプルセット販売｜お手軽クロスセル」を用いて、セット販売を行います。以下の記事を参考に解説していきます。

Shopify でセット販売（クロスセル）を行う際にお勧めのアプリ 8 選を徹底解説

「シンプルセット販売｜お手軽クロスセル」は、Shopify ストアでセット販売を簡単に実現できるアプリです。

料金：月額 14.99 ドル（7 日間の無料体験）

※開発ストアは無料で使用できます。

それでは、実際に解説していきます。

アプリをインストール

まずは、アプリをインストールしていきます。
以下のリンクにアクセスしてください。

「シンプルセット販売｜お手軽クロスセル」アプリストア

以下の画面に遷移します。「インストール」ボタンをクリックしてください。

以下の画面に遷移します。「インストール」ボタンをクリックして、アプリをインストールしましょう。

以下の管理画面が表示されます。

セット販売の作成

アプリ設定を行います。まずは、セット販売を作成しましょう。

「セット販売を作成」ページに移動して、セット販売を作成しましょう。

まず、「セット販売名を設定」セクションで、セット販売名を設定します。セット販売名を入力してください。

「セット販売商品を選択」セクションでは、セット販売する商品を選択できます。セット販売する商品を選択してください。

「セット販売商品の割引設定」セクションでは、割引の設定ができます。% 割引か定額割引のどちらかを選択して、入力してください。

「ステータス」セクションでは、セット販売のステータスを設定できます。ステータスを「公開中」にするとセット販売が公開され、顧客がセット販売商品を購入できるようになります。

最後に、右下の「保存する」ボタンをクリックして、セット販売設定を保存しましょう。

アプリの有効化

次にアプリを有効化します。

「設定」ページに移動してください。

アプリを追加したいテーマを選択して、「商品ページに追加」ボタンをクリックしてください。

これでテーマにアプリを追加できます。忘れないように右上の「保存する」ボタンをクリックしてください。

該当する商品ページにセット販売を表示されます。

見た目のカスタマイズ

見た目のカスタマイズをします。
セット販売に設定した商品の商品ページに移動してください。

以下の画像は編集できる箇所を表しています。

割引テキストの内容・割引テキストの大きさ・割引テキストの色を編集できます。

商品名の文字サイズ・商品価格の文字サイズが編集できます。

ボーダーの太さ・ボーダーの色を編集できます。

「合計」「割引額」「お支払い金額」の文字サイズを編集できます。

ボタンのラベル・ボタンのラベルの色・ボタンのラベルの色・ボタンの枠線の太さ・ボタンの枠線の色・ボタンの丸みを設定できます。

「シンプルセット販売｜お手軽クロスセル」の詳しい機能については、以下の記事を参考にしてみてください。

【Shopify アプリ】シンプルセット販売｜お手軽クロスセルについて徹底解説｜ご利用ガイド

ここまででアプリを用いてセット販売を行う方法は終了です。

最後に

今回は、Shopify でセット販売を行う 2 つの方法について解説しました。

少しでも、お役に立てれば幸いです。ありがとうございました。

参考記事

• 【Shopify アプリ】シンプルセット販売｜お手軽クロスセルについて徹底解説｜ご利用ガイド

• Shopify でセット販売（クロスセル）を行う際にお勧めのアプリ 8 選を徹底解説

• Shopify ストアでクロスセル戦略