dawn theme pop up

Pop Up Modal With Timer

How to see the code

1. Please log in/create an account first. This is to ensure that all purchases are connected to an account and can be viewed on different devices.

2. Purchase the code using the "purchase box" on the specific page of the desired code.

3. After the purchase, please refresh the page.

Compatibility: Compatible on most Shopify themes, from Debut to Dawn 2.0.

The pop up should help your store and not annoy your customers. I created a pop up modal before and decided to make an updated one.

The modal has three buttons. The first button, which is for subscribing, will be able to add the customer's email in your customer list of subscribers. If the user sign up, they will not going to be ask again even they close the browser, unless they sign up with a different device. For the second button, you can set a timer on when you want the user to be ask again. The last one is the "No, thank you" button which I tried to make it small, this will opt the customer and will not be ask again unless they reopen the browser again. 

What you are buying:

  • Add a pop up modal without an app
  • Pop up will not show again if customer decline
  • Have an option to be ask later

What makes our code better:

  • We do not use external libraries, with that being said, our code will have no to minimal effect to your website's speed performance
  • We do not leave or add codes use to advertise for our website
  • Our code is mobile friendly

Any issues related to the code will be fix with no additional cost, excluding code customization requests. Simply contact us with "Chat with us." We are just a button away. 

 To start:

1. Go to your Online store > Themes > Click Actions > Edit code.

2. Open the Section folder and create a new file. Name it "pop-up", then paste the code below. Then click SAVE.

<pop-up-modal data-delay="{{section.settings.delay | times: 1000 }}"
data-opt-time="{{section.settings.opt_time | times: 1000 | times: 60 }}">
<div class="popUpContainer">
<div class="popUpWrapper" style="{% if section.settings.full_width == true %}padding: 0 0 20px; {% else %} padding: 20px; {% endif %}">
{% assign img = section.settings.image %}
{% if img != blank %}
{% if section.settings.image_link != blank %}<a href="{{section.settings.image_link }}"{% else %}<div{% endif %}
class="imageLink {% if section.settings.full_width == true %} fullWidthImage{% endif %}">
<img style="width: 100%" alt="{{img.alt }}"
srcset="{% if img.width >= 493 %}{{ img | img_url: '493x' }} 493w,{% endif %}
{% if img.width >= 600 %}{{ img | img_url: '600x' }} 600w,{% endif %}
{% if img.width >= 713 %}{{ img | img_url: '713x' }} 713w,{% endif %}
{% if img.width >= 823 %}{{ img | img_url: '823x' }} 823w,{% endif %}
{% if img.width >= 990 %}{{ img | img_url: '990x' }} 990w,{% endif %}
{% if img.width >= 1100 %}{{ img | img_url: '1100x' }} 1100w,{% endif %}
{% if img.width >= 1206 %}{{ img | img_url: '1206x' }} 1206w,{% endif %}
{% if img.width >= 1346 %}{{ img | img_url: '1346x' }} 1346w,{% endif %}
{% if img.width >= 1426 %}{{ img | img_url: '1426x' }} 1426w,{% endif %}
{% if img.width >= 1646 %}{{ img | img_url: '1646x' }} 1646w,{% endif %}
{% if img.width >= 1946 %}{{ img | img_url: '1946x' }} 1946w,{% endif %}
{{ img | img_url: 'master' }} {{ img }}w"
src="{{ img | img_url: '1946x' }}"
loading="lazy"
width="973">
{% if section.settings.image_link != blank %}</a>{% else %} </div>{% endif %}
{% endif %}
{% if section.settings.popUpTitle!= blank %}<h1>{{section.settings.popUpTitle}}</h1>{% endif %}
{% if section.settings.content != blank %}
{{section.settings.content}}
{% endif %}
{%- form 'customer', id: 'Contact', class: 'footer__newsletter newsletter-form newsletter--popup' -%}
<input type="hidden" name="contact[tags]" value="newsletter">
<div class="newsletter-form__field-wrapper">
<div class="field">
<input
id="NewsletterForm--{{ section.id }}"
type="email"
name="contact[email]"
class="field__input"
value="{{ form.email }}"
aria-required="true"
autocorrect="off"
autocapitalize="off"
autocomplete="email"
{% if form.errors %}
autofocus
aria-invalid="true"
aria-describedby="Contact-error"
{% elsif form.posted_successfully? %}
aria-describedby="Contact-success"
valid
{% endif %}
placeholder="Email"
required>
</div>
<label class="field__label" for="NewsletterForm--{{ section.id }}">Email
</label>
{%- if form.errors -%}
<small class="newsletter-form__message form__message" id="Contact-error">{% render 'icon-error' %}{{ form.errors.translated_fields['email'] | capitalize }} {{ form.errors.messages['email'] }}</small>
{%- endif -%}

