💡

Shopify で配送方法を非表示にする方法を考察

2024/08/12に公開

はじめに

今回は、Shopify で配送方法を非表示にする方法について考察してみました。

メタフィールドを使用する方法や、Shopify の Function API を用いる方法について考察してみました。

Shopifyを使用してオンラインストアを運営する際、特定の条件下で特定の配送方法を非表示にしたい場合があります。

これは、顧客の地域、注文金額、または他のカスタムルールに基づいて、適切な配送オプションを提供するために重要です。以下に、Shopifyで配送方法を非表示にする方法とその定義について、技術的な観点から解説します。

それでは、頑張っていきましょう。

配送方法の非表示の定義

配送方法の非表示とは、チェックアウト時に顧客が利用可能な配送オプションの中から特定の配送方法を除外するプロセスを指します。これにより、特定の条件(例えば、注文金額や顧客の居住地域)に基づいて、不要な配送オプションを表示しないように制御することができます。

配送方法の非表示は、以下の目的で使用されます:

  • 特定の地域や国に対する配送制限

    • 例えば、特定の国に配送しない配送業者を非表示にする。
  • 注文金額に基づく配送オプションの調整

    • 例えば、一定金額以上の注文に対しては、無料配送のみを表示し、他の配送方法を非表示にする。
  • 顧客タグやプロモーションに基づくカスタマイズ

    • 特定の顧客グループやプロモーション期間中にのみ特定の配送方法を有効にする。

配送方法を非表示にするメリット

せっかくなので、配送方法を非表示にするメリットについて考察しました。

メリットが無いと、Shopify で配送方法を非表示にする意味があんまり無いですからね。

Shopifyのオンラインストアにおいて、特定の配送方法を非表示にすることは、ユーザー体験やビジネス効率を大幅に向上させる多くのメリットがあります。

1. ユーザーエクスペリエンスの向上

配送方法を非表示にすることで、顧客が選択する際の混乱を防ぎ、最適な配送オプションを簡単に選べるようになります。特に、特定の地域で利用できない配送方法を事前に非表示にすることで、エラーメッセージや購入プロセスでのトラブルを未然に防ぐことができます。

2. チェックアウトプロセスの効率化

不要な配送オプションを非表示にすることで、顧客はより迅速に決済プロセスを進めることができます。選択肢が絞られることで、迷うことなく適切なオプションを選ぶことができ、離脱率の低減にも繋がります。

3. コスト削減

特定の条件で配送方法を非表示にすることで、不必要な配送コストを削減できます。例えば、低価格な配送方法を非表示にすることで、顧客がより高額な配送オプションを選ぶ傾向が強まり、利益率の向上が期待できます。

4. 業務エラーの防止

特定の地域や配送条件で利用できない配送方法を非表示にすることで、配送ミスを防止できます。誤った配送方法の選択による返品や再配送の手間を削減し、オペレーション効率を向上させることが可能です。

5. プロモーション効果の最大化

特定のプロモーション期間中にのみ表示される配送オプションを設定することで、キャンペーンのインパクトを高めることができます。例えば、期間限定の無料配送オプションを提供し、それ以外のオプションを非表示にすることで、顧客の購買意欲を引き出すことができます。

それでは次に、配送方法の非表示の実装方法について考察していきます。

配送方法の非表示方法について考察

それでは、配送方法の非表示方法について考察していきましょう。

まずは、Shopify の公式ドキュメントを確認していきます。

以下のドキュメントから、Shopify の Function API 一覧を確認しましょう。

https://shopify.dev/docs/api/functions

下記が、利用できる Shopify の Function API の一覧です。

Delivery Customization APIを利用すれば、実現できそうですね。

以下が、Shopify 公式ドキュメントの Description です。

Rename, reorder, and sort the delivery options available to buyers during checkout.

こちらにあるように、名前を変更したり、順番を入れ替えたりすることができます。

それでは次に、Shopify のDelivery Customization APIについて確認していきましょう。

Delivery Customization API について

ここからは、Shopify のDelivery Customiztion APIについて解説していきます。

以下のドキュメントを確認していきましょう。
https://shopify.dev/docs/api/functions/reference/delivery-customization

まずは、ドキュメントの内容をざっくり理解しましょう。

以下にまとめていきます。

Shopify Delivery Customization APIの概要

ShopifyのDelivery Customization APIは、チェックアウト時に表示される配送オプションをカスタマイズするための強力なツールです。このAPIを利用することで、配送オプションの名前変更、並べ替え、ソートを行うことが可能になります。以下に、このAPIの利用方法やユースケースについて詳しく解説します。

主なユースケース

Delivery Customization APIを使用すると、以下のようなカスタマイズが可能です:

  • 特定の商品や顧客に対する配送オプションの非表示

    • 例えば、特定の重量を超える商品に対して、特定の配送方法を非表示にすることができます。
  • 配送オプションの並べ替え

    • ユーザーの好みに応じて、最も利用される配送オプションをリストの上位に配置するなど、カスタマイズが可能です。
  • PO Boxアドレスに対する配送オプションの非表示

    • PO Boxへの配送をサポートしていない配送方法を非表示にすることで、誤配送のリスクを軽減します。
  • 配送オプションのタイトルにメッセージを追加

    • 配送オプションのタイトルに、追加のメッセージや情報を含めることで、顧客に対して詳細な説明を提供します。

