Olá pessoal hoje vou ensinar para você uma forma de colocar um link para abrir um pop-up, ou seja, abrir uma página ou conteúdo na mesma janela que o link está, é um recurso muito valioso para quem quer colocar uma mensagem ou conteúdo sem que saia da tela, por exemplo um link para abrir manual do produto, cupom de desconto e etc.

Atenção vamos fazer isso com código avançado da loja, tome muito cuidado ao colocar esses dados lá, então vamos lá. Primeiro vamos acessar o painel da loja e vamos no menu de Customização > Personalizar aqui vamos na aba de Avançado e no campo de JavaScript  vamos colar o seguinte código:

$(document).ready(function() {
	if(is_mobile){
		$('.abre-pagina').colorbox({width:'90%', top: '30px'});
	}else{
		$('.abre-pagina').colorbox({width:'50%'});
	}	
});

ATENÇÃO: Se houver outro trecho de código aqui, cole no final dele ok? Sempre na última linha “de um enter” e cole o código acima.

Neste trecho de código temos um “validador” de mobile, assim poderá fazer com que o esta caixa abra em tamanhos diferentes para telas menores, se desejar usar só uma instrução, com porcentagem você pode usar o seguinte código mais “enxuto”:

$('.abre-pagina').colorbox({width:'90%'});

Neste código acima ele vai abrir com largura de 90% do navegador seja ele desktop ou mobile. Agora vamos salvar e vamos criar uma página.
Neste exemplo vou colocar um link para um cupom de desconto que já criei, quer saber como criar cupons de desconto, saiba como aqui..

Com o cupom criado vamos no menu de Customização > Páginas institucionais para criar o conteúdo do pop-up, insira uma nova página e capriche no conteúdo.

Agora vamos copiar a URL desta página, esta informação fica na aba de Dados, copie e guarde ela para colocarmos no link.

Agora eu vou colocar o pop-up, em uma barra abaixo do meu banner principal, para chamar a atenção e as pessoas possam usar este meu cupom, no menu de Customização > Áreas personalizada eu criei uns mini-banner de destaque da minha loja, e um deles é o cupom.

Aqui estou usando uma imagem, para que funcione corretamente você precisa colocar uma classe no link da imagem, então clique no ícone da opção de link na barra de ferramentas:

Ao abrir a caixa de edição de link, vamos na aba de Avançado e no campo Classe de CSS vamos colocar “abre-pagina”, isso vai ativar o POP-UP

Agora na aba de Informações  vamos colocar a URL da página que criamos com um parâmetro a mais, no meu exemplo ficou

https://www.SEUDOMINIO.com.br/pop-up-cupom-primeira-compra?information_popup=1&title=no

– Coloque sempre a URL completa da página, sem ela não vai abrir corretamente.
– Ai na URL temos dois parâmetros um que habilita o pop-up (information_popup) e outro que remove o título da página (title)

Agora vamos salvar e tesar na nossa loja.

Bacana não, use este recuro tanto em imagens ou links, em qualquer parte da loja que tenha o editor ou possa colocar um link com essa classe. Você pode até abrir outros sites dentro usando a função de iFrame, para isso você vai precisar mexer no código avançado, neste link tem a documentação do plugin completa, mas tome cuidado é preciso um pouco de conhecimento em Linguagem de Javascript, se tiver alguma dúvida não deixar e entrar em contato com nossa central de suporte.

Até mais!