Deseja cadastrar um banner pop-up? Então você está no artigo correto, então sem mais delongas, vamos lá:

Atenção: A criação da Newsletter como pop-up é feito em HTML, desta maneira, é recomendado que tenha conhecimento em programação, ou contrate um programador de sua confiança ou agência parceira da Tray, isto para evitar que sejam feitas edições errôneas no código fonte causando problemas no Layout.

  • Acesse Minha Loja >> Design da Loja >> Editar HTML.
  • Caso não saiba como acessar o HTML, veja este artigo.

mceclip0.png

mceclip2.png

Atenção: O arquivo modal.css é responsável pela estilização da modal (do pop-up), então caso tenha conhecimento em HTML, poderá editá-lo da maneira que desejar antes de realizar o upload do arquivo.

  • Insira o Nome do arquivo, selecione a "Extensão" CSS e o opte também por CSS no "Local do Arquivo".

mceclip1.png

  • Neste momento será preciso que faça o download deste arquivo e dentro da página de edição HTML, clique em "Upload de Arquivos" novamente.

mceclip2.png

  • Agora faça o Upload do arquivo modal.js na pasta js, lembrando que este arquivo é responsável por todas as funcionalidades desta função.

mceclip3.png

  • Ainda em "Editar HTML", crie o arquivo "modal-newsletter.html", pois através dele será montada toda a estrutura do pop-up.
  • Para isto, clique em "Incluir Novo Arquivo".

mceclip5.png

  • E preencha o quadro aberto da seguinte maneira e clique em "Incluir Arquivo".

mceclip4.png

  • Em seguida, clique em "Editar" no arquivo criado.

mceclip6.png

  • Agora copie todo o código abaixo:
 <div id="modal-newsletter"> <modal v-if="showModal" @close="showModal
  = false"> <div slot="header"> <h3>Newsletter</h3> </div>
  <div slot="body"> <form action="{{ links.newsletter }}" method="POST">
  <input type="hidden" name="loja" value="{{ store.id }}"> <input name="name"
  type="name" placeholder="João da Silva"> <input name="email" type="text"
  placeholder="joao@email.com"> <button>Cadastrar</button> </form>
  </div> </modal> </div>
  • Insira o código copiado dentro da página que foi aberta, conforme imagem abaixo:

mceclip7.png

  • Não se esqueça de salvar.
  • Agora, copie o código abaixo e vá em "Layouts >> Default.html" e cole o código dentro das tags "<head></head>" conforme imagem abaixo:
<link rel="stylesheet" href="{{ asset('css/modal.css') }}" type="text/css">

mceclip8.png

  • Ainda em "Layout >> Default.html", copie o códio abaixo e cole antes do fechamento da tag "</body>", conforme imagem abaixo:
{% element 'modal-newsletter' %}
<script type="text/javascript" src="{{ asset('js/modal.js') }}"></script>

mceclip9.png

Atenção: a apresentação do POP-UP de NewsLetter possui algumas regras, veja abaixo:

  1. O pop-up será exibido 5 segundos após o carregamento da página.
  2. Ele será exibido uma única vez no período de 24 horas (para cada usuário).

E aí, o que achou? É claro que demanda prestar bastante atenção, mas não é complicado e além disto, se você tiver conhecimento em HTML ou contratar alguma agência parceira, é possível deixar este pop-up com a cara da sua loja virtual.

Boas Vendas!

Equipe Tray.

 

Gabriel Coimbra 
Tem mais dúvidas? Envie uma solicitação

Comentários

    Artigos nessa seção

    Desenvolvido por Zendesk