在新标签中打开外部链接

您可以向模板中添加一些代码,用于使您在线商店中的外部链接在新的浏览器标签中打开。这样做可能很有帮助,因为这有助于防止客户离开您的在线商店。外部链接是将客户定向到其他网站的 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商户官方网站