1. Top
  2. ブログ一覧
  3. 【Shopify Tips】Shopifyで常温便とクール便の送料を別々に設定する方法
Eコマース

【Shopify Tips】Shopifyで常温便とクール便の送料を別々に設定する方法

公開日

2024.12.23

【Shopify Tips】Shopifyで常温便とクール便の送料を別々に設定する方法のサムネイル

Shopifyを利用してECサイトを運営していると、常温便とクール便など異なる配送方法や料金を設定したいというニーズがよくあります。この設定を正しく行うことで、配送コストを適切に反映し、運営コストの透明性を高められます。本記事では、Shopifyの標準機能、アプリの活用、技術者向けのカスタマイズ方法までを詳しく解説します。

Shopify標準の設定機能を活用する

Shopifyの基本機能である「送料プロファイル」を利用すると、商品に応じて異なる送料を設定できます。これは追加のコストがかからないシンプルな方法です。

条件付き送料プロファイルの利用手順

  1. Shopify管理画面にログインします。

Shopifyの管理画面にアクセスし、ログインします。

  1. 「設定」→「配送と配達」へ移動します。

画面左下にある「設定」をクリックし、「配送と配達」を選択します。

  1. 新しい配送プロファイルを作成します。
    「配送プロファイルを管理」をクリックし、「配送プロファイルを作成」を選びます。
  • プロファイル名を「常温便用」と「クール便用」に分けます。
  • 各プロファイルに該当する商品を追加します。
  1. 各配送方法と送料を設定します。
    「配送方法を追加」をクリックし、それぞれの条件に応じた料金を設定します。
  • （例）
    • 常温便: 送料 1,000円
    • クール便: 送料 1,500円
  1. 配送地域を指定します。
    配送地域を選び、設定を保存します。

Capture

事例

例えば、冷凍食品と常温保存のお菓子を扱う店舗では、以下のような送料プロファイルを作成します：

  • 常温便用: クッキー、キャンディー
  • クール便用: 冷凍ピザ、アイスクリーム

公式ガイドを参照して、さらに詳しい設定方法を確認できます: 送料プロファイルの作成方法。

Shopifyアプリを利用する

送料プロファイルでは複雑な条件に対応しきれない場合、Shopifyアプリを活用するとさらに柔軟な設定が可能です。

おすすめアプリと特徴

  1. Advanced Shipping Rules
  • 商品カテゴリや重量、配送地域ごとに細かな送料設定が可能です。
  • 組み合わせ商品や特別な送料割引も対応。
    アプリの詳細はこちら
  1. Better Shipping
  • 商品ごとの送料を個別に設定できます。
  • 配送の優先度や地域によるカスタマイズが得意です。
    アプリの詳細はこちら
  1. Shipping Rates Calculator Plus
  • 顧客がカートで送料をリアルタイム計算できるようにします。
  • 透明性を向上させ、購入率をアップさせる機能。
    アプリの詳細はこちら

注意点

  • アプリの導入には月額費用がかかる場合があります。
  • 無料トライアル期間中に機能をテストし、ビジネスに合ったものを選びましょう。

より細かくカスタマイズする　※技術者向け

技術者やデザイナーが関与できる場合、Shopify Functions を使ったカスタマイズがおすすめです。

Shopify Functions を使用した送料カスタマイズ（Shopify Plus 向け）

Shopify Functionsは、Shopify Scripts の後継機能であり、Shopify Plus で高度なカスタマイズを可能にします。送料のカスタマイズも柔軟に対応可能です。
今回はその内の Delivery Customization Function を使用して、クール便向けに送料を適用する例を紹介します。

あらかじめ通常配送料とクール便送料を設定しておくことを前提とします。

手順

  1. 開発環境をセットアップ
  • Shopify CLI をインストール:
npm install -g @shopify/cli
  • 開発用アプリを作成:
shopify app init --template=none
  1. 送料ロジックを作成
  • アプリのプロジェクトフォルダに移動し、以下のコマンドで Function を追加:
shopify app generate extension --template=delivery_customization
  1. ロジックを定義
    src/run.graphql で以下のような function input を記述します:
query RunInput {
 cart {
   lines {
     merchandise {
       ... on ProductVariant {
         product {
           hasTags(tags: ["クール便"]) {
             hasTag
           }
         }
       }
     }
   }
   deliveryGroups {
     deliveryOptions {
       handle
       title
     }
   }
 }
}

記述した function input に対応する GraphQL types を生成するために作成した extension のディレクトリに移動して以下のコマンドを実行します:

shopify app function typegen

続いてsrc/run.tsで以下のようなロジックを記述します:

import type {
 RunInput,
 FunctionRunResult,
 ProductVariant,
} from "../generated/api";

const NO_CHANGES: FunctionRunResult = {
 operations: [],
};

export function run(input: RunInput): FunctionRunResult {
 const hasCoolProduct = input.cart.lines.some(
   (line) =>
     (line.merchandise as ProductVariant).product.hasTags[0].hasTag === true
 );

 const normalDeliveryOption = input.cart.deliveryGroups
   .find((group) =>
     group.deliveryOptions.some((option) => option.title === "通常配送")
   )
   ?.deliveryOptions.find((option) => option.title === "通常配送");

 if (!normalDeliveryOption) {
   return NO_CHANGES;
 }
 const normalDeliveryHandle = normalDeliveryOption.handle;

 if (!hasCoolProduct) {
   return NO_CHANGES;
 } else {
   return {
     operations: [
       {
         hide: {
           deliveryOptionHandle: normalDeliveryHandle,
         },
       },
     ],
   };
 }
}

このロジックは、カート内にクール便タグがある商品がある場合、通常配送のオプションを非表示にします。
つまり、クール便の送料が適用されるようになります。

  1. デプロイとテスト
  • ロジックを Shopify にデプロイ:
shopify app deploy
  • Function を有効化する
mutation deliveryCustomizationCreate {
 deliveryCustomizationCreate(
   deliveryCustomization: {
     enabled: true
     functionId: "<Function ID>"
     title: "delivery-customization"
   }
 ) {
   deliveryCustomization {
     id
     functionId
     title
     enabled
   }
 }
}
  • テスト環境で挙動を確認。

Capture2

Capture3

参考文献