Compatibilidade: Compatível com a maioria dos temas do Shopify, do Debut ao Dawn 2.0.
Como criar uma seção modal de descontos que pode ser personalizada.
Este pop-up funciona com o tema Debut e também com o tema Dawn.
Para iniciar:
1. Configure o EmailJS primeiro, consulte o link para obter mais instruções sobre como configurar seu EmailJS
2. Vá para a loja do seu administrador no Shopify
3. Clique em “Temas”, “ações”, “editar código”
4. Encontre a pasta da seção
5. Crie uma seção e nomeie-a como “modal de desconto”
6. Copie e cole o código abaixo e clique em SALVAR
| <script type="texto/javascript" src="https://cdn.jsdelivr.net/npm/emailjs-com@2/dist/email.min.js"></script> <script type="texto/javascript"> emailjs.init('user_xxxx')</script> <div id="modal-contact-dark-overlay"></div> <div id="contact-modal-container"> <div id="contato-modal"> <button id="contact-modal-exit">✕</button> <p id="modal-success-message"></p> <div id="contact-modal-form-content"> <div class="image-wrapper"> <img src=" {{ section.settings.image | img_url: 'large' }} " alt="Foto da equipe"> </div> <h1 class="h1"> {{ section.settings.title | escape }} </h1> <form id="formulário"> {% if section.settings.show_email == true %} <div class="campo"> <label for="ContactFormEmail">E-mail</label> <input type="email" name="email" id="email"> </div> {% endif %} <div class= "btnWrapper"> {% if section.settings.firstBtn_label != blank %} <button type="submit" class="btn" id="getBtn" > {{ section.settings.firstBtn_label | escape }} </button> {% endif %} {% if section.settings.secondBtn_label != blank %} <button type="button" class="btn" id="optOut"> {{ section.settings.secondBtn_label | escape }} </button> {% endif %} </div> </form> </div> </div> </div> <roteiro> var timeDelay = " {{ section.settings.time}} " *1000; const meuPopup = setTimeout(function() { showOverlay(); mostrarModal(); }, tempoAtraso) document.getElementById('form').addEventListener('enviar', function(event) {event.preventDefault(); const serviceID = 'default_service'; const templateID = 'template_xxxx'; emailjs.sendForm(serviceID, templateID, this).then(() => { alert('Enviado!'); ocultarOverlay(); ocultarModal(); }, (erro) => { alerta(JSON.stringify(err)); }); }); const showOverlay = () => document.querySelector("#modal-contact-dark-overlay").style.display = "block"; const showModal = () => document.querySelector("#contact-modal-container").style.display = "block"; const hideOverlay = () => document.querySelector("#modal-contact-dark-overlay").style.display = "none"; const hideModal = () => document.querySelector("#contact-modal-container").style.display = "none"; //Feche a janela modal clicando no X document.getElementById("contact-modal-exit").onclick = function(){ ocultarOverlay(); ocultarModal(); } document.getElementById("optOut").onclick = function(){ ocultarOverlay(); ocultarModal(); } </script> <estilo> #modal-contact-dark-overlay { Mostrar nenhum; posição: fixa; superior: 0; esquerda: 0; largura: 100%; altura: 100%; cor de fundo: rgba (0, 0, 0, 0,7); estouro: automático; nome da animação: animateopacidade; duração da animação: 0,5s; índice z: 9999; } @keyframes animateopacidade { de {cor de fundo: rgba (0, 0, 0, 0,0)} para {cor de fundo: rgba (0, 0, 0, 0,7)} } #contato-modal-contêiner { Mostrar nenhum; posição: fixa; superior: 0; esquerda: 0; largura: 100%; altura: 100%; índice z: 9999; } #contato-modal { posição: relativa; margem: 15% automático; cor de fundo: branco; largura: 30%; altura: automático; preenchimento: 15px 15px; sombra da caixa: -1px 3px 18px 0px rgba(128.128.128,1); animação: drop-in 0,5s cúbico-bezier (0,175, 0,885, 0,32, 1,275); transformar: traduzir(0%, -25%); superior: 10%; raio da borda: 30px; } @media(largura máxima: 1200px){ #contato-modal { largura: 40%; } } @media(largura máxima: 770px){ #contato-modal { largura: 85%; superior: 10%; preenchimento: 5% 10%; } } Entrada de @keyframes { de {superior: 10%;} para {superior: 25%} } .image-wrapper { largura: 100%; exibição: flexível; alinhar itens: centro; } .image-wrapper img { largura: 100%; } #contato-modal-exit { posição: absoluta; direita: 20px; fronteira:nenhuma; histórico: nenhum; tamanho da fonte: 25px; } #contact-modal-exit:hover { cor branca; } .btnWrapper{ exibição: flexível; justificar-conteúdo: centro; largura: 100%; } .btn { margem: 5px 10px; borda: 3px verde sólido; exibição: bloco; fronteira: nenhuma; raio da borda: 10px; cor: #212219; cor de fundo: #56D4C5; família de fontes: herdar; tamanho da fonte: .9em; cursor: ponteiro; -webkit-aparência: nenhum; -moz-aparência: nenhum; sombra da caixa: 0 9px #11999E; preenchimento: 5px 15px; tamanho da fonte: 15px; alinhamento de texto: centro; } .btn: foco { esboço: nenhum; sombra da caixa: 0 0 0 4px #b9c3c9; } .btn:hover {cor de fundo: #11999E} .btn:ativo { cor de fundo: ##11999E; transformar: traduzirY(4px); } .campo { margem inferior: 10px; } .campo de entrada { exibição: bloco; largura: 100%; altura da linha: 1; tamanho da fonte: 14px; } .ocultar-conteúdo-modal { Mostrar nenhum; } </estilo> {% schema %} { "nome": "Modal de desconto", "classe": "seção de índice", "configurações": [ { "type": "image_picker", "id": "imagem", "rótulo": { "cs": "Obrázek", "da": "Billede", "de": "Foto", "pt": "Imagem", "es": "Imagem", "fi": "Kuva", "fr": "Imagem", "it": "Imagine", "ja": "画像", "ko": "이미지", "nb": "Imagem", "nl": "Referência", "pl": "Obraz", "pt-BR": "Imagem", "pt-PT": "Imagem", "sv": "Imagem", "th": "รูปภาพ", "tr": "Görsel", "vi": "Hình ảnh", "zh-CN": "图片", "zh-TW": "圖片" } }, { "tipo": "texto", "id": "título", "rótulo": { "cs": "Nadpis", "da": "Sobrescrição", "de": "Título", "pt": "Título", "es": "Título", "fi": "Otsake", "fr": "En-tête", "it": "Título", "ja": "見出し", "ko": "제목", "nb": "Sobrescrição", "nl": "Kop", "pl": "Nagłówek", "pt-BR": "Título", "pt-PT": "Título", "sv": "Rubrica", "th": "ส่วนหัว", "tr": "Başlık", "vi": "Tiêu đề", "zh-CN": "标题", "zh-TW": "標題" } }, { "tipo": "caixa de seleção", "id": "show_email", "padrão": verdadeiro, "label": "Mostrar campo de e-mail" }, {"tipo": "texto", "id": "firstBtn_label", "label": "Etiqueta do botão esquerdo (botão Enviar)", "info": "Deixe os rótulos dos botões em branco para ocultá-los" }, {"tipo": "texto", "id": "secondBtn_label", "label": "Etiqueta do botão direito (botão Desativar)" }, {"tipo": "número", "id": "hora", "rótulo": { "cs": "Texto adicionado", "da": "Knaptekst", "de": "Nome do botão", "pt": "Tempo de atraso (segundos)", "es": "Etiqueta de botão", "fi": "Tekstipainike", "fr": "Texto do botão", "it": "Etichetta pulsante", "ja": "ボタンのラベル", "ko": "버튼 레이블", "nota": "Knappetikett", "nl": "Knoplabel", "pl": "Przycisk z etykietą", "pt-BR": "Etiqueta de botão", "pt-PT": "Etiqueta do botão", "sv": "Knappetikett", "th": "ป้ายกำกับปุ่ม", "tr": "Düğme etiqueta", "vi": "Nhãn nút", "zh-CN": "按钮标签", "zh-TW": "按鈕標籤" } } ], "predefinições": [ { "nome": "Modal de desconto" } ] } {% endschema %} |
7. Vá para a pasta Layout e clique em theme.liquid
8. cole o código abaixo antes de </body> e clique em SALVAR
| {% section 'discount-modal' %} |
Caso queira que o modal de desconto apareça apenas na página inicial. Cole o código abaixo
| {% if template == index %} {% section 'discount-modal' %} {% endif %} |
Tudo o que resta fazer é “Personalizar tema”. Deixe-me saber se você tem perguntas (",)
Atualização 23/10/21: Corrigi o CSS para que funcione com o tema Dawn. Também adicionei uma opção para ocultar o campo de e-mail. Além disso, foi adicionada uma opção na etapa 8 para que o pop-up seja exibido apenas na página inicial
5 comentários
Unfortunately, this code is old. We do have other pop up modal that will not appear once the customer opt out. You can see the code here https://made4uo.com/blogs/shopify-tutorial/pop-up-modal-with-timer
How can I just display the popup one per session (not on everypage)
Hello, I just followed your directions to a T for creating the pop up only on the homepage. Where do I go to then edit the pop up? Or where will I see it happen? I clicked the preview store button, and I didn’t see anything pop up. I also don’t see any way to edit it in the Customize Theme space. Is it CSS and HTML coding only?
@deepak you can place this code {% section ‘discount-modal’ %} in the index.liquid inside section folder instead placing it in the theme.liquid
how to show only front page