Shopify オンラインストアに掲載せずに購入テストをする方法

Yurie Takaiwa

2025/12/24に公開

ecサイト

Shopify

tech

 はじめにこんにちは。株式会社つみきでFilmarks Store（Shopify）のフロントエンドエンジニアをしている高岩です。

今回は 「Shopifyのオンラインストアに商品を掲載せずに購入テストをする方法」 について紹介します。

本番公開前の在庫連携・決済・配送設定などの確認をしたい方の参考になれば幸いです。

 Filmarks StoreについてFilmarks Store は、映画・ドラマ・アニメのグッズを販売するオンラインストアです。

もともとはSTORESで運用していましたが、2025年6月に Shopifyへ完全移行しました。

 なぜ「非公開で購入テスト」が必要だったのか通常の商品とは違うパターン（セット商品等）で販売する際、商品の掲載・販売開始前に、ストアに商品を公開せずに、以下のような検証が必要でした。
実際のチェックアウト・決済フロー
配送設定（送料・配送方法）の反映の確認
在庫システムとの連携が正しく動作するか
在庫システム上での納品書・明細書がどのような表示になるか

上記を確認するため「オンラインストアに掲載せずに購入する方法」 を調査しました。
今回はその方法を 2パターン 紹介します。

 方法①：購入ボタン（Buy Button）チャネルを使う最も手軽なのが 購入ボタン（Buy Button）チャネル を使う方法です。

 購入ボタンチャネルとは？Shopifyの販売チャネルの一つで、

通常のオンラインストアに商品を表示せずに、任意のHTMLページ上に 購入ボタンを設置できる機能で、ボタンから直接チェックアウト画面へ遷移が可能です。
!販売チャネルとは、オンラインストア・Instagram・Facebook・Googleショッピング・実店舗（POS）など、商品を販売できる経路のことです。

 ① 購入ボタンアプリをインストールまず、以下のアプリをインストールします。

👉 購入ボタン（Buy Button）チャネル

 ② 対象商品の販売チャネルを購入ボタンのみに設定する対象商品の管理画面で、「公開」するチャネルを「購入ボタン」のみにします。

他のチャネル（オンラインストアや各SNSのチャネル等）を含めてしまわないよう注意してください。

チャネルを設定後「ステータス」を「有効」にしてください。

 ③ HTMLを生成してウィジェットから購入する方法インストールした購入ボタンチャネルのアプリページに遷移します。


「購入ボタンを作成する」を押し、単一商品であれば「商品購入ボタン」を選択


リストから商品を選択


見た目をカスタマイズ


HTMLコードをコピー


以下のいずれかに貼り付け
開発用のブログ記事ページ（Shopifyの開発ストアにはデフォルトで入っているブログページがあります）
非公開ページ
ローカルのHTMLファイル など

HTMLコードを貼ると、購入ボタン付きウィジェットが表示され、通常と同じようにチェックアウト画面に進めます。

 ④ チェックアウトURLを直接生成して購入する方法もう1つ購入ボタンチャネルの機能として、 管理画面から直接チェックアウトURLを発行する方法 があります。
管理画面で購入テストしたい商品管理ページを開く
「その他の操作」→「Create checkout link」を選択


表示されたURLをコピーしてアクセス
これで 即チェックアウト画面に遷移して購入可能です。

 方法②：GraphQL Storefront API を使う購入ボタンチャネルが使えないケースもあります。

どのようなケースかというと、Shopify Bundlesなどのアプリを使って登録したセット販売の商品には、購入ボタンチャネルが現状対応していません。
その場合は Storefront API を使ってカートを直接生成する方法 を使用します。

 使用するAPI
Shopify GraphQL Storefront APIのcartCreate mutation

 ① GraphQL Appをインストール以下の公式ツールを使うと、アプリから簡単にGraphQL APIが実行できます。
👉 Shopify GraphQL App

↓このように直感的にAPIの実行ができます。


 ② 対象商品の販売チャネルをShopify GraphiQL Appのみに設定する対象商品の管理画面で、「公開」するチャネルを「Shopify GraphiQL App」のみにします。

他のチャネル（オンラインストアや各SNSのチャネル等）を含めてしまわないよう注意してください。

チャネルを設定後「ステータス」を「有効」にしてください。

 ③ 商品ID（Product ID）を取得管理画面の商品ページURLは以下の形になっています。

https://admin.shopify.com/store/{your-store-name}/products/XXXXXXXXXXXXX

この XXXXXXXXXXXXX が Product ID です。

 ④ 商品バリアントIDを取得するStorefront API の product クエリで、②で確認したProduct IDからバリアントIDを取得します。

IDはgid://shopify/Product/XXXXXXXXXXXXXの形にします。
GraphQLクエリの例：
{
  product(id: "gid://shopify/Product/XXXXXXXXXXXXX") {
    id
    variants(first: 10) {
      nodes {
        id
        title
      }
    }
  }
}
実行結果の例：
{
  "data": {
    "product": {
      "id": "gid://shopify/Product/XXXXXXXXXXXXX",
      "variants": {
        "nodes": [
          {
            "id": "gid://shopify/ProductVariant/YYYYYYYYYYYYY",
            "title": "ホワイト"
          },
          {
            "id": "gid://shopify/ProductVariant/ZZZZZZZZZZZZZ",
            "title": "ブラック"
          }
        ]
      }
    }
  }
}
ここで取得した ProductVariant のIDを使います。

 ⑤ cartCreate でチェックアウトURLを生成以下は YYYYYYYYYYYYY のバリアントを 1点だけ購入するカートを作成する例 です。
GraphQLクエリの例：
mutation {
  cartCreate(
    input: {
      lines: [
        {
          merchandiseId: "gid://shopify/ProductVariant/YYYYYYYYYYYYY",
          quantity: 1
        }
      ]
    }
  ) {
    cart {
      id
      checkoutUrl
    }
    userErrors {
      field
      message
    }
  }
}
実行結果の例：
{
  "data": {
    "cartCreate": {
      "cart": {
        "id": "gid://shopify/Cart/aaaaaaaaaaaaaaaa?key=bbbbbbbbbbbbbbb",
        "checkoutUrl": "https://{your-store-name}.myshopify.com/cart/c/aaaaaaaaaaaaaaaa?key=bbbbbbbbbbbbbbb"
      },
      "userErrors": []
    }
  }
}
この checkoutUrl にアクセスすれば、商品が入った状態のチェックアウト画面から購入できます。

 おわりにオンラインストアに掲載せずに購入テストをする方法を２つ紹介させていただきました。
購入ボタンのウィジェットやチェックアウトリンクは、購入テストだけでなく、オンラインストア以外の自社Webサイトやブログ等、他プラットフォームへの掲載にも使用できるので販売経路を増やしたい時にも活用できて便利です。

用途に合わせて使ってみてください。
つみきではこのような活動を行いながら日々Filmarksの成長を支えるエンジニアを募集しています！
Filmarksの基盤を支える！AWS×インフラエンジニア募集！
Ruby on Rails｜Filmarksのバックエンドエンジニア募集！
国内最大級！Filmarksのアプリを支えるAndroidエンジニア募集！