1. ホーム
  2. 私たちについて
  3. Shopify app
  4. Shopifyブログ
  5. サービス
  6. お問い合わせ
About
Blog
Services
Contact
サムネイル

Shopify Product Discount API とは？実装方法まで徹底解説！

今回の記事では Shopify Functions の概要から具体的な Product Discount API の実装方法まで丁寧に解説していきます。

今回の記事でわかること

  • Shopify Functions の概要
  • Product Discount API の概要
  • Product Discount API の実装方法

今回の記事を読んで、柔軟なディスカウントを可能にする Product Discount API についてマスターしていきましょう！

目次

Product Discount API とは

Product Discount API とは、Shopify Functions の機能の中の一つです。

Shopify Functions とは Shopify のバックエンド処理にカスタマイズした処理を挿入することができる機能です。Shopify Functions を用いれば配送や決済のカスタマイズ、ディスカウントのカスタマイズを行うことができます。

また、Shopify Functions はアプリの拡張機能としてストアに導入されるかたちになるので、Shopify Functions を組み込んでいるアプリをストアから探してインストールするか、カスタムアプリを独自で作成してストアにインストールする必要があります。

Shopify Functions の API の種類

Shopify Functions は、Product Discount API 以外にもさまざまな API が用意されており、各 API でカスタマイズできる処理が異なります。現在公開されている API の種類と概要の一覧を表にまとめてみました。

Function APIDescription
Delivery Customization API顧客に表示される配送オプションの名前変更、順序変更、並び替えが可能
Order Discount APIカート内の全ての商品に適用される割引を作成可能
Product Discount APIカート内の特定の商品または商品バリアントに適用される割引を作成可能
Shipping Discount API配送料に対して送料無料や割引などのロジックを作成可能
Payment Customization API決済方法の名前変更、順序変更、並び替えが可能
Cart TransForm APIカート内の商品を拡張し、カート内の商品の表示を更新可能
Cart and checkout validation APIカートとチェックアウトの独自のバリデーションを作成可能
Fulfillment ConstraintsShopify での注文処理のためのロジックを独自でカスタマイズ可能

Product Discount API アプリの作り方

ここからは実際に Product Discount API を使用したアプリの作成方法を解説していきます。

今回は注文数が 5 個を超える商品を 20%引きにするというディスカウントを作成していきます。

事前準備

アプリ開発を行う前の事前準備をしていきます。

開発ストアの作成

今回作成するアプリをインストールするストアを作成します。
開発ストアの作成画面

アプリ作成に必要なツールをインストール

Shopify Functions が組み込まれているアプリを開発するために以下のものが必要になるのでローカル PC にインストールしてください。

  • Node.js
  • Node.js のパッケージマネージャ（npm, yarn)
  • ShopifyCLI

以上で事前準備は終了です。

アプリ作成

ここからは実際に Product Discount API が搭載されたアプリを作成していきます。

アプリの本体を作成

Product Discount API はアプリの拡張機能になるので、まずはアプリ本体を作成していきます。

  1. ターミナルを立ち上げて、アプリを作成したいディレクトリで以下のコマンドを実行します。
npm init @shopify/app@latest
  1. コマンド実行後、プロジェクト名や使用する言語などを聞かれるのでそれぞれ以下のように答えてください。
Your project name?（アプリのディレクトリ名）
 -> product-discount-api-app

Get Started building your app?（Remix を使用するかどうか）
 -> Start with Remix

For your Remix template, which language do you want?（使用する言語）
 -> Typescript
  1. アプリのディレクトリに移動します。
 cd product-discount-api-app/
  1. アプリに必要なライブラリをインストールします。
npm install
  1. 以下のコマンドを実行して、アプリのローカルサーバーを起動します。
npm run dev

コマンド実行後、いくつか質問されるので以下のように答えてください。

Create this project as a new app on Shopify
（パートナーダッシュボードに新規でアプリを作成するかどうか）
  -> Yes, create it as a new app

App name（アプリ名）
  -> product-discount-api-app

Which store would you like to use to view your project?
（どのストアでアプリの動作を確認したいか）
  -> product-discount-api-test（事前準備で作成した開発ストアを入力してください）

Have Shopify automatically update your app's URL in order to create a preview experience?
（アプリをプレビューするための URL を Shopify が自動で生成してくれる）
  -> Yes, automatically update

ここまででアプリ本体の作成は完了です。

アプリに Product Discount API の機能を追加

ここからは、作成したアプリの本体に Product Discount API の拡張機能を追加していきます。

  1. アプリのディレクトリに移動します。
 cd product-discount-api-app/
  1. 以下の拡張機能を作成するコマンドを実行して、アプリに拡張機能を追加します。
npx shopify app generate extension

