サムネイル

Shopify ストアで配送方法を条件に応じて非表示にするカスタマイズ方法を徹底解説!

目次

はじめに

今回の記事では Shopify で商品に応じて配送方法を非表示にする実装・設定方法を解説していきます。

具体的な内容として、商品 A の場合、配送方法 A と B。商品 B の場合、配送方法 B と C を表示させる方法です。

今回の記事では、配送方法の設定方法は解説していません。
詳しい配送方法の設定方法は以下の記事で解説しています。

今回は、以下の記事を参考にしています

配送方法を商品・条件に応じて非表示にするメリット

  1. 顧客の混乱を防ぐ
    特定の商品や条件に対して利用できない配送方法が表示されると、顧客がどの配送方法を選ぶべきか迷ってしまう可能性があります。不要な選択肢を非表示にすることで、顧客が簡単に適切な配送方法を選択できるようになり、購入プロセスがスムーズになります。

  2. 誤選択の防止
    利用できない配送方法が表示された場合、顧客が誤って選択するリスクが高まります。これにより、後で配送方法を変更する手間が発生したり、配送に関するトラブルが起こる可能性があります。適切な配送方法のみを表示することで、こうしたリスクを低減できます。

  3. コストの最適化
    特定の商品や注文条件に対して、適切な配送方法を選択することで、配送コストを最適化できます。例えば、軽量の商品には安価な配送方法を提供し、重量がある商品にはより高価な配送方法を推奨することで、コスト管理がしやすくなります。

  4. 特定地域への配送制限
    一部の配送方法は特定の地域や国への発送に対応していない場合があります。このような場合、条件に応じて配送方法を非表示にすることで、顧客が利用できない配送方法を選ぶことを防ぎ、結果として配送に関するトラブルを回避できます。

  5. ショッピング体験の向上
    適切な配送方法のみを表示することで、顧客にとってのショッピング体験が向上します。選択肢が整理され、購入プロセスが簡素化されるため、顧客満足度が高まります。

  6. ブランドの信頼性向上
    顧客に対して最適な選択肢を提供することで、ブランドの信頼性が向上します。誤選択による配送の遅延や追加費用の発生を防ぐことで、顧客との信頼関係を強化できます。

特定の商品・条件で特定の配送方法を非表示(カスタマイズ)にする方法

まずは、Shopify の機能を用いて実装していきます。

Shopify の機能を用いて設定する場合、足し算の考え方になります。簡単に言うと、商品に配送方法を一つずつ足していくだけです。

管理画面の「配送と配達」からカスタム配送料の「新しいプロフェイルを作成する」をクリックします。

新しいプロフェイルを作成する

クリックすると以下の画面になります。

配送プロファイルを作成する

今回の商品に応じて配送方法を出し分けるでは、「プロフィール名」・「配送エリア」は関係ないため、適当に設定します。
注目ポイントは、「商品管理」です。

プロファイルアイテムを編集

ここで、商品を選択することで、選択した商品のみを、基本配送とは別のルールで配送することが出来ます。
今回は、壊れやすい商品をより丁寧に配送する配送方法を追加します。
後の作業は、基本の配送方法の設定と同じです、

「エリア作成」を選択肢、エリアを選択、「送料を追加する」から、送料を編集しましょう。

送料を編集

この方法は、Shopify ストアに備わっている機能のみでできますが、商品がたくさんあり、配送方法が複数・エリアが複数ある場合は、面倒です。

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

次にアプリを用いて、配送方法を非表示にする方法です。

今回紹介するアプリでは、先程と違い引き算の考え方です。具体的には、商品共通で設定されている配送ルールから、特定の配送方法を非表示にします。

(例:配送方法が A,B,C の 3 通り。商品 A の場合、C を非表示にし、A,B のみにする。)

シンプル配送カスタマイズ|お手軽条件ごとの配送方法

Shopify アプリである、『シンプル配送カスタマイズ|お手軽条件ごとの配送方法』は、以下の画像のように、指定した条件下で特定の配送方法を非表示にできるアプリです。このアプリを使うことで、商品に応じた適切な配送方法を顧客に提供できます。

シンプル配送カスタマイズ|お手軽条件ごとの配送方法のバナー

このアプリを使えば、特定の商品で特定の配送方法を非表示にする事ができます。

