>> Udemyのセール!Shopify講座が2,000円から!6/2まで

【Shopify】外部リンクを別タブで開くためのカスタマイズ方法

Shopify 別タブ カスタマイズ 外部リンク カスタマイズ

Shopifyでサイトを作っているけど、外部リンクのURLは別タブで開くようにカスタマイズしたい。
SNSリンクやメニューなどに外部リンクがあるときは別タブで開いて、ECサイトからの離脱を防ぎたい。

こんなことを考えている方へ。
この記事のポイントは以下です。

・外部リンクを別タブで開くためのカスタマイズ方法を解説

Shopify飯店

Shopify飯店

🔽Shopifyを学びたい方へ👇
私はShopifyを独学しましたが、いま思えば効率が悪かったと思います。
自身の経験を踏まえて、おすすめの学習方法を以下の記事にまとめました。

Shopifyの学習方法まとめ
🔽その他のおすすめ記事はこちら👇
・おすすめの書籍こちら📚
・おすすめのUdemy動画教材こちら🎦
独学ロードマップはこちら🖥
・おすすめオンラインスクールまとめはこちら📖
スクールの中でもデイトラがおすすめです🏫

 

スポンサーリンク

【Shopify】外部リンクを別タブで開くためのカスタマイズ方法

Shopifyで外部リンクを別タブで開くためのカスタマイズ方法を解説します。

テーマのJavaScriptを編集することで、メニューやSNSリンクなどで外部リンクが使われていたら別タブで開くことができます。
ECサイトからの離脱を防ぐことができるので、ぜひ導入してみてください。

 

テーマのバックアップを取る

作業を始める前にテーマのバックアップを取得しましょう。
オンラインストア>テーマ へと進みます。

Shopify 別タブ カスタマイズ 外部リンク

バックアップしたいテーマを選択し「アクション>複製」を押します。

Shopify 別タブ カスタマイズ 外部リンク

すると、「○○○(テーマ名が入ります)のコピー」という形でテーマが複製されます。

Shopify 別タブ カスタマイズ 外部リンク

最後にテーマ名を編集して、いつ時点のテーマなのかを記載します。
私は「yyyymmddまで_テーマ名」というルールで作っています。

Shopify 別タブ カスタマイズ 外部リンク

これでバックアップが完了です。

また、テーマファイル一式をダウンロードしてバックアップを取得する方法もあります。
オンラインストア>テーマ>アクション へと進み、「テーマファイルをダウンロード」を押します。

Shopify 別タブ カスタマイズ 外部リンク

「メールを送信する」を押します。

Shopify 別タブ カスタマイズ 外部リンク

すると、現在ログインしているShopifyアカウントのメールアドレスにメールが届きます。
メール内のリンクからテーマファイル一式をエクスポートできます。

Shopify 別タブ カスタマイズ 外部リンク

 

【パターン①】既存のJavaScriptを編集する

バックアップも無事取れたので、外部リンクを別タブで開く記述を書いていきます。
まずは、テーマにもともと存在するJavaScriptファイルを編集する方法です。

オンラインストア>テーマ>アクション>コードを編集 を押します。

Shopify 別タブ カスタマイズ 外部リンク

「アセット」を開きます。

Shopify 別タブ カスタマイズ 外部リンク

その中にテーマのベースとなっているJSがあるはずです。
テーマによって名前は異なりますが、「global.js」とかそんなのです。

以下のスクリーンショットは無料テーマの「Taste」ですが、「global.js」という名前でした。

Shopify 別タブ カスタマイズ 外部リンク

このファイルの最下部に、以下のコードを記載すればOKです。

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 別タブ カスタマイズ 外部リンク

コードを貼り付けたら、保存します。
これでOKです。

Shopify 別タブ カスタマイズ 外部リンク

 

【パターン②】カスタマイズ用のJavaScriptファイルを追加する