</div>
<div class="popUpButtonContainer">
{% if section.settings.button_1 != blank %}<button type="submit" class="btn button signUpButton" name="commit" id="Subscribe" aria-label="{{ 'newsletter.button_label' | t }}">
{{section.settings.button_1}} </button>{% endif %}
{% if section.settings.button_2 != blank %}<span class="btn button optOutDelay">{{section.settings.button_2}}</span>{% endif %}
</div>
<span type="button" class="popUpOptOutButton">No. Thank you</span>
{%- endform -%}
</div>
</div>
</pop-up-modal>
<script>
class PopUpModal extends HTMLElement {
constructor() {
super();
this.delayTime = this.dataset.delay;
this.optTime = this.dataset.optTime;
this.modal = this.querySelector('.popUpContainer');

this.optOutButton = this.querySelector('.optOutDelay');
this.noPop = this.querySelector('.popUpOptOutButton');
this.signUp = this.querySelector('.signUpButton');

if(this.noPop != null ) {
this.noPop.addEventListener('click', this.hidePop.bind(this));
}
if(this.optOutButton != null ) {
this.optOutButton.addEventListener('click', this.delay.bind(this));
}
if(this.signUp != null ) {
this.signUp.addEventListener('click', this.subscribed.bind(this));
}
let t = this.delayTime;
this.setTime(t);
}

setTime(t) {
setTimeout(() => {this.display()}, t)
// localStorage.removeItem('optOut'); //Remove the optOut in the localStorage
}

display() {
if( localStorage.getItem('optOut') != 'true') {
if(sessionStorage.getItem('optOut') != 'true'){
this.modal.style.visibility = 'visible';
}
}
}

delay() {
this.setTime(this.optTime);
this.hideModal();
}

hideModal() {
this.modal.style.visibility = 'hidden';
}

hidePop() {
clearTimeout();
sessionStorage.setItem('optOut', 'true');
this.hideModal();
}
subscribed() {
this.hideModal();
localStorage.setItem('optOut', 'true');
console.log('clicked');
}
}

customElements.define('pop-up-modal', PopUpModal);
</script>
<style>
.popUpContainer {
width: 100%;
height: 100%;
position: fixed;
background: rgba(0, 0, 0, .5);
z-index: 13;
top: 0;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
visibility: hidden;
}
.popUpWrapper {
width: 400px;
height: max-content;
display: flex;
flex-direction: column;
align-items: center;
align-self: center;
justify-content: space-around;
background: {{section.settings.modal_bg}};
border-radius: 10px;
margin: auto;
}
.newsletter--popup {
display: flex;
flex-direction: column;
align-items: center;
}
.popUpWrapper h1 {
text-align: center;
margin-bottom: 0;
}

.popUpButtonContainer {
display: flex;
gap: 30px;
margin: 20px auto;
}

.field__label {
font-size: 1.6rem;
left: 1.5rem;
top: 1rem;
margin-bottom: 0;
pointer-events: none;
position: absolute;
transition: top .3s ease,
font-size .3s ease;
color: rgba(0,0,0, 0.75);
letter-spacing: 0.1rem;
line-height: 1.5;
}
.imageLink {
width: 150px;
display: flex;
}
.fullWidthImage{
width: 100%;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
overflow: hidden;
}
.popUpOptOutButton {
align-self: center;
}
.popUpOptOutButton:hover {
text-decoration: underline;
}

@media only screen and (max-width: 481px) {
.popUpWrapper {
width: 300px;
}
.popUpButtonContainer {
gap: 10px;
}
}
</style>
{% schema %}
{
"name": "Pop Up Modal",
"settings": [
{
"type": "color",
"id": "modal_bg",
"default": "#eee",
"label": "Modal background color"
},
{
"type": "image_picker",
"id": "image",
"label": "image"
},
{
"type": "checkbox",
"id": "full_width",
"label": "Full width image"
},
{
"type": "url",
"id": "image_link",
"label": "Image link"
},
{
"type": "text",
"id": "popUpTitle",
"label": "Modal title"
},
{
"type": "richtext",
"id": "content",
"default": "<p>Tell more about this promotion</p>",
"label": "Pop up content"
},
{
"type": "text",
"id": "button_1",
"label": "First button label",
"info": "Leave the button label blank to hide it"
},
{
"type": "text",
"id": "button_2",
"default": "Maybe later",
"label": "Second button label",
"info": "Leave the button label blank to hide it"
},
{
"type": "range",
"id": "delay",
"min": 1,
"max": 100,
"step": 1,
"unit": "s",
"label": "Delay time in seconds",
"default": 5
},
{
"type": "range",
"id": "opt_time",
"min": 1,
"max": 100,
"step": 1,
"unit": "m",
"label": "Opt time in minutes",
"default": 5
}
],
"presets": [
{
"name": "Pop Up Modal"
}
]
}
{% endschema %}

 

3. Go to Layout folder, open the theme.liquid, then paste the code below before the  {% section 'announcement-bar' %}.

{% section 'pop-up' %}

 

Update 07/12/2022: Fix the bug with the "Maybe later" button

That's it (",)

Copied!
Back to blog

4 comments

Hi @IRVIN CONTRERAS,

The recaptcha only appears if you are doing it inside the theme editor. You can also disable recaptcha in your Preferences.
From you Admin store, go to Online Store > Preferences, and go down to Spam protection

Made4Uo

How can i delete the recatpcha button y always on the buttom left

Irvin Contreras

Hi @CHRIS FERNLEY,
I made updates and fix the bug. Thank you for putting this in our attention.

Made4Uo

I have noticed if you fill in your email address but then decide to click “Maybe Later” it then submits your email address to the customers list.

Chris Fernley

Leave a comment