Shopify ストアで商品の売り切れ非表示を実現する方法を徹底解説！

はじめに
売り切れ非表示とは？
売り切れ非表示のメリット
メタフィールドを用いたコーディングで売り切れ非表示を行う方法
- 「Shopify GraphQL App」のインストール
- ストアのメタフィールドに売り切れ非表示機能の情報を設定
アプリを用いて売り切れ非表示を行う方法
終わりに

はじめに

今回は、Shopify ストアで商品の売り切れ非表示を実現する方法について解説していきます。

今回の記事では、以下の読者を対象にしています。

売り切れ非表示の概要を知りたい
コーティングで売り切れ非表示を行う方法を知りたい
アプリで売り切れ非表示を行う方法を知りたい

売り切れ非表示とは？

売り切れ非表示機能とは、ストア内の売り切れ商品を自動的に非表示にすることです。これは、商品の在庫状況を監視し、在庫がない（売り切れ）状態であれば自動的に下書き状態に設定する機能を指します。また、顧客が商品を購入して在庫がなくなった場合にも、該当商品を自動的に下書き状態にすることができます。

売り切れ非表示のメリット

ストアの利便性向上

顧客が利用可能な商品のみを閲覧できるようになるため、サイト内でのナビゲーションがスムーズになります。売り切れ商品に対して時間を費やすことなく、購入可能な商品にすぐアクセスできるため、ストアの利便性が向上します。

在庫管理の効率化

売り切れ商品を自動で非表示にすることで、在庫管理が効率化されます。在庫の補充や更新が必要な商品を迅速に特定でき、在庫状況に応じた適切なアクションを取りやすくなります。

メタフィールドを用いたコーディングで売り切れ非表示を行う方法

まずは、メタフィールドを用いたコーディングで商品の売り切れ非表示を行う方法を解説します。

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

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

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

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

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

ストアのメタフィールドに売り切れ非表示機能の情報を設定

ストアのメタフィールドに売り切れ非表示機能の情報を設定します。

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

Mutation

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

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

引数

今回は、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": "hidden_setting",
      "namespace": "sold_out_hidden_app",
      "ownerId": "gid://shopify/Shop/67358163174",
      "value": "{ \"status\": \"enabled\" }",
      "type": "json"
    }
  ]
}

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