もうひとつのパターンは、自分でカスタマイズ用のJavaScriptファイルを作成して、そこに記述を行い読み込ませる方法です。

オンラインストア>テーマ>アクション>コードを編集 を押します。

Shopify 別タブ カスタマイズ 外部リンク

「アセット」を開きます。

Shopify 別タブ カスタマイズ 外部リンク

「新しいアセットを追加する」を押します。

Shopify 別タブ カスタマイズ 外部リンク

「空のファイルを作成する」を押して、「customize.js」というファイルを作ります。
ファイル名は何でも結構です。

Shopify 別タブ カスタマイズ 外部リンク

作成したての「customize.js」は空っぽです。

Shopify 別タブ カスタマイズ 外部リンク

ここに外部リンクの場合は別タブで開くコードを書きます。
以下のコードを貼り付ければOKです。

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 別タブ カスタマイズ 外部リンク

貼り付けが終わったら保存します。

Shopify 別タブ カスタマイズ 外部リンク

続いて、「customize.js」を読み込むための記述を行います。
「theme.liquid」を開きます。

Shopify 別タブ カスタマイズ 外部リンク

</body>の直前に以下の記述を書きます。
これでJSファイルを読み込むことが出来ます。

<script src="{{ 'customize.js' | asset_url }}" defer="defer"></script>

Shopify 別タブ カスタマイズ 外部リンク

最後に「保存」を押して完了です。

Shopify 別タブ カスタマイズ 外部リンク

 

外部リンクが別タブで開くのかを確認する

Shopify 別タブ カスタマイズ 外部リンク

実装した後は検証をしましょう。
外部リンクになっている箇所をクリックして、ちゃんと別タブで開くかを確認します。

 

スポンサーリンク

Shopifyのリンク設定の仕様について

Shopifyのリンク設定の仕様について解説します。
前提の話を押さえておくことで、カスタマイズがしやすくなります。

 

「メニュー」や「SNS」リンクは別タブで開きたい時がある

リンクを別タブで開きたいケースがあります。
基本的には、ほかサイトへのリンクの場合です(自分のサイトの中へのリンクではない場合)。

具体的には、メニューに外部サイト(関連企業サイトなど)へのリンクを貼っている場合や、

Shopify 別タブ カスタマイズ 外部リンク

SNSリンクをサイト内に掲載している場合などです。

Shopify 別タブ カスタマイズ 外部リンク

 

デフォルトでは別タブで開けない

しかし、Shopifyのメニュー設定やSNSリンク設定では「別タブで開く」の指示を入れることができません。

たとえば、オンラインストア>メニューを押します。

Shopify 別タブ カスタマイズ 外部リンク

試しにヘッダーメニューを編集してみます。

Shopify 別タブ カスタマイズ 外部リンク

リンクを設定しようとしても、「別タブで開く」といった指定はできません。

Shopify 別タブ カスタマイズ 外部リンク

 

商品詳細、ページ、ブログ内のリンクは別タブで開くことができる

一方で、商品詳細、ページ、ブログ内のリンクは別タブで開くことができます。
管理画面のエディタでリンクの開き方を選ぶことができます。

たとえば商品説明文のエディタでリンクを設定しようとすると、以下のメニューが表示されます。

Shopify 別タブ カスタマイズ 外部リンク

ここで、

・同じウィンドウで開く
・新しいウィンドウで開く

を選ぶことができます。

Shopify 別タブ カスタマイズ 外部リンク

ブログやページについても同様です。

Shopify 別タブ カスタマイズ 外部リンク

【関連記事】Shopifyでの商品登録のやり方【分かりやすく解説します】

Shopifyでの商品登録のやり方【分かりやすく解説します】
Shopifyでの商品登録のやり方を解説します。新しく商品を登録する方法や予約公開の方法、csvでの一括登録や毀損の情報をコピーして使う方法などを解説します。

 

スポンサーリンク

外部リンクを別タブで開く方法はShopify公式ヘルプに記載がある

