こんにちは。
代表兼CTOの高崎です。
今年ももう３分の２が終わったなんて信じられないですね。

さてさっそく本題ですが、Shopifyにはもともと管理画面からリダイレクトをかける機能があり、通常のリダイレクトであればこの機能で問題ありません。
ただしこの機能では「公開されている商品URLを別ドメインURLにリダイレクトさせる」ことはできません。

しかしながら、ヘッドレスコマース形式でサイトを運用しているが、各種販売シャネル連携アプリで吐き出されるURLがShopifyテーマでできたオンラインショップのURLになってしまっているので、それをヘッドレス側にリダイレクトさせたい場合などで「商品を公開した状態でLiquid上で1対１でリダイレクトをかけたい」場合があります。
本記事ではそういった場合の方法について解説します。

なお、今から解説するコードはJSでクライアントサイドで１対１でリダイレクトする方法になります。
ページURLが変更になってリダイレクトをかける際は、SEO上の理由でサーバーサイドで301リダイレクトをかけるのが好ましいので、Shopifyの管理画面からかけてくださいね。

したいこと

example.com(Liquid)でできたオンラインショップを
new-example.comでできたヘッドレスコマースサイトに１対１でパスを保持したままリダイレクトしたい。
ただし、アカウント関連のページはそのままLiquidで表示したい。

　方法

layout/theme.liquid内のheadタグ内に記述します。

1.リダイレクトしたくないアカウントページを以下のようにtemplate変数から取得して判定します。
以下はアカウントページを除外するif文になります。

{% if template != 'cart' and template != 'customers/account' and template != 'customers/activate_account' and template != 'customers/addresses' and template != 'customers/login' and template != 'customers/order' and template != 'customers/register' and template != 'customers/reset_password' %}

2.新しいドメインを変数として宣言します。

{% assign new_website = 'https://new-example.com' %}

3.その宣言の下に以下のJSコードを追記し、１対１へのリダイレクトをかけます。

     <script>
        function getCookie(name) {
          name = name + '=';
          var cookies = document.cookie.split(';');
          for (var i = 0; i < cookies.length; i++) {
            var cookie = cookies[i].trim();
            if (cookie.indexOf(name) == 0) {
              return cookie.substring(name.length, cookie.length);
            }
          }
        }

        // ディスカウントコードがあった場合をそれを維持ししたままJSでリダイレクトをかける
        var discountCode = getCookie('discount_code');
        if (discountCode) {
          window.location.replace(`{{new_website}}/discount/${discountCode}?redirect=${window.location.pathname}`);
        } else {
          let path = window.location.pathname;
          window.location.replace(`{{new_website}}${path}`);
        }
      </script>

以上です。
こうすると無事、
https://example.com/〇〇
が
https://new-example.com/〇〇
にリダイレクトされます。

Liquidの開発を体系的に学びたい方はぜひ当社からでているShopify開発書もぜひご参照くださいね。
それでは皆様、良きShopifyライフを。