条件を満たす場合に指定した配送方法を非表示

設定方法が非常に簡単なのと、設定可能なルールが細かく設定されているため、たくさんの商品をまとめて設定する事ができます。

配送カスタマイズ設定を簡単に作成

複数の条件を設定することができる

こちらのアプリで設定する場合、商品に「冷凍」「割れ物」などのタグを付与し、そのタグを含む場合に、特定の配送方法を非表示にするという設定方法になります。

また、配送カスタマイズのルールが複数設定できるのと、簡単に編集・削除できるのも良い点です。
加えて、今回は必要ないですがアプリの機能として、特定のタグを持つ顧客に対して配送方法を非表示にすることができるので、よく買い物をしてくれる顧客に対してのマーケティングとしても使うことが出来ます。

配送カスタマイズ設定を作成することができ、一覧で確認・削除

Shopify Plus を契約して配送方法を非表示にできるカスタムアプリを作成する

一応、カスタマイズアプリを自作することで配送方法をカスタマイズする方法もあります。

ただ、アプリを作り慣れている場合は、上記の 2 つの方法を試したほうが良いと思います。

カスタムアプリの作成

公式ドキュメントを参考にカスタムアプリを作成します。

カスタムアプリの機能作成

Shopify から提供されている、Delivery Customization API を使用して、機能を作成する必要があります。

Payment Customization API についての詳細は下記の記事をご覧ください。
Shopify Delivery Customization API とは?実装方法まで徹底解説!

Delivery Customization API を使用した extensions を作成します。

extensions のファイルを作成できたら、各ファイルを条件によって配送方法を非表示できるよう編集します。

以下、更新機ドキュメントの例

input.graphql

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

この input.graphql が実行されると以下のような情報が返ってきます。

{
  "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"
            },
        ]
      }
    ]
  }
}

上の情報は、決済ページに移動するときに実行されます。購入商品の合計金額と、配送方法が戻ってきてきます。

これに対して、以下のように特定の配送方法を隠すようにすればよいです。

output.json

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

まとめ

今回は Shopify で商品に応じて配送方法を非表示にする実装・設定方法を解説しました。

商品数・配送方法が少ない場合は、Shopify の設定から、一つずつ設定しましょう。

たくさんある場合は、まとめて設定した後に、アプリで残りの設定をするのがおすすめです。

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

参考記事

今回は、以下の記事を参考にしています。

おすすめ Shopify アプリ

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

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

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

シンプルチェックアウト注文制限|お手軽購入制限ルールのアイコン

シンプルチェックアウト注文制限|お手軽購入制限ルール

カートとチェックアウトで不要な注文を柔軟なルールでブロック。45種類の条件を組み合わせ、コード不要。

シンプル栄養成分・アレルギー表示|食品表示のアイコン

シンプル栄養成分・アレルギー表示|食品表示

商品ページに栄養成分表示とアレルゲン情報を表示。お客様が安心して買い物できるようになります。

シンプルQRコード|お手軽QRコード作成・印刷アプリのアイコン

シンプルQRコード|お手軽QRコード作成・印刷アプリ

商品・コレクション・割引用のQRコードを作成。タグやチラシ、ポスターに印刷できます。

シンプルダークモード|お手軽配色切り替え・目に優しい表示のアイコン

シンプルダークモード|お手軽配色切り替え・目に優しい表示

ストアにダークモードボタンを追加。買い物客がワンタップで配色を切り替えられます。

シンプルソーシャルギフト|LINE・SNSで贈れるプレゼントのアイコン

シンプルソーシャルギフト|LINE・SNSで贈れるプレゼント

住所を知らなくてもギフトを贈れます。受取人が自分で配送先を入力します。

シンプルカスタムマウスカーソル|お手軽ポインターカスタマイズのアイコン

シンプルカスタムマウスカーソル|お手軽ポインターカスタマイズ

ストアのマウスカーソルを変更。形・絵文字・自分の画像から選べます。

シンプル低在庫アラート|在庫管理・在庫切れ通知・欠品防止のアイコン

シンプル低在庫アラート|在庫管理・在庫切れ通知・欠品防止

在庫が減ったらすぐ通知。商品・バリエーション・ロケーション別に設定できます。

関連記事