JavaScriptコードを編集して、外部リンクを別タブで開く方法はShopify公式ヘルプにも記載があります。

Shopify 別タブ カスタマイズ 外部リンク

ここに使用するコードも書かれています。

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 別タブ カスタマイズ 外部リンク

 

スポンサーリンク

外部リンクを別タブで開いて離脱を防止しよう

リンクを開いた時の挙動を上手く使い分けましょう。
基本的には以下の認識でOKです。

別タブで開かないとき サイト内の移動(外部サイトへのリンクではない)
別タブで開くとき 別サイトへの移動(外部のサイトへのリンク)

自社サイトから離れてしまう外部リンクを別タブで開くことで、ユーザーの離脱を軽減できます。
このうような細かいポイントにも目を配りながら、ストア構築をしていきましょう。

 

スポンサーリンク

参考:Shopifyを学ぶ方法まとめ|本・動画教材・オンラインスクール

Shopify飯店

Shopifyを本格的に学ぶためにはネットの情報だけは足りません。本(参考書)、動画教材(Udemy)、オンラインスクールを活用して、効果的に学習しましょう。

思い切って有料の教材を買って体系的に学ぶことで、操作に悩む時間が減りますし、より高度なカスタマイズや提案ができるようになり、仕事の幅が広がります。

仕事でShopifyを扱っている筆者が、おすすめの学習教材をまとめました。くわしくは以下の記事をご覧ください。

【関連記事】【2023年最新】Shopifyのおすすめ学習方法まとめ【現役エンジニアが紹介】

Shopifyのおすすめ学習方法まとめ【オンラインスクール紹介】
現役フリーランスエンジニアがShopifyの勉強方法をまとめました。オンラインスクールで学ぶ、本で学ぶ、Udemyで学ぶ、公式のYoutubeで学ぶの4つです。おすすめはオンラインスクールで学ぶことです。

【関連記事】【2023年最新】デイトラShopifyコースは買うべき?【レビュー】
※2コース目以降の追加受講は5000円引き!

デイトラShopifyコースは買うべきか?徹底レビュー【2023年最新】
デイトラShopifyコースを大解剖します。内容、強み、評判、身につくスキルをShopify構築を仕事にしている筆者が解説します。

【関連記事】【2023年最新】Shopifyの学習におすすめの動画教材(Udemy)まとめ

【日本語のみ】Shopifyの学習に最適なUdemyの教材まとめ【2023年最新】
日本語で受講できるUdemyのShopify講座をまとめました。新講座が出るたびに随時、記事を更新します。初心者向けの講座から上級者向けの講座まで紹介しています。また、筆者が実際にUdemyの講座を受講したレビューも紹介しています。

【関連記事】【2023年最新】Shopifyの学習におすすめの本まとめ

Shopifyの学習におすすめの本まとめ【参考書7選を紹介】
本記事ではShopifyを学ぶのにオススメな本・参考書をまとめています。

【関連記事】【2023年最新】【Shopifyの独学】勉強方法のまとめ【初心者向け】

【Shopifyの独学】勉強方法のまとめ【初心者向け】
本記事ではShopifyの独学方法をロードマップとしてまとめています。筆者はShopifyを独学して3年ほど経ちました。ノウハウが溜まってきたので、Shopify独学のロードマップを整理して記事にしました。
【Udemyでセールが開催中!】
2023年6月2日(金)まで、Shopifyの動画教材が2,000円から買える!
Udemyはセールのタイミングに買うべきです。通常1万〜2万円の商品がセール中だと80%OFF〜90%OFF程度の値段で購入できます。
・Udemyでセール中のShopifyの講座一覧をまとめて見る icon

 

スポンサーリンク

まとめ

この記事のポイントをまとめます。

・外部リンクを別タブで開くには、JavaScriptコードを書く必要がある
・必要なJavaScriptコードはShopify公式のヘルプページに載っている

今回はここまでです。

 

タイトルとURLをコピーしました