Abrir Links Externos na Shopify

Qual é o benefício de abrir links externos em uma nova aba na Shopify?

Qual arquivo JavaScript é geralmente utilizado para aplicar a funcionalidade de abrir links externos na Shopify 2.0?

Qual é o primeiro passo recomendado antes de editar o código na Shopify?

Qual é a função do código JavaScript fornecido na instrução?

O que significa a propriedade 'rel' definida como 'noreferrer noopener' no código?

Qual dos seguintes temas não possui o arquivo global.js?

Qual método é usado para localizar o arquivo JavaScript principal em um tema da Shopify?

O que acontece se o código JavaScript for adicionado incorretamente?

Que tipo de link o código de JavaScript fornecido modifica?

Qual é o comando que permite duplicar um tema na Shopify?

Abrindo Links Externos em Nova Aba na Shopify

A Shopify não possui uma opção nativa para abrir links externos em uma nova aba nas configurações de navegação.
Para manter os visitantes na loja enquanto exploram conteúdos externos, como redes sociais ou canais de vídeo, é necessária uma solução que utiliza JavaScript.
A solução envolve uma modificação no código do tema da loja.

Passo a Passo para Implementar a Solução

Acesse a seção "Loja Virtual" e clique nos três pontinhos, selecionando "Editar Código".
É recomendável criar uma cópia de segurança do tema antes de fazer alterações.
Para duplicar o tema, clique em "Duplicar" para criar uma cópia automaticamente.
Localize o arquivo JavaScript principal do seu tema, geralmente com extensão .js.
- Para temas como Dawn ou outros do Shopify 2.0, buscar por global.js.
- Para o tema Debut, o arquivo é theme.js.
- Outros temas podem utilizar nomes como theme.js.liquid ou custom.js.

Código JavaScript a ser Adicionado

Role até o final do arquivo JavaScript encontrado e adicione o seguinte código:

(function () {
  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';
    }
  }
})();

Resultado da Implementação

Após salvar as alterações, todos os links externos abrirão em uma nova aba.
Essa modificação melhora a experiência do usuário e mantém os visitantes mais engajados com a loja.

Dicas Adicionais

Para mais dicas sobre e-commerce e Shopify, explorar cursos especializados pode ser uma boa opção.
O site da PlayEcom é uma fonte recomendada para aprendizado adicional sobre o tema.

Aprenda a configurar links externos na sua loja Shopify para que sejam abertos em uma nova aba. Essa técnica ajuda a manter os visitantes em sua loja enquanto exploram outros conteúdos, melhorando a experiência do usuário. Descubra a solução para uma funcionalidade que a Shopify não oferece nativamente.