# Popup de Newsletter O recurso de Popup de Newsletter é utilizado para capturar o contato dos clientes, adicionando esse contato a uma lista de pessoas que deseja receber informações enviadas pela loja. **Observações**: O modal será exibido apenas uma vez no período de 24 horas. Ele será exibido após 5 segundos do carregamento da página. Vamos ao passo a passo **Passo 1 -** Adicione o arquivo `modal.css` dentro da pasta css do tema, esse arquivo é responsável pela estilização do modal, dessa forma fique a vontade para realizar a personalização do recurso através deste arquivo (verificar **Arquivos** no final dessa página). **Passo 2** - Adicione o arquivo `modal.js` dentro da pasta js do tema, esse arquivo é responsável por toda as ações disponíveis no recurso (verificar **Arquivos** no final dessa página). **Passo 3** - Adicione o arquivo `js-cookie.min.js` dentro da pasta js do tema, esse arquivo é responsável por criar um cookie encarregado de quando será exibido novamente o modal (verificar **Arquivos** no final dessa página). **Passo 4** - Crie o arquivo `modal-newsletter.html` dentro da pasta elements do tema, é através desse arquivo que será montada toda a estrutura do popup. Nesse arquivo adicione o código abaixo: ```html ``` **Passo 5 -** Acesse o arquivo `default.html` localizado na pasta layout, nesse arquivo será necessário adicionar as referencias dos arquivos adicionados nos passos anteriores. Nesse arquivo, dentro da tag `` adicione a chamada do arquivo `modal.css`, como abaixo: ```html ``` Ainda nesse arquivo, adicione ao final do arquivo, antes da tag `` as chamadas abaixo: ```html {% element 'modal-newsletter' %} ``` Após adicionado, ao carregar a pagina e se passar 5 segundos, o modal será exibido. Lembrando que será exibido apenas uma vez por dia, ou então até que os cookies da página sejam limpos. ## Arquivos Segue abaixo o link para download do arquivo compactado com os arquivos `modal.css, modal.js` e `js-cookie.min.js` {% file src="" %}