Compatibility: Compatible on most Shopify themes, from Debut to Dawn 2.0.
How to create a discount modal section that can be customize.
This pop up works with Debut theme and also with Dawn Theme.
1. Set up the EmailJS first, please see the link for more instructions how to set up your EmailJS
2. Go to your admin Shopify store
3. Click "Themes", "actions", "edit code"
4. Find Section folder
5. Create a section and name it as "discount-modal"
6. Copy and paste the code below, then click SAVE
| <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/emailjs-com@2/dist/email.min.js"></script> <script type="text/javascript"> emailjs.init('user_xxxx')</script> <div id="modal-contact-dark-overlay"></div> <div id="contact-modal-container"> <div id="contact-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="Team photo"> </div> <h1 class="h1">{{ section.settings.title | escape }}</h1> <form id="form"> {% if section.settings.show_email == true %} <div class="field"> <label for="ContactFormEmail">Email</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> <script> var timeDelay = "{{ section.settings.time}}" *1000; const myPopup = setTimeout(function() { showOverlay(); showModal(); }, timeDelay) document.getElementById('form').addEventListener('submit', function(event) {event.preventDefault(); const serviceID = 'default_service'; const templateID = 'template_xxxxx'; emailjs.sendForm(serviceID, templateID, this).then(() => { alert('Sent!'); hideOverlay(); hideModal(); }, (err) => { alert(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"; // Close the Modal Window by clicking the X document.getElementById("contact-modal-exit").onclick = function(){ hideOverlay(); hideModal(); } document.getElementById("optOut").onclick = function(){ hideOverlay(); hideModal(); } </script> <style> #modal-contact-dark-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); overflow: auto; animation-name: animateopacity; animation-duration: 0.5s; z-index: 9999; } @keyframes animateopacity { from {background-color: rgba(0, 0, 0, 0.0)} to {background-color: rgba(0, 0, 0, 0.7)} } #contact-modal-container { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; } #contact-modal { position: relative; margin: 15% auto; background-color: white; width: 30%; height: auto; padding: 15px 15px; box-shadow: -1px 3px 18px 0px rgba(128,128,128,1); animation: drop-in 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); transform: translate(0%, -25%); top: 10%; border-radius: 30px; } @media(max-width: 1200px){ #contact-modal { width: 40%; } } @media(max-width: 770px){ #contact-modal { width: 85%; top: 10%; padding: 5% 10%; } } @keyframes drop-in { from {top: 10%;} to {top: 25%} } .image-wrapper { width: 100%; display: flex; align-items: center; } .image-wrapper img { width: 100%; } #contact-modal-exit { position: absolute; right: 20px; border:none; background:none; font-size: 25px; } #contact-modal-exit:hover { color: white; } .btnWrapper{ display: flex; justify-content: center; width: 100%; } .btn { margin: 5px 10px; border: 3px solid green; display: block; border: none; border-radius: 10px; color: #212219; background-color: #56D4C5; font-family: inherit; font-size: .9em; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; box-shadow: 0 9px #11999E; padding: 5px 15px; font-size: 15px; text-align: center; } .btn:focus { outline: none; box-shadow: 0 0 0 4px #b9c3c9; } .btn:hover {background-color: #11999E} .btn:active { background-color: ##11999E; transform: translateY(4px); } .field { margin-bottom: 10px; } .field input { display: block; width: 100%; line-height: 1; font-size: 14px; } .hide-modal-content { display: none; } </style> {% schema %} { "name": "Discount Modal", "class": "index-section", "settings": [ { "type": "image_picker", "id": "image", "label": { "cs": "Obrázek", "da": "Billede", "de": "Foto", "en": "Image", "es": "Imagen", "fi": "Kuva", "fr": "Image", "it": "Immagine", "ja": "画像", "ko": "이미지", "nb": "Bilde", "nl": "Afbeelding", "pl": "Obraz", "pt-BR": "Imagem", "pt-PT": "Imagem", "sv": "Bild", "th": "รูปภาพ", "tr": "Görsel", "vi": "Hình ảnh", "zh-CN": "图片", "zh-TW": "圖片" } }, { "type": "text", "id": "title", "label": { "cs": "Nadpis", "da": "Overskrift", "de": "Titel", "en": "Heading", "es": "Título", "fi": "Otsake", "fr": "En-tête", "it": "Heading", "ja": "見出し", "ko": "제목", "nb": "Overskrift", "nl": "Kop", "pl": "Nagłówek", "pt-BR": "Título", "pt-PT": "Título", "sv": "Rubrik", "th": "ส่วนหัว", "tr": "Başlık", "vi": "Tiêu đề", "zh-CN": "标题", "zh-TW": "標題" } }, { "type": "checkbox", "id": "show_email", "default": true, "label": "Show email field" }, {"type": "text", "id": "firstBtn_label", "label": "Left Button label (Submit button)", "info": "Leave the button labels blank to hide them" }, {"type": "text", "id": "secondBtn_label", "label": "Right Button label (Opt out button)" }, {"type": "number", "id": "time", "label": { "cs": "Text tlačítka", "da": "Knaptekst", "de": "Button-Name", "en": "Delay Time (Seconds)", "es": "Etiqueta de botón", "fi": "Tekstipainike", "fr": "Texte du bouton", "it": "Etichetta pulsante", "ja": "ボタンのラベル", "ko": "버튼 레이블", "nb": "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 etiketi", "vi": "Nhãn nút", "zh-CN": "按钮标签", "zh-TW": "按鈕標籤" } } ], "presets": [ { "name": "Discount Modal" } ] } {% endschema %} |
7. Go to Layout folder and click theme.liquid
8. paste the code below before the </body>, then click SAVE
| {% section 'discount-modal' %} |
If you want the discount modal to only appears at the home page. Paste the code below instead
| {% if template == index %} {% section 'discount-modal' %} {% endif %} |
All left to do is "Customize theme." Let me know if you have questions (",)
Update 10/23/21: I fix the CSS so it will work with Dawn Theme. I also added an option the hide the email field. Also, added an option at step #8 so pop up only shows in the home page
5 comentários
+
Hi follow me at heelth.com
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