Shopifyの注文完了ページを任意のURLに遷移させる方法

ECサイトでよく使われているプラットフォーム「Shopify（ショッピファイ）」。

そんなShopifyで、注文完了後に表示されるページを特定のページに遷移させたい、というお悩みをよくいただきます。

なぜなら上記の機能は、Shopifyの標準機能にはなく、自分でプログラムを書いて実装しないといけないからです。

僕も最近このお悩みを解決できたので、解説します。

プログラムはコピペで実装できるので、ぜひ最後まで読んでくださいね。

必要な情報を準備する

必要な情報は

• Shopifyに登録されている各商品の商品ID
• 遷移先URL（各商品ごとに分ける場合は、すべてのURL）
• 複数の商品を注文された場合の遷移先URL

です。

例えば

商品Aの注文が完了したら、ページAに遷移する。

商品Bの注文が完了したら、ページBに遷移する。

商品A・商品Bが同時に注文されたら、複数商品注文用のページCに遷移する。

こんなことができるようになります。

商品によって遷移先URLを変える必要がない場合は、すべての商品で同じURLを設定します。

それではまず、Shopifyに登録されている各商品の商品IDを調べましょう。

Shopifyの管理画面の「商品管理」をクリックして、各商品をクリックします。

商品ページのURLに注目します。

URLの最後に13桁の数字が記載されていると思いますが、それがその商品の商品IDです。

この商品IDを全商品分控えておきましょう。

次に遷移先に指定するURLも控えておきましょう。

プログラムを書く（コピペでOK）

上記のものが準備できたら、Shopify管理画面の左下にある「設定」をクリックします。

「チェックアウト」をクリックします。

「注文状況ページ」の「追加スクリプト」にプログラムを書いていきます。

実際のプログラムはこちら。（商品IDやURLは黒塗りにしてます。）

以下はコピペして使用できます。

今回は商品が3つの場合を想定してますが、4つ以上ある場合は17行目以降に追加してください。

遷移先URLには「” “」が必要、商品IDには「” “」は不要、というところも注意点です。

<script>
  const idUrlList = {
    //商品A
    "product1": {
      "url": "商品Aの遷移先URL",
      "product_id": 商品AのID,
    },
    //商品B
    "product2": {
      "url": "商品Bの遷移先URL",
      "product_id": 商品BのID,
    },
    //商品C
    "product3": {
      "url": "商品Cの遷移先URL",
      "product_id": 商品CのID,
    },
  };
  const productPurchasedId = Shopify.checkout.line_items[0].product_id;
  const checkoutLineItems = Shopify.checkout.line_items;
  const multiple = 1;
  //複数商品
  if (multiple < checkoutLineItems.length) {
    window.location.replace ("複数商品注文用の遷移先URL");
  } 
  else {
      for (const product in idUrlList) {
        if (idUrlList[product].product_id === productPurchasedId) {
          window.location.replace (`${idUrlList[product].url}`);
        }
        else {
          console.log (`Not found.`);
        }
      }    
  }
</script>

プログラムが書けたら、「保存する」をクリックします。

実際に、注文後に任意のURLに遷移できたら完了です。