サムネイル

Shopify ストアで購入制限を実現する方法を徹底解説!

目次

はじめに

今回は、Shopify ストアで商品の数量規制による購入制限を実現する方法を解説していきます。
1 つ目は、メタフィールドを用いたコーディングで数量規制による購入制限を実現する方法です。

2 つ目は、アプリを用いて数量規制による購入制限を実現する方法です。

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

購入制限とは?

購入制限とは、特定の商品やサービスの購入可能数や購入条件を制限することです。具体的には、購入する商品の数量・期間・購入金額を条件に購入制限を行います。特定の顧客群にのみ商品やサービスを提供することで、その商品の独占性や希少性を高める目的でも利用されることがあります。

購入制限のメリット

購入制限は多くのストアにとっては、非常に魅力的な販売戦略です。そのメリットは、以下のようなものがあります。

  • 在庫管理の効率化

購入制限を行うことにより、予期せぬ大量購入を防ぎ、結果として在庫切れを避けることができます。オンラインストアで在庫切れの商品が増えると、顧客が選べる選択肢が限られ、その結果、ストアからの離脱を引き起こす可能性があります。

  • 転売の防止

購入制限を行うことのメリットの一つは、転売の防止です。人気商品や限定アイテムの場合、購入制限を行うことで、これらの商品が市場価格よりも高値で不正に転売されることを効果的に抑制することができます。

  • ショッピング体験の向上

商品への購入制限を行うことは、その商品の独占性を高め、限定感を巧みに演出する効果的な手段です。これにより、商品自体が持つ本来の価値をより一層引き立てることが可能となり、顧客のショッピング体験の向上が期待できます。

メタフィールドを用いたコーティングで商品の数量規制による購入制限を行う方法

まずは、メタフィールドを用いたコーティングで商品の数量規制による購入制限を行う方法について解説します。

「Shopify GraphQL App」のインストール

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

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

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

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

ストアのメタフィールドに購入制限機能の情報を設定

ストアのメタフィールドに購入制限機能の情報を設定します。

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

Shopify GraphiQL App の実行画面

Mutation

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

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

Shopify GraphiQL App の実行画面

引数

今回は、metafieldsSet API を用います。これは、メタフィールドの値を作成・更新するための API です。こちらの API には引数として、以下のものを渡します。

  • key
  • namespace
  • ownerId
  • type
  • value

順に説明します。

  • key
    メタフィールドを識別する一意の値です。

  • namespace
    メタフィールドのグループのコンテナです。メタフィールドが集まった箱のようなものです。

  • ownerId
    メタフィールドが関連付けられているリソースの固有の識別子です。

  • type
    メタフィールドに格納されるデータの種類を指定します。

  • value
    メタフィールドに格納されるデータです。文字列として格納します。

具体的に渡す値は、Variables に設定します。

戻り値

metafields ブロックには、登録されたメタフィールドの情報が入ります。

戻り値として、以下のものが返ってきます。

  • key
  • namespace
  • value
  • createdAt
  • updateAt

key・namespace・value に関しては、先程と同様です。

  • createdAt
    メタフィールドが作成された日時です。

  • updateAt
    メタフィールドが更新された日時です。

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

戻り値として、以下のものが返ってきます。

  • field
  • message
  • code

順に説明します。

  • field
    エラーが発生した入力フィールドの場所を示しています。

  • message
    エラーメッセージです。

  • code
    エラーコードです。

Variables

次に、metafieldSet に渡す引数、Variables の部分について解説します。

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

{
  "metafields": [
    {
      "key": "order_limit_config",
      "namespace": "order_limit_app",
      "ownerId": "gid://shopify/Shop/67358163174",
      "value": "{\"status\": \"enabled\"}",
      "type": "json"
    }
  ]
}

各設定項目について詳しく見ていきましょう。まず、メタフィールドの key と namespace です。今回は、key に order_limit_config 、namespace に、order_limit_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 データを文字列にエスケープしたものを設定します。これには、購入制限機能が有効かどうかの値が含まれます。

