在新标签中打开外部链接

您可以向模板中添加一些代码，用于使您在线商店中的外部链接在新的浏览器标签中打开。这样做可能很有帮助，因为这有助于防止客户离开您的在线商店。外部链接是将客户定向到其他网站的 URL，例如社交媒体图标中包含的链接。

将一些代码添加到您模板的 JavaScript 文件中

若要在新的浏览器标签中打开外部链接，您需要编辑模板的 JavaScript 文件。

PC：

1. 在 Shopify 后台中，转到在线商店 > 模板。

2. 找到要编辑的模板，然后点击操作 > 编辑代码。

1. 在 Assets 目录中，点击以下一项：

- theme.js - theme.js.liquid - custom.js

1. 将以下代码粘贴到文件底部：

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. 点击保存。

苹果系统：

1. 在 Shopify 应用中，轻触商店。

2. 在销售渠道部分中，轻触在线商店。

3. 轻触 Manage themes（管理模板）。

4. 找到要编辑的模板，然后点击操作 > 编辑代码。

1. 在 Assets 目录中，点击以下一项：

- theme.js - theme.js.liquid - custom.js

1. 将以下代码粘贴到文件底部：

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. 点击保存。

安卓系统：

1. 在 Shopify 应用中，轻触商店。

2. 在销售渠道部分中，轻触在线商店。

3. 轻触 Manage themes（管理模板）。

4. 找到要编辑的模板，然后点击操作 > 编辑代码。

1. 在 Assets 目录中，点击以下一项：

- theme.js - theme.js.liquid - custom.js

1. 将以下代码粘贴到文件底部：

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商户官网原文详情：

Open external links in a new tab

You can add some code to your theme that causes external links on your online store to open in a new browser tab. This can be beneficial because it helps to prevent customers from navigating away from your online store. External links are URLs that direct customers to different websites, such as the links included in social media icons.

Add some code to your theme's JavaScript file

To have external links open in a new browser tab, you need to edit your theme's JavaScript file.

PC：

1. From your Shopify admin, go to Online Store > Themes.

2. Find the theme you want to edit, and then click Actions > Edit code.

1. In the Assets directory, click one of the following:

• theme.js

• theme.js.liquid

• custom.js

2. Paste the following code at the bottom of the file:

   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';   } }

3. Click Save.

iPhone：

1. From the Shopify app, tap Store.

2. In the Sales channels section, tap Online Store.

3. Tap Manage themes.

4. Find the theme you want to edit, and then click Actions > Edit code.

1. In the Assets directory, click one of the following:

• theme.js

• theme.js.liquid

• custom.js

2. Paste the following code at the bottom of the file:

   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';   } }

3. Click Save.

Android：

1. From the Shopify app, tap Store.

2. In the Sales channels section, tap Online Store.

3. Tap Manage themes.

4. Find the theme you want to edit, and then click Actions > Edit code.

1. In the Assets directory, click one of the following:

• theme.js

• theme.js.liquid

• custom.js

2. Paste the following code at the bottom of the file:

   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';   } }

3. Click Save.

文章内容来源：Shopify商户官方网站

（本文内容根据网络资料整理和来自用户投稿，出于传递更多信息之目的，不代表本站其观点和立场。本站不具备任何原创保护和所有权，也不对其真实性、可靠性承担任何法律责任，特此声明！）

常见问答(FQAS)

您可以使用target=\"_blank\"属性在新标签页中打开外部链接。例如:

您可以使用liquid模板语言中的concat函数拼接URL前缀。例如:\"{{ 'http://example.com/' | concat: link }}\"

您可以使用原生JavaScript或jQuery在shopify主题文件的页脚中添加

您可以使用liquid标签如section来向页面添加新区块。例如:{% section 'new-section' %} 内容here {% endsection %} 在页面需要显示的位置使用{% section 'new-section' %}即可渲染。