Abrir Links Externos na Shopify

Questions and Answers

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

Aumenta o tráfego externo para o site principal.

Aumenta o tempo de permanência do visitante na loja. (correct)

Possibilita a leitura simultânea de várias páginas da loja.

Facilita o uso de cores nas páginas externas.

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

script.js

theme.js.liquid

global.js (correct)

custom.js

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

Atualizar a versão do Shopify.

Criar uma cópia de segurança do tema. (correct)

Remover o tema atual.

Notificar todos os visitantes.

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

Abre links externos em uma nova aba. Signup and view all the answers

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

Faz com que a página de destino não saiba de onde o link veio. Signup and view all the answers

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

Debut Signup and view all the answers

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

Utilizar a função de pesquisa na interface de edição. Signup and view all the answers

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

Os links externos não abrirão em uma nova aba. Signup and view all the answers

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

Apenas links externos para outros sites. Signup and view all the answers

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

Duplicar Signup and view all the answers

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.

Description

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.