Create A Customizable Pop-up - Works with Dawn Theme

Create A Customizable Pop-up - Works with Dawn Theme

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">&#x2715;</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

How to make hero image the background for header - DAWN Theme

Hero image to be the background for header. It is possible. Just follow the steps below. I recomm...

Featured collection slider for Dawn Theme Shopify 2.0

Add a collection slider for your home page. This only works with Dawn Theme.

Adjust Main and Thumbnail Product Images in the Product Page for Dawn Theme

Dawn Theme issues with large images? Solve that using this video tutorial

Product Slider for Dawn Theme - No apps or subscript- Just a little bit of code

Add a product slider for Dawn theme, almost like Debut theme slider. No app or subscription neede...

Tab Component Section - Pure CSS

Add a tab component as a section which means, you can add it to any pages in Shopify 2.0, like pr...

Add WhatsApp to Shopify for Free - No App or Subscription

Add WhatsApp to your Shopify website without app or subscription. Personalize the icon with your ...

Product / Card Automatic Swipeable Carousel / Slider for Most of Shopify Theme

Add a carousel / slider for your product or card without an app or external library. This work in...

Awesome slideshow for most of Shopify Themes - Work well with Dawn

Awesome slideshow with 11 unique designs to choose from. No app or subscription needed. No coding...

3 comentários

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?

Kaydee Miller

@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

Deixe um comentário