{
  "status": "enabled"
}

上記で作成した Variables を、画像の赤枠の部分に貼り付けてください。

Shopify GraphiQL App の実行画面

GraphQL を実行

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

Shopify GraphiQL App の実行画面

これで、ストアのメタフィールドに購入制限機能の情報を設定できました。

商品のメタフィールドに購入制限数を設定

次に、商品のメタフィールドに購入制限数を設定します。

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

Shopify GraphiQL App の実行画面

Mutation

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

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

Variables

次に、Variables の部分です。

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

{
  "metafields": [
    {
      "key": "order_limit_number",
      "namespace": "order_limit_app",
      "ownerId": "gid://shopify/Product/8362227761382",
      "value": "{\"min\": 1, \"max\": 4}",
      "type": "json"
    }
  ]
}

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

次に、ownerId を設定します。まず、商品の id を取得します。

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

商品管理画面を開く

購入制限をする商品を選択してください。

商品管理画面で購入制限をする商品を選択する

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

URLから商品idを取得する

gid://shopify/Product/XXXXXXXXXX の XXXXXXXXX に取得した商品の id を設定してください。

次に、value に購入制限数を設定します。

今回は、以下の json データを文字列にエスケープしたものを設定します。これには、購入制限数の下限と上限が含まれます。

{
  "min": 1,
  "max": 4
}

上記で作成した Variables を、画像の赤枠の部分に貼り付けてください。

Shopify GraphiQL App の実行画面

GraphQL を実行

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

Shopify GraphiQL App の実行画面

以上で商品のメタフィールドに購入制限数を設定できました。

あとは、カートページで、ストアのメタフィールドから購入制限機能の情報を取得して、購入制限機能が有効かどうかを検証する処理を追加します。また、購入制限機能が有効の場合、商品に購入制限数を適用する処理を追加してください。詳しい処理はかなり難しくなるので、ここでは割愛します。

アプリを用いて商品の数量規制による購入制限を行う方法

Shopify アプリの「シンプル購入制限|お手軽注文制限」を用いて、数量規制による購入制限を導入します。以下の記事を参考に解説していきます。

【Shopify アプリ】シンプル購入制限|お手軽注文制限について徹底解説|ご利用ガイド

シンプル購入制限|お手軽注文制限

「シンプル購入制限|お手軽注文制限」は、数量規制による購入制限を簡単に実現できるアプリです。また、Cart and Checkout Validation API に対応しているため、従来のアプリと比べて、より堅牢な購入制限を実現できます。

料金:月額 6.99 ドル

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

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

アプリをインストール

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

「シンプル購入制限|お手軽注文制限」アプリストア

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

アプリのインストール画面

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

アプリをインストールする

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

アプリの管理画面

以上でアプリのインストールは終了です。

購入制限設定

管理画面にて、購入制限設定を行います。

右上の「購入制限商品を追加」ボタンをクリックして、「購入制限設定」ページに遷移してください。

購入制限設定ページに移動する

まず、「購入制限を設定する商品を選択」セクションで、購入制限する商品を設定します。

購入制限商品を追加ボタンをクリックする

購入制限する商品を選択して、「追加」ボタンをクリックしてください。

購入制限商品の追加ポップアップ

次に、「個数制限設定」セクションで、個数制限を設定します。

購入制限を設定する商品を選択する

個数制限(下限)・個数制限(上限)を入力してください。どちらか一方のみを入力しても構いません。

購入制限の設定

最後に、「保存する」ボタンをクリックして、設定を保存してください。

設定を保存する

以上で購入制限設定は終了です。

購入制限機能を有効化

購入制限機能を有効化します。左側のメニューの「設定」をクリックして、「設定」ページに移動してください。

アプリの設定画面

「設定」ページの「購入制限機能有効化」セクションで、購入制限機能の有効化を行います。
「有効」を選択して、「保存する」ボタンをクリックしてください。

アプリを有効化する

以上で購入制限機能を有効化は完了です。

購入制限商品一覧の確認

