Abrir Links Externos na Shopify

Study Notes

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.