新しいタブで外部リンクを開く

このページはJun 10, 2023に印刷されています。最新のバージョンについては、https://help.shopify.com/ja/manual/online-store/themes/themes-by-shopify/vintage-themes/customizing-vintage-themes/open-external-links-in-new-tabをご覧ください。

テーマにコードを追加し、オンラインストアの外部リンクがブラウザの新しいタブで開くようにします。この方法は、お客様がオンラインストアから離れていかないようにするのに有益です。外部リンクとは、SNSのアイコンに含まれるリンクなど、他のウェブサイトにお客様を誘導するURLです。

目次

テーマのJavaScriptファイルにコードを追加する

外部リンクをブラウザの新しいタブで開くには、テーマのJavaScriptファイルを編集する必要があります。

  1. 管理画面から [オンラインストア] > [テーマ] の順に移動します。

  2. 編集するテーマを見つけて、[...] ボタンをクリックしてアクションメニューを開き、[コードを編集] をクリックします。

  1. Shopifyアプリから [Store] をタップします。

  2. [販売チャネル] セクションで、[オンラインストア] をタップします。

  3. [テーマを管理する] をタップします。

  4. 編集するテーマを見つけて、[...] ボタンをクリックしてアクションメニューを開き、[コードを編集] をクリックします。

  1. Shopifyアプリから [Store] をタップします。

  2. [販売チャネル] セクションで、[オンラインストア] をタップします。

  3. [テーマを管理する] をタップします。

  4. 編集するテーマを見つけて、[...] ボタンをクリックしてアクションメニューを開き、[コードを編集] をクリックします。

  1. [アセット] ディレクトリで、次のいずれかをクリックします。

    • theme.js
    • theme.js.liquid
    • custom.js

  2. ファイルの末尾に以下のコードを貼り付けます。

var links = document.links;
for (let i = 0, linksLength = links.length ; i < linksLength ; i++) {
  if (links[i].hostname !== window.location.hostname) {
    links[i].target = '_blank';
    links[i].rel = 'noreferrer noopener';
  }
}
  1. [保存] をクリックします。

Shopifyで販売を開始する準備はできていますか?

無料体験を試す