新しいタブで外部リンクを開く
このページはDec 11, 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ファイルを編集する必要があります。
手順:
- 管理画面から [オンラインストア] > [テーマ] に移動します。
- 編集するテーマを見つけて、[...] ボタンをクリックしてアクションメニューを開き、[コードを編集する] をクリックします。
-
[アセット] ディレクトリで、次のいずれかをクリックします。
-
theme.js
-
theme.js.liquid
-
custom.js
-
ファイルの末尾に以下のコードを貼り付けます。
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';
}
}
- [保存] をクリックします。
- Shopifyアプリで [...] ボタンをタップします。
- 販売チャネルセクションで、[オンラインストア] をタップします。
- [テーマを管理する] をタップします。
- 編集するテーマを見つけて、[...] ボタンをクリックしてアクションメニューを開き、[コードを編集する] をクリックします。
-
[アセット] ディレクトリで、次のいずれかをクリックします。
-
theme.js
-
theme.js.liquid
-
custom.js
-
ファイルの末尾に以下のコードを貼り付けます。
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';
}
}
- [保存] をクリックします。
- Shopifyアプリで [...] ボタンをタップします。
- 販売チャネルセクションで、[オンラインストア] をタップします。
- [テーマを管理する] をタップします。
- 編集するテーマを見つけて、[...] ボタンをクリックしてアクションメニューを開き、[コードを編集する] をクリックします。
-
[アセット] ディレクトリで、次のいずれかをクリックします。
-
theme.js
-
theme.js.liquid
-
custom.js
-
ファイルの末尾に以下のコードを貼り付けます。
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';
}
}
- [保存] をクリックします。