特定の商品や顧客に対する配送オプションの非表示の機能を利用すれば、Delivery Customization APIを利用して配送方法の非表示を行えそうですね。

ここまでで、Delivery Customization APIのざっくりとした概要が分かったと思います。

それでは次に、Delivery Customization APIを利用する際の具体的なコードを見ていきましょう。

Delivery Customization API を使用する際の具体的なコード

ここからは、Delivery Customization APIを利用する際の具体的なコードについて解説していきます。

以下の Shopify 公式ドキュメントを確認していきましょう。
https://shopify.dev/docs/api/functions/reference/delivery-customization/graphql

以下が、input.graphqlの公式のサンプルコードになります。

query Input {
  cart {
    cost {
      subtotalAmount {
        amount
        currencyCode
      }
    }
    deliveryGroups {
      id
      deliveryOptions {
        handle
        title
      }
    }
  }
}

上記のinput.graphqlの実行結果は、以下のinput.jsonになります。

{
  "cart": {
    "cost": {
      "subtotalAmount": {
        "amount": 200.0,
        "currencyCode": "CAD"
      }
    },
    "deliveryGroups": [
      {
        "id": "gid://shopify/CartDeliveryGroup/0",
        "deliveryOptions": [
            {
              "handle": "shopify-Standard-21.90",
              "title": "Standard"
            },
            {
              "handle": "shopify-Express-31.90",
              "title": "Express"
            },
        ]
      }
    ]
  }
}

上記のサンプルコードにある通り、deliveryGroupから、deliverOptionhandleを取得できます。

また、以下がoutput.jsonのサンプルコードです。

{
  "operations": {
    "hide": {
      "deliveryOptionHandle": "shopify-Express-31.90"
    }
  }
}

上記のサンプルコードにある通り、hideオペレーションのdeliveryOptionHandleに配送オプションのhandleを渡すことで、Shopify における配送方法の非表示が実現できそうです。

ここまでで、Shopify で配送方法の非表示を行う方法についての解説は終了です。

後は、カスタムアプリを作成して、Delivery Customization APIを有効化した後、Delivery Customization オブジェクトのメタフィールドに格納した値を利用して、output.jsonを作成すれば廃掃法の非表示が実現できそうですね。

Delivery Customization オブジェクトは、管理画面からメタフィールドを設定することができないので、以下の Graphql API を利用してメタフィールドを設定する形になるかと思います。

https://shopify.dev/docs/api/admin-graphql/2024-07/mutations/metafieldsSet

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

ここまでで、メタフィールドと Shopify の Function API を利用して配送方法の非表示を実現する方法について解説しました。

しかし、非エンジニアの方がこちらの方法を実現するのは難しいと思うので、念のため Shopify アプリで配送方法の非表示を行う方法についても解説します。

Shopify アプリを使って配送方法を非表示にする方法

それでは、Shopify アプリを使って配送方法を非表示にする方法を紹介します。

今回紹介するのは、シンプル配送カスタマイズ|お手軽条件ごとの配送方法というアプリです。

以下の記事を参考にしています。

https://unreact.jp/blog/shopify-delivery-hidden

https://unreact.jp/shopify-apps/sa-053-ur-shipping-custom/guide

https://qiita.com/eijiSaito/items/eede32a4fd5cb509ecb1

https://unblog.unreact.jp/blog/vyb-bu43od

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

https://apps.shopify.com/shopify-application-432?locale=ja

それでは、こちらのアプリの機能について解説していきます。

シンプル配送カスタマイズ|お手軽条件ごとの配送方法の機能について

それでは、シンプル配送カスタマイズ|お手軽条件ごとの配送方法の機能について解説していきます。

こちらは、Shopify で特定の配送方法の非表示を行えるアプリです。

以下の画像のように、特定の条件を満たす場合に指定した配送方法の非表示を行えます。

設定名を入力し、配送カスタマイズ設定を有効化した後に、配送方法を非表示にする条件を入力します。その後に、非表示にする配送方法を選択することで、アプリを利用できます。

お買い物金額の合計や、これまでのお買い物累計金額、お買い物累計回数や特定の顧客タグを含む・含まない、特定の商品を含む・含まないなど、様々な条件での配送方法の非表示を行えます。

実装としては、アプリの管理画面で設定した値をDelivery Customizationオブジェクトのメタフィールドに保存し、その保存した値を利用していると思われます。

非常に直観的で使いやすいので、配送方法を非表示にする際には選択肢の一つに入ってくると思います。

https://apps.shopify.com/shopify-application-432?locale=ja

最後に

今回は、カスタムアプリと Shopify Function API を利用して配送方法の非表示を行う方法と、Shopify アプリを使って配送方法の非表示を行う方法について解説しました。

お疲れさまでした。

参考記事

以下の記事を参考にしています。

https://unreact.jp/blog/shopify-delivery-hidden

https://unreact.jp/shopify-apps/sa-053-ur-shipping-custom/guide

https://qiita.com/eijiSaito/items/eede32a4fd5cb509ecb1

https://unblog.unreact.jp/blog/vyb-bu43od

Discussion