专注出海运营平台,解决跨境电商问题
当前位置:跨境智通山 > 其他跨境 > 跨境问答 > 正文

shopify在新标签中打开外部链接以及添加代码步骤

2022-03-22 17:26:28 跨境问答

在新标签中打开外部链接备注如果您使用Shopify 的免费模板,您可以联系 Shopify 支持团队获得关于此教程的帮助。此教程需要 15 分钟的设计时间。若要了解详情,请参阅Support for

目录

shopify在新标签中打开外部链接以及添加代码步骤

shopify在新标签中打开外部链接以及添加代码步骤详细回答

在新标签中打开外部链接

备注

如果您使用 Shopify 的免费模板,您可以联系 Shopify 支持团队获得关于此教程的帮助。此教程需要 15 分钟的设计时间。若要了解详情,请参阅 Support for themes

备注

此自定义用于复古 Shopify 模板,不适用于“Online Store 2.0”模板。

  • 找到您的模板架构版本

  • 探索“Online Store 2.0”模板自定义

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

Note

If you use a free theme from Shopify, then you might be able to contact Shopify Support for help with this tutorial. It requires 15 minutes of design time. To learn more, refer to Support for themes.

Note

This customization is for vintage Shopify themes, and doesn't apply to Online Store 2.0 themes.

  • Find out your theme's architecture version

  • Explore Online Store 2.0 theme customizations

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商户官方网站