Create A Customizable Pop-up

How to create a discount modal section that can be customize. 

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">&#x2715;</button>
<p id="modal-success-message"></p>
<div id="contact-modal-form-content">
<img src="{{ section.settings.image | img_url: 'large' }}" alt="Team photo">
<h1 class="h1">{{ section.settings.title | escape }}</h1>
<form id="form">
<div class="field">
<label for="ContactFormEmail">Email</label>
<input type="email" name="email" id="email">
</div>
<div id= "bothBtn">
<button type="submit" class="btn" id="getBtn" >{{ section.settings.firstBtn_label | escape }} </button>
{% if section.settings.show_secondBtn %}
<div class="secondBtn">
<button type="button" class="btn" id="optOut">{{ section.settings.secondBtn_label | escape }} </button>
</div>
{% 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>
#bothBtn{
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;
min-width: 100%;
line-height: 1;
font-size: 14px;
}

#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%}
}

#contact-modal-exit {
position: absolute;
right: 20px;
border:none;
background:none;
font-size: 25px;
}

.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": "text",
"id": "firstBtn_label",
"label": {
"cs": "Text tlačítka",
"da": "Knaptekst",
"de": "Button-Name",
"en": "Left Button label",
"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": "按鈕標籤"
}
},
{
"type": "checkbox",
"id": "show_secondBtn",
"label": {
"cs": "Zobrazit tlačítko Zobrazit vše",
"da": "Vis knappen \"Se flere\"",
"de": "'Alle anzeigen' Button anzeigen",
"en": "Show second button",
"es": "Mostrar el botón 'Ver todo'",
"fi": "Näytä \"Näytä kaikki\" -painike",
"fr": "Afficher le bouton “Tout voir”",
"it": "Mostra il pulsante \"Visualizza tutto\"",
"ja": "「すべて表示」ボタンを表示する",
"ko": "'모두 보기' 버튼 표시",
"nb": "Vis «Se alle»-knapp",
"nl": "Knop 'Alles weergeven' weergeven",
"pl": "Pokaż przycisk „Wyświetl wszystkie”",
"pt-BR": "Exibir botão 'Ver tudo'",
"pt-PT": "Mostrar botão 'Ver tudo'",
"sv": "Visa \"Visa alla\"-knappen",
"th": "แสดงปุ่ม 'ดูทั้งหมด'",
"tr": "\"Tümünü görüntüle\" düğmesini göster",
"vi": "Hiển thị nút \"Xem tất cả\"",
"zh-CN": "显示“查看全部”按钮",
"zh-TW": "顯示「檢視全部」按鈕"
},
"default": false
},
{"type": "text",
"id": "secondBtn_label",
"label": {
"cs": "Text tlačítka",
"da": "Knaptekst",
"de": "Button-Name",
"en": "Right Button label",
"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": "按鈕標籤"
}
},
{"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": "按鈕標籤"
}
}
]
}
{% endschema %}



7. Go to Layout folder and click theme.liquid
8. paste the code below before the </body>, then click SAVE
{% section 'discount-modal' %}
9. All left to do is "Customize theme"

2 comments

@deepak you can place this code {% section ‘discount-modal’ %} in the index.liquid inside section folder instead placing it in the theme.liquid

Made4uo

how to show only front page

deepak

Leave us a comment