コマンド実行後の質問には以下のように答えてください。

Type of extension?（作成する拡張機能の種類）
  -> Discount products - Function

Name your extension?（作成される拡張機能の名前）
  -> 何も入力しない

What would you like to work in?（使用する言語）
  -> TypeScript
  1. インストールした拡張機能のディレクトリに移動します。
cd extensions/product-discount/
  1. run.graphql を以下のコードに書き換えます。
query RunInput {
  cart {
    lines {
      quantity
      merchandise {
        __typename
        ... on ProductVariant {
          id
        }
      }
    }
  }
}

run.graphql にはディスカウントで必要な情報を取得してくる GraphQL クエリを作成しています。 どのような情報が取得できるかはこちらのドキュメントで詳しく確認できます。

今回のバリデーションの実行に必要な情報と run.graphql の内容の対応関係は以下のようになっています。

ディスカウントに必要な情報run.graphql
商品の注文数quantity
商品の idmerchandise.id
  1. run.graphql を元に型 RunInput を生成します。
    以下のコマンドを実行して型を生成します。この型は、次に編集するrun.ts ファイルで使用されます。run.ts は実際にバリデーション処理を書いていくファイルです。
npm run typegen
  1. run.ts を以下のコードに書き換えます。
import type { RunInput, FunctionRunResult, Discount, Target } from '../generated/api';
import { DiscountApplicationStrategy } from '../generated/api';

export function run(input: RunInput): FunctionRunResult {
  // ディスカウントの対象となる商品の id の配列
  const discountTargets: Target[] = input.cart.lines
    // 注文数が５個を超える商品を絞り込む
    .filter(({ quantity, merchandise }) => quantity > 5)
    // 注文数が５個を超える商品の id を抽出
    .map(({ merchandise }) => ({
      productVariant: {
        id: merchandise.__typename === 'ProductVariant' ? merchandise.id : '',
      },
    }));

  const discounts: Discount[] = [
    {
      value: {
        percentage: {
          value: '20',
        },
      },
      targets: discountTargets,
      message: '20% OFF',
    },
  ];

  return {
    discountApplicationStrategy: DiscountApplicationStrategy.First,
    discounts,
  };
}
  1. アクセススコープの更新
    shopify.app.toml の scopes を以下のように更新してください。
scopes = "write_products,write_discounts"
  1. アプリのディレクトリに移動してアプリをデプロイします。
cd ../.. && npm run deploy

コマンド実行後の質問には以下のように答えてください。

Include `shopify.app.toml` configuration on `deploy`?
  -> Yes, always

Release a new version of cart-chekout-validation-demo?
  -> Yes, release this new version

ここまででアプリに Shopify Functions の中の Product Discount API を搭載することができました。

作成したアプリを開発ストアにインストール

次に、作成したアプリを開発ストアにインストールします。
パートナーダッシュボードの「アプリ管理」から今回作成したアプリを選択します。
パートナーダッシュボードのアプリ管理

アプリ詳細画面に遷移したら「ストアを選択する」をクリックしてください。
アプリ詳細画面

アプリの機能を試すストアを選択します。最初に作成した開発ストアを選択してください。
開発ストアを選択する

「インストール」をクリックしてアプリをストアにインストールします。
アプリをインストールする

ここまでで、Product Discount API を搭載したアプリを開発ストアにインストールすることができました。

ストアで Product Discount API を有効化

次に、開発ストアで Product Discount API を有効化します。

Product Discount API を有効化させるためには、GraphQL Admin API を叩く必要があります。今回は Shopify が提供している「Shopify GraphiQL App」というアプリを使用して Admin GraphQL を叩いていきます。「Shopify GraphiQL App」についてはこちらの記事で詳しく解説しているのでよければ読んでみてください。

こちらから「Shopify GraphiQL App」をインストールできます。

▼ 「Shopify GraphiQL App」インストール画面
Shopify GraphiQL Appのインストール画面

「Shop URL」の項目にはアプリをインストールストアのドメインを入力します。最初に作成した開発ストアのドメインを入力してください。
Shop URLを入力する

「Admin API」の項目では、「Shopify GraphiQL App」に許可するアクセススコープを選択します。「Select all」をクリックしてください。
アクセススコープを選択する

「Install」をクリックしてアプリをストアにインストールしていきます。
インストールする

「インストール」をクリックしてください。
アプリをインストールする

ここからは、Admin GraphQL を叩いて Product Discount API を有効化していきます。

下記のクエリを使用して Product Discount API を有効化します。YOUR_FUNCTION_ID_HERE の部分は、アプリを作成してきたディレクトリの .env ファイルに SHOPIFY_PRODUCT_DISCOUNT_ID=xxxxxxxxxxxxxxxxxx という行があると思うので、そこの xxxxxxxxxxxxxxxxxx に該当する部分に書き換えてください。

