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. 

I would suggest to add this to all your pages, just in case they want to to be ask again later.

 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 %}<button class="btn button optOutDelay">{{section.settings.button_2}}</button>{% 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' %}

 

That's it

Copied!
Voltar para o blogue

Deixe um comentário