購入制限商品一覧の確認をします。左側のメニューの「購入制限管理」をクリックして、「購入制限管理」ページに移動してください。「購入制限管理」ページでは、購入制限商品を一覧で確認できます。

アプリの購入制限商品管理画面

以上で購入制限商品一覧の確認は完了です。

エラーメッセージの表示

設定した購入制限を満たしていない場合には、以下のページでエラーメッセージが表示されます。「Cart and Checkout Validation API」を導入しており、商品ページに加え、カートページ・チェックアウトページでエラーメッセージを表示できます。

  • 商品ページ
  • カートページ
  • チェックアウトページ

商品ページ

商品ページでは、以下のようにエラーメッセージが表示されます。

商品ページのエラーメッセージ表示例

カートページ

カートページでは、以下のようにエラーメッセージが表示されます。

カートページのエラーメッセージ表示例

チェックアウトページ

チェックアウトページでは、以下のようにエラーメッセージが表示されます。

チェックアウトページのエラーメッセージ表示例

おひとり様一点限りの設定を行う方法

おひとり様一点限りの設定を行う場合は、シンプルおひとり様一点限りの購入制限設定を使用することになるかと思います。

シンプルおひとり様一点限りの購入制限設定

おひとり様一点限りの設定を行う専用アプリで、非常に安価でシンプルなアプリです。

以下が、Shopify 公式のアプリストアです。

シンプルおひとり様一点限りの購入制限設定

以下の記事に、詳細な使い方がまとめてあります。

Shopifyで商品毎におひとり様一点限りの購入制限設定ができるアプリについて徹底解説|ご利用ガイド

終わりに

今回は、Shopify ストアで購入制限を実現する 2 つの方法を解説しました。
少しでも、お役に立てれば幸いです。ありがとうございました。

参考記事

おすすめ Shopify アプリ

シンプル関連商品レコメンド|よく一緒に購入されている商品のアイコン

シンプル関連商品レコメンド|よく一緒に購入されている商品

インストール

関連商品を一覧からまとめて設定。買い手はセットをワンクリックでカートに入れられます。

シンプル税込税抜併記|消費税込み・税別表示・軽減税率にも対応のアイコン

シンプル税込税抜併記|消費税込み・税別表示・軽減税率にも対応

商品価格に、税込と税抜のもう一方を並べて表示できます。軽減税率が混ざるお店でも、商品ごとに正しく計算します。

シンプル原産国表示|お手軽製造国・原産地ラベルのアイコン

シンプル原産国表示|お手軽製造国・原産地ラベル

商品ごとの原産国を、国旗つきのバッジで商品ページに表示できます。国はリストから選ぶだけなので表記ゆれもありません。

シンプル商品単価表示|お手軽単位価格表示のアイコン

シンプル商品単価表示|お手軽単位価格表示

「100gあたりいくら?」を、販売する国ごとに見慣れた単位で表示できます。商品ページ・商品カード・カートで、お客様が価格を比べやすくなります。

シンプル追従電話ボタン|お手軽お問い合わせ・電話サポートのアイコン

シンプル追従電話ボタン|お手軽お問い合わせ・電話サポート

電話・LINE・WhatsAppのボタンをストアの全ページに置けます。「買う前にちょっと聞きたい」お客様をそのまま逃しません。

シンプルメガメニュー|お手軽ヘッダー階層ナビゲーションのアイコン

シンプルメガメニュー|お手軽ヘッダー階層ナビゲーション

画像つきの複数カラムのドロップダウンナビゲーションを、コードに触れずに作成・編集できます。

シンプル商品画像透かし|お手軽ウォーターマークのアイコン

シンプル商品画像透かし|お手軽ウォーターマーク

商品画像にロゴやテキストの透かしを焼き込み、どこに転載されても出どころが分かるようにします。

シンプルマイページバナー|お手軽顧客アカウント画像のアイコン

シンプルマイページバナー|お手軽顧客アカウント画像

顧客アカウントページにバナーを表示。画像をアップロードして URL を貼るだけで表示されます。

関連記事