mutation {
  discountAutomaticAppCreate(
    automaticAppDiscount: {
      title: "Volume discount"
      # .env ファイルの「SHOPIFY_PRODUCT_DISCOUNT_ID」を設定する
      functionId: "YOUR_FUNCTION_ID_HERE"
      startsAt: "2022-06-22T00:00:00"
    }
  ) {
    automaticAppDiscount {
      discountId
    }
    userErrors {
      field
      message
    }
  }
}

以上で、Product Discount API を有効化することができました。

有効化できているか確認してみましょう。

ストア管理画面左側のサイドバーから「ディスカウント」をクリックしてください。
管理画面のディスカウント

「Volume discount」が作成されていれば有効化されています。
作成された Volume discount

以上で、Product Discount API の有効化は完了です。

Product Discount API の動作確認

Product Discount API の動作確認を行なっていきます。

注文数が５個を超える商品が、20% OFF になっていて正常に動作していますね。
実際に割引が適用された決済画面

Product Discount API を使って実装されたおすすめアプリ

実際に Product Discount API を使って実装されているアプリを紹介します。

シンプル VIP 会員商品割引｜お手軽 VIP 商品セール設定

「シンプル VIP 会員商品割引｜お手軽 VIP 商品セール設定」は、顧客の注文回数・注文金額の合計に応じて設定した商品を割引したり、無料にしたりできるアプリです。条件を満たす顧客に対して任意の割引率・定額割引により割引を適用できます。こちらからアプリをインストールできます。

詳しい使い方については以下のご利用ガイドをご覧ください。
Shopify で VIP 顧客の商品割引が実現できるアプリについて徹底解説｜ご利用ガイド

シンプルVIP会員商品割引｜お手軽VIP商品セール設定

まとめ

今回は Shopify Functions の概要から Product Discount API を使用して、Shopify Functions の具体的な実装方法まで解説しました。

今回はカートに入っている商品の個数でディスカウントを行うとても簡単なロジックでしたが、商品のメタフィールドを利用したディスカウント、顧客の情報に基づくディスカウントなどより複雑なディスカウントが実装できます。

Shopify Functions には、今回実装した Product Discount API 以外にもたくさん種類があり、ディスカウント、配送、決済方法のカスタマイズを行うことができるので、マスターすれば開発の幅が飛躍的に広がります。ぜひ勉強してみてください！

最後まで読んでいただきありがとうございました！

そのほかの API に関しての記事もありますので、ぜひご覧ください。

ブログTOPお問い合わせ

おすすめ Shopify アプリ

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

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

インストール

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

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

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

詳しい使い方インストール

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

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

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

詳しい使い方インストール

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

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

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

詳しい使い方インストール

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

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

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

詳しい使い方インストール

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

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

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

詳しい使い方インストール

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

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

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

詳しい使い方インストール

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

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

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

詳しい使い方インストール

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

全177個の日本製 Shopify アプリを見る

関連記事

画像

【2026年】Shopify APIで商品取得する方法とおすすめアプリ7選！

Shopify APIで商品取得する方法を初心者にもわかりやすく解説。RESTとGraphQL APIの使い方から、商品データをノーコードで取得・管理できるおすすめアプリ7選まで徹底紹介します。

画像

Shopifyで割引率を表示できるアプリ10選を紹介！

Shopify 割引率 表示を実現したい方向けに、商品ページで割引率・割引額をわかりやすく見せるアプリ10選を厳選。メリット/デメリット、導入方法、選び方、比較までまとめて解説します。

画像

【2026年】Shopifyの商品ページで割引率を表示する方法を徹底解説！

Shopifyの割引率表示（%OFF）を商品ページで実現する方法を2026年版で解説。アプリ導入手順とコード例、メリット・注意点まで網羅。

画像

Shopify Ajax API を用いてコレクションページで商品をカートに入れる方法を徹底解説

Shopify Ajax API を用いるとコレクションページで所品をカートに追加することができます。Shopify Ajax API について理解し、幅広い Shopify ストア開発ができるようになりましょう！

画像

Shopify Order Discount API とは？実装方法まで徹底解説！

今回の記事では、Shopify Order Discount API の説明から実際の実装方法まで解説しています。チェックアウトページを柔軟にカスタマイズできる Order Discount API の実装方法をしっかり学んでいきましょう！

画像

Shopify Shipping Discount API とは？実装方法まで徹底解説！

今回の記事では、Shopify Shipping Discount API の説明から実際の実装方法まで解説しています。配送料のディスカウントを柔軟にカスタマイズできる Shipping Discount API の実装方法をしっかり学んでいきましょう！

Menu
Social