Abrir enlaces externos en una pestaña nueva

Precaución

Los temas vintage no están disponibles en la Theme Store. Estos temas no tienen las funciones incluidas en los temas de la Online Store 2.0 de Shopify, y los temas vintage gratuitos de Shopify no reciben actualizaciones aparte de las correcciones de seguridad.

Nota

Si usas un tema gratis de Shopify, puedes comunicarte con atención al cliente de Shopify para recibir ayuda con este tutorial. Requiere 15 minutos de tiempo de diseño. Obtén más información sobre la política de diseño de Shopify.

Nota

Esta personalización es para temas vintage de Shopify, y no se aplica a temas de Online Store 2.0.

• Conocer la versión de la arquitectura del tema
• Explorar las personalizaciones de temas de Online Store 2.0

Puedes agregar un código a tu tema que haga que los enlaces externos en tu tienda online se abran en una nueva pestaña del navegador. Esto puede resultar beneficioso porque ayuda a evitar que los clientes abandonen tu tienda online. Los enlaces externos son URL que dirigen a los clientes a diferentes sitios web, como los enlaces incluidos en los íconos de redes sociales.

Agregar un código al archivo JavaScript de tu tema

Para que los enlaces externos se abran en una nueva pestaña del navegador, debes editar el archivo JavaScript de tu tema.

Pasos:

Escritorio

1. Desde el panel de control de Shopify, ve a Tienda online > Temas.
2. Busca el tema que desees editar, haz clic en el botón … para abrir el menú de acciones y, luego, haz clic en Editar código.

3. En el directorio Recursos, haz clic en una de las siguientes opciones:

   • theme.js
   • theme.js.liquid
   • custom.js

4. Pega el siguiente código al final del archivo:

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. Haz clic en Guardar.

iPhone

1. En la aplicación de Shopify, toca el botón ….
2. En la sección Canales de ventas, toca Tienda online.
3. Toca Administrar temas.
4. Busca el tema que desees editar, haz clic en el botón … para abrir el menú de acciones y, luego, haz clic en Editar código.

5. En el directorio Recursos, haz clic en una de las siguientes opciones:

   • theme.js
   • theme.js.liquid
   • custom.js

6. Pega el siguiente código al final del archivo:

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. Haz clic en Guardar.

Android

1. En la aplicación de Shopify, toca el botón ….
2. En la sección Canales de ventas, toca Tienda online.
3. Toca Administrar temas.
4. Busca el tema que desees editar, haz clic en el botón … para abrir el menú de acciones y, luego, haz clic en Editar código.

5. En el directorio Recursos, haz clic en una de las siguientes opciones:

   • theme.js
   • theme.js.liquid
   • custom.js

6. Pega el siguiente código al final del archivo:

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. Haz clic en Guardar.