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

注意

現在、以前のテーマはテーマストアでは提供されていません。以前のテーマには、ShopifyのOnline Store 2.0テーマに含まれている機能が盛り込まれておらず、セキュリティ修正以外のアップデートは行われません。

メモ

Shopifyの無料テーマを使用している場合は、Shopify サポートに連絡すると、このチュートリアルのサポートを受けることができます。設計には15分かかります。Shopifyデザインポリシーについて詳しくはこちらをご覧ください。

メモ

このカスタマイズは以前のShopifyテーマ向けで、Online Store 2.0のテーマには適用されません。

• 使用しているテーマのアーキテクチャバージョンを確認する
• Online Store 2.0のテーマのカスタマイズについて確認する

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

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

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

手順：

デスクトップ

1. 管理画面から [オンラインストア] > [テーマ] に移動します。
2. 編集するテーマを見つけて、[...] ボタンをクリックしてアクションメニューを開き、[コードを編集する] をクリックします。

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

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

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

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. [保存] をクリックします。

iPhone

1. Shopifyアプリで [...] ボタンをタップします。
2. 販売チャネルセクションで、[オンラインストア] をタップします。
3. [テーマを管理する] をタップします。
4. 編集するテーマを見つけて、[...] ボタンをクリックしてアクションメニューを開き、[コードを編集する] をクリックします。

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

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

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

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. [保存] をクリックします。

Android

1. Shopifyアプリで [...] ボタンをタップします。
2. 販売チャネルセクションで、[オンラインストア] をタップします。
3. [テーマを管理する] をタップします。
4. 編集するテーマを見つけて、[...] ボタンをクリックしてアクションメニューを開き、[コードを編集する] をクリックします。

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

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

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

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. [保存] をクリックします。