August 16, 2023

Shopify 小技メニューのリンクに別窓（_blank）を設定する方法

Shopifyではグローバルナビゲーションなどのリンク設定にメニュー機能を使いますが、別ドメインに存在するブランドサイトや実店舗サイトへのリンクには、別ウィンドウ表示（target：_blank）を設定したい場合があります。

しかし残念ながら、メニュー機能に別窓の設定項目はありません。

この記事では、Shopifyデフォルトのメニューに含まれる別ドメインのリンクに、JavaScriptで別ウィンドウ表示（target：_blank）を設定する小技をご紹介します。

メニュー内のリンクに別ドメインがあればtarget="_blank"を追加

layout/theme.liquidファイルを修正します。
ファイルの修正を管理画面から行う場合、
Shopifyの管理画面 > 販売チャネル > オンラインストア
の画面右下にある『…』ボタンをクリックして『コードを編集』します。
※解説に使用しているのはDawnのバージョン11.0.0の画面です。

</body>タグ直前に、以下のJavaScriptコードを追記します。

    <script>
      const links = document.querySelectorAll('.list-menu a');
      for (let i = 0; i < links.length; i++) {
        if (links[i].hostname !== window.location.hostname) {
          links[i].target = '_blank';
          links[i].rel = 'noreferrer noopener';
        }
      }
    </script>

メニュー内のリンクに別ドメインが含まれているときにだけ、<a>タグに属性値target="_blank"、rel="noreferrer noopener"が追加され、リンクは別ウィンドウ（別タブ）で開かれます。
※Dawn、Craftのバージョン11.0.0にて、動作検証を行いました。

別窓アイコンの表示

リンクに別窓アイコンを表示したいときは、先程のJavaScriptに一行追記します。

    <script>
      const links = document.querySelectorAll('.list-menu a');
      for (let i = 0; i < links.length; i++) {
        if (links[i].hostname !== window.location.hostname) {
          links[i].target = '_blank';
          links[i].rel = 'noreferrer noopener';
          links[i].classList.add('link_blank');
        }
      }
    </script>

CSSは以下のように指定します。

a.link_blank:after {
  width: 12px;
  height: 12px;
  margin-left: 6px;
  background-image: url("別窓アイコン画像のURL");
  background-repeat: no-repeat;
  background-size: 12px 12px;
  background-position: center;
  display: inline-block;
  content: "";
}

CSSの追加を管理画面から行う場合、通常は『カスタムCSS』を使用しますが、今回は『オンラインストアのエディタセッションを公開できません』というエラーが出てしまいました。

バリデーション関連の不具合か、content:の指定があるとエラーになるようです。（2023年8月10日現在）

そこで今回は、『カスタムLiquid』でCSSの追加を行ってみます。
Shopifyの管理画面 > 販売チャネル > オンラインストア
の画面で『カスタマイズ』ボタンをクリックします。

1. カスタマイズ画面左側にある『ヘッダー』項目で『セクションを追加』をクリックして、
2. 『カスタムLiquid』を選択します。

3. 『Liquidコード』の項目へ以下のCSSを入力します。

<style>
a.link_blank:after {
  width: 12px;
  height: 12px;
  margin-left: 6px;
  background-image: url("別窓アイコン画像のURL");
  background-repeat: no-repeat;
  background-size: 12px 12px;
  background-position: center;
  display: inline-block;
  content: "";
}
</style>

4. 『セクションの余白』を全て0pxに設定して、
5. 画面右上の『保存する』ボタンをクリックします。

CSSが適用されて、別窓アイコンが表示されました。

仕様の異なるテーマへの対応

テーマやバージョンによっては、JavaScriptコードの一部に修正が必要になるかもしれません。
先に紹介したコードでは上手くいかなかったときのために、JavaScriptの仕組みを簡単に解説していきます。

1. class名の確認

ブラウザのデベロッパーツールで、メニュー部分のソースコードをみてみましょう。
メニューを囲っている要素のclass名を確認して、メモしておきます。

2. セレクタの書き換え

先程もご紹介した以下のJavaScriptは、指定したclassの子要素にあたる<a>タグを全て取得して、別ドメインのリンクがあれば属性値target="_blank"、rel="noreferrer noopener"を追加しています。

    <script>
      const links = document.querySelectorAll('.xxxxx a');
      for (let i = 0; i < links.length; i++) {
        if (links[i].hostname !== window.location.hostname) {
          links[i].target = '_blank';
          links[i].rel = 'noreferrer noopener';
        }
      }
    </script>

xxxxxの部分を『先程メモしたclass名』に書き換えることで、仕様の異なるテーマへも対応可能です。